《高性能网站建设指南》阅读笔记_规则6- 将脚本放在底部

将样式表放在顶部这一点我想应该没有人反对的了，但将脚本放在底部这一点我想很多网站都习惯直接放在样式下面，我们的taoche也是一样。

如果对于小网站来说这样并无所谓，但对于每天几十万流量的大网站来说，这就影响大了，就像蝴蝶效应。

我们找个例子：
打开易车网的首页,查看源代码，我们会发现除了一个基本JS外，其他的脚本都是放在最底部，我又看了下汽车之家的选车也是，发现除了少量几个控制样式的js放在顶部，其他的也都放在了尾部。

前面提到对响应时间影响最大的是页面中组件的数量。当缓存为空时，每个组件都会产生一个HTTP请求，有时即便缓存是完整的亦是如此。要知道浏览器会并行的执行HTTP请求，大家可能会问，为什么HTTP请求的数量会影响响应时间呢？浏览器不能一次将它们都下载下来吗？对此的解释要回到HTTP1.1规范 （我找了一个中文版的给大家），该规范建议浏览器从每一个主机名并行地下载两个组件。关于浏览器的并行下载数：浏览器的并行下载进程数（firefox默认最多为6个，IE8据说最多为8个，opera 9和Safari最多 为4个）

很多WEB页面需要从一个主机名下载所有的组件。查看这些HTTP请求会发现它们是呈阶梯状的.

 

浏览器的并行下载进程数是可以修改的，如使用Firefox中的插件FastestFox，但我们不应该依赖用户来修改浏览器设置，这个可以简单的使用DNS别名，来将组件分别放到多个主机名中(新浪微博把这点发挥到极点–10个图片域名)。Yahoo！的研究表明，使用两个主机名比使用1、4或10个主机名能。我们的是从img1到img4，既然雅虎研究是2个最优，我不知道为什么咱们是4个人而新浪微博有10个之多。

脚本阻塞下载

并行下载组件的优点是很明显。但在下载脚本的时候并行下载实际上是被禁用——即使使用了不同的主机名，浏览器也不会启动其他的下载。其中一个原因是，脚本可能使用了document.write来修改页面内容，因此浏览器会等到，以确保页面能沟恰当地布局。

正确地放置

我们使用的脚本加载时间很可能比我们预期的时间长很多，因为用户的带宽也回影响脚本的响应时间。

而在我们开发过程中，很多情况我们很难讲脚本移到底部。比如刚才说得脚本使用了document.write向页面中插入了内容，就不能将其移动到页面中靠后的位置。

这里就出现了另外一种建议就是使用延迟脚本。defer属性表明脚本不包含document.write，浏览器得到这一线索就可继续进行呈现。但是如果一个脚本可以延迟，那么它就一定可以移到页面底部。而且延迟脚本只适用于IE对火狐不好使。所以底部最优。

效果演示：

Scripts in the Middle :http://stevesouders.com/hpws/js-middle.php

Scripts Top vs. Bottom :http://stevesouders.com/hpws/move-scripts.php

Scripts at the Top :http://stevesouders.com/hpws/js-top.php

Scripts at the Bottom ;http://stevesouders.com/hpws/js-bottom.php

示例：

<!-- 将JS代码的引用放在页面底部 -->
<script src="/bin/sleep.cgi?type=js&sleep=10&expires=-1&last=0"></script>
</body>
</html>