页面加载时的 Ajax 调用增加了加载时间答案

【问题标题】：Ajax calls on page load increase the onload time页面加载时的 Ajax 调用增加了加载时间
【发布时间】：2012-12-26 07:45:31
【问题描述】：

在我的应用程序中，我在 $(document).ready() 函数中进行了多次 ajax 调用。问题是浏览器一直处于“loading”状态，直到 ajax 调用返回。而且由于这些 ajax 调用大约需要 15-20 秒才能完成，这让我的页面加载时间长得令人作呕。
我的期望是，由于 ajax 调用是异步的，一旦所有页面加载请求完成，浏览器应该退出“加载状态”，而不关心 ajax 调用何时完成。

是否有其他事件之后我应该拨打ajax 电话？我也尝试将ajax 调用放在window.onload 事件回调中，但我仍然遇到同样的问题。

编辑：代码非常简单。我在加载脚本的头部有一个带有几个脚本标签的 HTML 文件：

<head>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
</head>

在我的一个脚本中：

$(document).ready( 
     // 3 ajax calls
 );

我使用 Ajax 调用获取 JSON。现在，我在开发工具包中看到，只有当所有这三个 ajax 调用都返回时，浏览器才会退出“加载”状态。我还注意到，当我的页面加载网络请求被缓存时，浏览器不会等待这些 ajax 调用。但是对于空缓存，完成所有页面加载请求大约需要 3-4 秒，在这种情况下，ajax 调用也会导致浏览器保持“加载状态”。

请帮忙。谢谢！

【问题讨论】：

在进行 ajax 调用时为什么不尝试 Async Option。并定义回调事件？
Ajax 调用默认是异步的，但是如果你仍然不能实现它，请定义它。你能告诉我们页面和代码还是把它放在 Fiddle Pls 上？
在所有过程完成后尝试 $(window).load() 它的工作
或尝试 $('selector').ajaxComplete()
你这样做一定有充分的理由，所以也许看看为什么服务器花了这么长时间而不是前端。

标签： jquery web-applications

【解决方案1】：

我猜你正在尝试使用 AJAX 加载 DOM，对吧？因为如果同时存在 DOM 元素或另一个网页，那么加载您的页面就会出现问题，因为有多个页面要构建您的一个页面。因为就像$(document).ready() 一样，您似乎正在使用 JQuery，并且没有问题，并且正如您所提到的，您同时也有回调，那么调试一定还可以。如果您尝试执行上述操作，您可能会遇到问题，否则 ajax 应该不会很痛苦。

【讨论】：

我正在使用 ajax 调用获取 json。
@shreyj 尝试在文件底部调用您的 JavaScript。在正文结束之前添加它。这对您的代码有好处。

【解决方案2】：

据我所知，.ready() 是一个在 DOM 完全加载时执行的函数。这意味着“加载”状态可能不是由您的 ajax 调用引起的。检查您的 DOM 是否包含 iframe 或在此处发布您的代码。

【讨论】：

我已经在开发工具包中验证过了。加载状态是由 ajax 调用引起的。实际上，由于这些 ajax 调用花费的时间太长，很明显，当浏览器仍处于加载状态时，除了这些 ajax 调用之外没有其他网络请求了。

【解决方案3】：

好的！为什么不在成功函数中调用 ajax 调用。

$.ajax({
.........
    success:function(){
        your load stuff here

       $.ajax({
           .........
           success:function(){
               your load stuff here
           }
      });
    }      // end of success of first ajax call
});

或者你可以在complete function中使用它：

$.ajax({
    .........
    success:function(){
        your load stuff here
    },
    complete:function(){
       $.ajax({
          .........
          success:function(){
               your load stuff here
          },
          complete:function(){

          }
       });
    }
});

【讨论】：

或 when() 执行几个 ajax 查询，done() 完成后做一些事情
其实没用过这些调用。
你真的有因为 .ajax() 使用它们。在 jQcon 上，我对延迟有所了解。
@Jai 这不会导致 ajax 调用一个接一个地发生而不是同时发生吗？我会试试这个，但我不明白这会如何阻止浏览器等待 ajax 调用完成。

【解决方案4】：

Ajax 调用并不是真正的异步，Ajax 有助于在没有页面回发的情况下进行服务器调用。

假设您从 JavaScript 调用服务器端方法，调用服务器端方法后，您的 JavaScript 将不会移动到下一行，直到它收到来自服务器的响应。

如果您使用 jQuery 进行 Ajax 调用，请将 asynch 属性设置为 true，然后它不会等待服务器响应。

【讨论】：

到底什么是“服务器端方法”？