原文

Steve Souders: Positioning Inline Scripts. 好文无需废话,推荐仔细阅读。

测试

值得注意的一个结论:

要避免将内联脚本放在样式表和页面其它资源之间,这非常重要。这会使得看起来像是样式表阻塞了后续资源的下载。这种行为的原因是:所有主流浏览器都会保持 CSS和JavaScript的顺序。在样式表完全下载、解析及应用之后,内联脚本才能执行。同时,必须在内联脚本执行后,剩余资源才能下载。这就使得, 放在样式表和内联脚本之后的资源,下载被阻塞了。

内联脚本放在样式表之前,样式表和脚本的下载是并发的:
inline_script_position1.png

测试页面A:inline_script_position_test1.html

内联脚本放在样式表之后,会导致后续资源的下载被阻塞:
inline_script_position2.png

测试页面B:inline_script_position_test2.html

页面A和页面B的唯一区别就是,内联脚本的位置放在样式表前面,但就这么简单的一个位置调整,能节省约100ms下载时间。

实战

来看淘宝网首页的源代码片段:
inline_script_position3.png

第15行的内联脚本,放在第11行的样式表后面,直接导致了下面这张timeline:
inline_script_position4.png
在tbsp.css没下载完之前,所有资源的下载都阻塞掉了!

仅要将第15行的内联脚本放到样式表前面,立刻就能提速100多ms.(注:淘宝首页正在做性能优化,这个调整将很快实施)

目前eBay, Amazon等大型站点的首页也存在此问题。国内站点看了下有啊和拍拍。有啊的都外链,没问题(感叹百度的硬件,不在乎多几个HTTP链接数)。拍拍的则都内联,因此也没问题(看完有啊看拍拍,有点怪怪的,说不出来的感觉)。

结尾

页面编码时,在head里,习惯性先写style再写script. 以后遇上inline script时,还是得调整下位置,放到style前面去。