46

在提高网站性能的最佳实践http://developer.yahoo.com/performance/rules.html中,Steve Souders 提到了一条规则“将脚本移至底部”。这有点令人困惑。实际上,我注意到很多网页没有将脚本放在底部,而YSlow仍然为这些页面标记 A。

那么,我什么时候应该遵循“将脚本放在底部”的规则?

4

5 回答 5

32

当用户从您的站点请求页面时,页面 HTML 开始流式传输到浏览器。一旦浏览器遇到外部图像、脚本、CSS 文件等的标签,它就会同时开始下载该文件。

如果您将脚本放在页面底部,它们将最后加载。也就是说,你的页面/app的HTML content/structure/css/images会先被加载,一些东西可以更快的出现在浏览器中;您的用户无需等待脚本完成下载,即可在您的应用程序中看到某些内容。

于 2008-12-20T07:46:56.913 回答
15

页面顶部有脚本的页面仍然获得“A”的原因是因为这不如其他可以进行的性能改进重要。

每条规则都是加权的,因此某些规则对 ySlow 成绩的影响比其他规则更大。

我总是把脚本放在底部。在页面顶部需要脚本的原因很少。我能想到的唯一原因是您需要在页面中的任何其他内容之前立即执行您的 JavaScript ,这非常罕见。

于 2008-12-20T07:43:02.087 回答
8

有时,您别无选择,只能将脚本放在页面中的特定位置。但是,如果您将脚本放在页面底部,浏览器不会中断其渲染以加载 JS 引擎来处理您的脚本(如果您有大量循环运行,这可能会很昂贵)并且可能会显示尽早查看页面。

于 2008-12-20T07:10:43.570 回答
7

代码可能会引用尚未实例化的 DOM 对象,这是我能想到的最明显的原因。

于 2008-12-20T07:29:52.520 回答
6

我不确定这是性能问题(可能是),但我参加了 Microsoft 的演示,演示者说网络蜘蛛有时只会读取网页上的前 x 个字符来索引它。因此,如果您有大量脚本,您的内容可能无法被正确访问和索引(并且您网站的页面排名不会那么高)。

于 2008-12-20T07:12:09.153 回答