7

我正在优化一个页面，但我无法区分这些结果之间的差异（第一个显然更快，但我不确定它是否会稍微减慢页面的渲染速度）：

这将尽快启动请求，并在文档就绪时修改 DOM：

<script>
$.ajax({
    url: '/some-url',
    success: function() {
        $(document).ready(function() {
            // do something
        });
    }
});
</script>
</body>

这将在准备好文件时开始请求：

<script>
$(document).ready(function() {
    $.ajax({
        url: '/some-url',
        success: function() {
            // do something
        }
    });
});
</script>
</body>

推荐哪一个？

4

3 回答 3

10

这里的最佳实践是尽快启动Ajax 请求，但仅在文档准备好 ( DOMContentLoaded )时才开始修改 DOM 。为此，您可以使用与 jQuerys 扩展的jXHR对象连接的 jQuerys Deferred对象。

<script>
    var req      = $.ajax({}),
        docReady = jQuery.Deferred();

    $(function() {
        docReady.resolve();
    });

    $.when( req, docReady ).done(function( data ) {
        // read the returned data and modify the DOM
    });
</script>

在 DOM 准备好之前等待开始请求是浪费时间。XHR 请求对 DOM 发生的事情没有任何业务和兴趣。

将这两件事完全解耦更有意义。如果由于某种原因 DOM 需要很长时间才能准备好，您不会浪费时间让HTTP 请求运行并收集其数据。反过来，如果请求很慢，你也会浪费时间。所以你当前的片段就像

DOM ready    
           -> XHR request    
                          -> Do something useful

而我的例子就像

DOM ready    
XHR request
            -> Do something useful as soon as the DOM and request are ready
于 2012-11-29T22:01:56.667 回答
1

由于$.ajax不以任何方式依赖 DOM，所以没有理由不能尽快调用它。在这种情况下，我会将它放在该<head>部分中，并在其依赖的脚本/脚本文件完成后立即调用它（至少是 jQuery 库）。更快地触发 AJAX 请求意味着响应能够更快地返回 - 它可能不会实际发生，但这并不重要。

检查以确保 DOM 在内部准备就绪success对您来说是必要的，这是执行代码的最快方式。使用$.when( req ).done(function () {})会创建另外 2 个 jQuery 方法调用，它们可能会或可能不会显着延迟success代码的执行——它会延迟它，但它可能是微不足道的。

此外，您在方法中使用的示例document.ready创建success了DOM 已准备好并可以立即执行的可能性（如果 AJAX 请求在 DOM 完全加载之前完成，这是我不期望的）。在 jAndy 的示例中，它document.ready立即运行$.ajax，它保证它将为准备好的文档绑定一个事件处理程序......这意味着它必须被存储（导致 DOM 稍后准备好），然后在事件发生时稍后查找，并执行。同样，区别在于可能性与保证……而且一切都可能微不足道（只要您不使用第二个示例）。

于 2012-11-29T22:46:36.293 回答
-2

在这个简单的示例中，两个版本都应该这样做。哪个更好取决于您的页面和其他脚本。如果您的脚本稍微复杂一点，并且您需要将数据传递给必须从页面获取的 ajax-request，并且您的页面此时尚未准备好 - 您将遇到错误。

另一件事是，您页面上的任何脚本都会在处理它时阻塞浏览器，因此更复杂的代码没有 doc-ready 可能会导致页面渲染过程中的短暂停止。在大多数情况下，我更喜欢让浏览器加载所有 HTML、CSS 和 JS——然后开始我的渐进式增强和加载附加内容。

但同样——在这个简单的例子中——我看不出有什么不同。

于 2012-11-29T22:08:34.987 回答