jquery取数据的过程如何优化响应时间？

Question

现在页面都是前后台分离用ajax取数据，传统上我们是这样写：

$(function(){//待页面加载后再执行，保证dom就绪
    $.get("url",function(data){
        //异步请求拿到数据后，对dom赋值。。。
    });
});

这样的问题是慢！需要等待页面加载完（包括各种js）,再加载数据再对dom赋值，有明显的等待时间。
如果这样直接下载：

$.get("url",function(data){
   //异步请求拿到数据后，判断页面是否准备好，再赋值
   $(function(){//待页面加载后再执行，保证dom就绪
      //为dom赋值。。。
   });
});

这样可以吗？但一个页面可能有多个请求这又怎么处理？有什么标准的写法吗？

Answer 1

这样写的前提是，请求不会挂掉。
jQuery建议把逻辑写在 $() 或者 $(document).ready 的回调函数里，是为了防止一些新手在 DOM 没就绪之前就操作 DOM ，然后就会各种错，所以只要姿势足够，或者这段代码不需要操作 DOM ，这个 $() 其实是不必要的。

虽然浏览器的渲染线程和网络线程是独立的，但是：

1. 文档解析过程中遇到静态资源是会发起请求的；
2. 没有声明异步或延迟加载的文档资源加载是会阻塞渲染的；
3. 浏览器对于同一域名下的并行请求数量是有限的(应该是5个，多出来的会排队)。

如果把异步请求前置了，它可能会阻塞其他资源的加载，其他资源又阻塞了文档解析，不但没有加速的效果，甚至会起到反作用。
所以要解决首屏展示的数据延迟的问题，应该从优化静态资源方面入手：

1. 减少首屏加载静态资源的数量和体积，例如采用精灵图合并小图片、把多个 JS 打包成少个、图片懒加载、大图用CSS背景引入、适当压缩图片、音视频和iframe采用JS加载、图片等媒体元素标签给定尺寸；
2. 避免 JS 执行阻塞渲染，没有及时性要求的 JS ，加上 defer 或者 async 属性，具体百度；
3. 增加并行请求数量，合理利用缓存，采用 CDN 引入公共库、脚本打包的时候把公共依赖单独打包、部署静态资源域名。

解决了上面这些问题，再去解决数据接口的延迟。
上面第1、3种优化方案同样适用于接口，比如将多个接口合并就可以减少请求数量；一些长期不更新且没有加密要求的接口用 get 方法，再变态一点的可以启用本地存储，事实上我还真这样干过，每次初始化先用本地数据糊一下，等拿到新的数据再更新。
以上方法只能从网络角度优化，对于延迟的原因也需要对症下药。

Answer 2

题主听说过朝三暮四的故事么？不改进速度，只是调整顺序没有任何意义啊。

关于优化响应时间的文章很多，找来看看，有的放矢。

Answer 3

promise