页面的打开速度对网站的优化有极大的意义，如果打开一个页面一直处于白屏状态，若超过5s，可能大部份人都会把它关了。或者是页面加载出来了，但是比较慢，页面显示不完整，标签栏一直在转圈，页面长期处于不可交互的状态，这也是一种很不好的体验。
如何评价一个页面打开得快不快，可以用两个指标描述，一个是ready的时间，另一个是load的时间。这个可以从Chrome的控制台看到，如打开stackoverflow的首页：
一共是加载490KB，ready时间是7.36s，load时间是17.35s。再来看下打开谷歌的情况：
虽然两个页面的内容差别比较大，但是从时间来看的话，很明显谷歌的速度要明显优于stackoverflow，谷歌的ready时间只有2.22s，也就是说2.22秒之后带个页面就是布局完整可交互的了，而stackoverflow打开的时候较长时间处于空白状态，可交互时间达要到7.36s。
从load时间来看的话，两者差别不太，都比较长，可能因为它们是境外的服务器。finish时间比load时间长，是因为load完后又去动态加载了其它的js。
为什么stackoverflow的ready时间要这么长呢？下面分点介绍优化的策略
1. 减少渲染堵塞
（1）避免head标签JS堵塞
所有放在head标签里的css和js都会堵塞渲染。如果这些CSS和JS需要加载和解析很久的话，那么页面就空白了。看stackoverflow的html结构：
<它把jquery放到了head标签里，这个jquery加载了3s：
相比之下，html文件只加载了0.83s，所以这个js文件至少使页面停留了3s的空白状态。
它的解析花了20ms不到：
这个解析时间还是可以忽略，相对于加载时间而言。并且我们注意到即使把jquery给删了，stackoverflow的页面还是可以完整显示的，样式无异，这个可以复制它的源代码到本地然后删掉head里面的script标签打开页面观察。也就是话，把js放头部是没太大必要的。最关键的是它用的是谷歌的cdn，这样就导致了大陆的小伙伴们无法在正常的环境下看stackoverflow，一打开整个页面一两分钟都保持空白态。
有两种解决办法，第一种是把script放到body后面，这也是很多网站采取的方法。第二种是给script加defer的属性，defer是html5新增的属性。一旦script是defer延迟的，那么这个script将会异步加载，但不会马上执行，会在readystatechange变为Interactive后按顺序依次执行，用以下demo做说明：
<!DOCType html>
defer.js的内容为：
console中间让它执行一段较长的时间（约3秒），normal.js内容类似，打印的log：
可以看到，正常的script最先执行，然后紧接着的内联script依次执行，说明正常script是串行执行的，不过它们可以是并行加载，例如stackoverflow写在head标签里面的这两个正常的script是并行加载的：
回到上面，第四行readystatechange变成interactive，然后开始执行defer的script，执行完后依次触发ready和load事件。
也就是说，defer的脚本会正常加载，但是延后执行，在interactive后执行，所以不会block页面渲染。因此放在head标签的script可以加一个defer，但是加上defer的脚本发生了重大的变化，不能够影响渲染DOM的过程，只能是在渲染完了，例如绑的click事件在整个页面没渲染好之前不能生效。并且很多人要把它写在head里面，是为了在页面中间的script能调用到这
最低0.47元/天 解锁文章
5418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
