WPO的14条军规中包含一条“将JS脚本放到页面底部”，这是基于“渲染第一，JS脚本第二”的原则。

用户访问网页的速度感来自于页面呈现的速度，为了实现这一目标，JavaScript代码需要尽可能被延后。

 

Steve在《高性能网站建设进阶 Even Faster Web Sites》中撰写“无阻塞脚本”一章，用了整整一个月的时间。作者做了大量的研究，最先在MSN上，后来在Google, Facebook和Meebo，大多数JavaScript组件使用异步加载的方式。

JS脚本异步加载的好处是，浏览器下载脚本时不会发生阻塞，但带来了另一个负面因素：这些脚本在执行的时候，仍然会阻碍页面的呈现。也就是说异步加载虽然解决了下载阻塞，但没有解决渲染阻塞。

 

如何做到在下载和渲染都不发生阻塞呢？这是Steve其中的一个研究方向。不过这可是个系统工程，涉及浏览器创新、网页开发新技术和很多基础的东东。因为难度很大，很多人不看好，持异议的观点包括：

 

JS脚本执行过程太复杂

这一论点是：JS脚本是一门强大的语言，人们会用各种古灵精怪的方式使用它。一股脑儿的延迟所有JS脚本，会让很多网站出错。Steve建议大家使用Opera浏览器的“JS加载延迟 Delayed Script Execution”功能，如果用了之后网站没问题，那么就放心大胆的将脚本放到底部。实际上我们测试一下Gmail和Facebook就会发现没问题。当然也许很多其他网站会出问题。（起码笔者知道使用JQuery的很多页面，如果把JS脚本放到尾部，通常会出错。）

将脚本放到页面底部，会使让网页变得更慢。

这里涉及一个定义，什么叫慢网页。在用户速度体验的角度，看起来慢的网页叫做慢网页。如果一个网站的总加载时间长，但能够很快开始渲染，很快让访客看到页面有内容不断出来，用户会感觉到快。所以我们追求的不是网页实际加载速度，而是网页渲染速度，用户体验速度。

 

以上的原则，就是渲染第一、脚本第二。

 

作者: 谭砚耘@用户体验与可用性设计-科研笔记

版权属于: 谭砚耘 （TOTHETOP至尚国际  ）

版权所有。转载时必须以链接形式注明作者和原始出处

如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠