javascript - Ajax 在 </body> 之前尽快请求，还是在文档准备好时？

Question

我正在优化一个页面，但我无法分辨出它们之间的结果差异(第一个显然更快，但我不确定它是否稍微减慢了页面的呈现速度):

这将尽快启动请求，并在文档准备好时修改 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>

推荐哪一个？

Answer 1

此处的最佳做法是尽快启动 Ajax 请求，但仅在文档准备就绪 (DOMContentLoaded) 时才开始修改 DOM。为此，您可以使用 jQuerys Deferred 对象，它们与 jQuerys 扩展的 jXHR 对象相连。

<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