jQuery ajax 速度与直接访问速度答案

【问题标题】：jQuery ajax speed vs direct access speedjQuery ajax 速度与直接访问速度
【发布时间】：2012-03-06 15:01:38
【问题描述】：

我有一个使用 Pyramid 框架编写的 Web 服务和一个使用 jQuery 和 jQuery Mobile 编写的前端。我注意到，与直接在浏览器中访问 URL 相比，使用 Ajax 方法完成某些 Ajax 调用的时间大约要长 5-10 倍。

为了简洁起见，我的 Ajax 代码如下所示：

$.ajax({
      url:address,
      dataType:'jsonp',
      crossDomain: true,
      success: function(data)
      {
          Parsing and other stuff that takes some time...
      }});

现在，我一次触发大约 10 个这些，发送到不同的 URL，这可能是响应较慢的原因，但如果我一次只触发一个，它仍然慢大约 3 倍。（30 毫秒对 90 毫秒）。我曾尝试使用 Pyramid 中的女服务员，以及 mod_wsgi（1 个进程，4 个线程），结果大致相同。

我的问题是：开销来自哪里？金字塔？网络服务器？ jQuery？ jQM? .ajax()？如果可以减少请求时间，我该怎么做？

编辑：在 JSON 和 JSONP 之间切换几乎没有效果，但进一步的测试表明，从测试到测试的时间变化很大（50 毫秒到 100 毫秒）。但是，通过浏览器直接访问服务总是30ms +/- 1 ms。

我已经使用 Firebug、Chrome Web 开发工具和 Fiddler 对此进行了测试，结果相似。在 Fiddler 中复制其中一个请求时，我得到的结果与在浏览器中直接访问资源的结果相似。

这是一个来自 Firebug 的屏幕截图，我故意尝试通过运行 9 个调用，每次运行 5 次来使其变慢：http://s16.postimage.org/n6t5z1ow5/ajax_Cap.png 希望可以提供更多提示。灰色是“阻塞”，紫色是“等待”。

【问题讨论】：

您在 Firebug 中看到了什么？您是否在任何步骤都记录了时间？数据在您身边，而不是我们...
在 Firebug 和 Chrome 中，我发现大部分时间都花在 ajax 和直接访问情况下“等待”。
这可能是与使用jsonp 相关的某种开销。这个测试表明它比正常的要慢一点json:jsperf.com/ajax-jsonp-vs-ajax-json
另外，是否是同一个 Pyramid 进程同时为页面和 jsonp 提供服务？
我将通过切换到运行两者的服务器的 json 进行测试，这样可以消除跨域/jsonp 问题。 Pyramid 提供的 JS 或其他一些 Web 服务器 JS 的结果大致相同。（如果我明白你的意思……）

标签： jquery ajax performance mod-wsgi pyramid

【解决方案1】：

我猜问题出在跨域/jsonp 选项上——因为这是一个绕过浏览器安全限制的“假”ajax 请求。

JQuery 在这里所做的是创建一个脚本元素，其源设置为您在调用中提供的 URL（以及其他一些东西，将返回的数据包装在函数调用中），因此几乎可以肯定存在一些奇怪/缓慢继续。如果我没记错的话，浏览器实际上会在加载脚本块的同时阻止脚本执行......？

您可以尝试通过在您的服务中包含一个设置为“*”（允许所有访问）的"Access-Control-Allow-Origin" 标头并取出所有“跨域”内容来解决此问题。

【讨论】：

我尝试将“Access-Control-Allow-Origin”设置为“*”，但据我所知，这几乎没有效果。 dataType:'jsonp' 和 dataType:'json' 的一大区别是，在运行非常多的请求时，前面的请求似乎并没有阻塞后面的请求，如图所示，但结果是一样的，后面的请求稍后才开始。
在您设置了标头并检查它是否通过后，将 crossdomain 设置为 false，然后再试一次。
刚刚检查过，确实是通过了。然而，没有明显的区别。我还尝试在 Pyramid 视图中将渲染器从 jsonp 更改为 json，但没有明显的变化。