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?别忘了修改小老鼠