高性能网站建设-6将脚本放在底部

Posted 2021-01-21 xuzhengguo

1.脚本带来的问题

1.1将脚本从页面的顶部移到底部，会使页面既可以逐步呈现，也可以提高下载的并行度。

1.2将脚本放在页面越靠下的地方，意味着越多的内容能够逐步呈现。

2.并行下载

2.1 HTTP1.1规范：建议浏览器从每个主机名并行的下载两个组件。

2.2 默认情况下，IE和Firefox都遵守这一建议。可以再IE、Firefox来修改这一默认设置。

2.3 因此，与其依赖用户来修改浏览器设置，不如简单地使用CNAME（DNS别名）来将组件分别放到多个主机名中。

2.4增加并行下载的代价：消耗带宽和CPU速度，过多会降低性能。

2.5研究表明：使用2个主机名，比使用1、4或10个主机名能带来更好地性能。

3脚本阻塞下载

3.1在下载脚本时，浏览器并行下载实际上被禁用的。--即使使用了不同的主机名，浏览器也不会启动其他的下载。

3.2脚本下载时，浏览器其阻塞下载的原因：

- 脚本可能使用document.write来修改页面内容，浏览器等待，以确保页面能恰当的布局。
- 为了确保脚本能够按照正确的顺序执行。（因为脚本之间可能存在依赖关系）

4

4.1脚本对Web页面的影响

- 脚本会阻塞对其后面内容的呈现
- 脚本会阻塞对其后面组件的下载

4.2放置脚本最好的地方是页面的底部。

- 将脚本放在底部后，虽然请求时间较长，但对页面的影响很小。

4.3 另一种建议：使用延迟脚本（Deffered）。在Firefox种，即使是延迟脚本也会阻塞呈现和并行下载。

5.总结：将脚本移到页面底部。