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请求,但仅在文档准备好时才开始修改DOM(DOMContentLoaded).要做到这一点,你可以使用jQuerys 递延对象这是有线了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