今天读到Steve Souders的一篇关于如何放置内联脚本的文章-Positioning Inline Scripts，现总结在文本。
之前译的一篇文章《无阻塞加载脚本》谈到的是外部脚本对于页面性能的影响，例如阻塞资源下载、阻塞页面渲染等。而对于inline的脚本，同样存在类似的问题，有的甚至是有过之而无不及。
一、阻塞页面渲染
外链脚本对于页面的渲染阻塞效果仅仅局限于脚本后面的内容，而对于inline脚本而言则是整个页面，而且不论你把脚本放置在什么位置（即使是body之后）均会阻塞整个页面的渲染，可以点击这里查看。在该例子中，在head里引用了一个外部脚本和样式表，而在页面的最后添加了一段inline脚本，脚本的作用是等待2秒钟。打开页面的最初几秒时间内，你将看不到任何内容，直到最后的内联脚本执行完毕页面才渲染出来。即使改变inline脚本的位置，渲染依旧要等到脚本执行完毕才能进行，也就是说，无论inline脚本放在什么地方都会阻塞整个页面的渲染！
代码
B0 D1inline Bd C5 B1 Be D0 B4 D4 Da Ba Cf Ca Ca B5 C4 Ce Bb D6 C3 - BET188亚洲体育
这是一段测试文字，最初你是看不到的，页面打开几秒后将会出现
时间瀑布图
从图中可以看出，当脚本位于资源之后时，并未阻塞资源的下载。
二、阻塞资源下载
修改一下上个例子中的脚本位置，将脚本从body之后挪到外部脚本之前，点击这里查看。从下图中可以清晰的看到，在页面加载完成后到开始下载资源之间有大概2s左右的间隔时间，这个时间恰好是inline脚本执行的时间，这充分表明了inline脚本对资源的阻塞作用。
代码
inline脚本阻塞渲染测试
这是一段测试文字，最初你是看不到的，页面打开几秒后将会出现
时间瀑布图
三、解决方案
既然inline脚本如此可怕，那如何解决这个问题呢，文中主要提到了以下三点建议：
- 将inline脚本移到页面最底部，也就是上面第一个例子中的做法，该方法虽然必能不能避免阻塞页面的渲染，但至少不会影响资源的下载。而从第一个例子的时间瀑布图中可以非常明显的看出，脚本和样式的下载是在页面加载完成后立即执行的，并没有受inline脚本的影响，反过来，从第二个例子的时间图则可以清晰的看出inline脚本的执行阻塞了资源的下载，因此将inline脚本尽可能的后移对于资源下载来说确实是有好处的。
- 对于执行时间较长的代码可以考虑使用setTimeout来执行，使用这种方法不仅可以解决资源下载阻塞问题，还可以解决执行脚本对页面渲染的阻塞问题。
- 对于IE或Firefox3.1及以上版本中的脚本使用defer属性。
以下分别测试下第二和第三种解决方式。
setTimeout
先看例子
再看代码
inline脚本阻塞渲染测试
这是一段测试文字，最初你是看不到的，页面打开几秒后将会出现
时间瀑布图
与例2相比，在该例子中，给等待代码加了个setTimeout，效果可以从上图中看出。inline脚本的长时间执行并未阻塞资源的下载和页面的渲染，效果非常好。
defer
先看例子
再看代码
inline脚本阻塞渲染测试
这是一段测试文字，最初你是看不到的，页面打开几秒后将会出现
时间瀑布图
从上面的时间图中可以看出，给inline脚本添加defer属性后，长时间执行的脚本并未阻塞资源的下载和页面的渲染。
以上三种方式在解决资源阻塞方面的效果都差不多，能够解决的比较好。而在页面渲染方面，个人觉得效果从大到小应该是setTimeout > defer > bottom。setTimout对于脚本执行的时机能够比较灵活的把握，通过调整执行的时机可以获得比较理想的效果；defer依赖于浏览器的行为，可控性差，假如延长的时间小于其他资源的下载时间仍然会阻塞页面的渲染；将脚本放置在页面底部对于解决渲染阻塞无影响。从兼容性考虑，setTimeout和bottom则是最好的，而defer仅适用于IE和FF3.1及以上版本。
此外，需要注意的是尽量不要将inline脚本放在外部样式后面，因为主流的浏览器为了确保执行顺序，都会在样式下载、解析以及应用完成后才会执行其后的脚本，因此，会造成更严重的阻塞，查看例子。
时间瀑布图
从图中可以看出，浏览器是在样式下载完毕后才开始执行脚本的，从而导致样式和外部脚本不能并行下载，所以即使是将inline脚本放在外部样式文件之前也不要放在后面。