内联脚本的位置对性能的影响

原文

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

测试

值得注意的一个结论：

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

内联脚本放在样式表之前，样式表和脚本的下载是并发的：

测试页面A：inline_script_position_test1.html

内联脚本放在样式表之后，会导致后续资源的下载被阻塞：

测试页面B：inline_script_position_test2.html

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

实战

来看淘宝网首页的源代码片段：

第15行的内联脚本，放在第11行的样式表后面，直接导致了下面这张timeline:

在tbsp.css没下载完之前，所有资源的下载都阻塞掉了！

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

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

结尾

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