在提高网站性能的最佳实践http://developer.yahoo.com/performance/rules.html 中,Steve Souders 提到了一条规则“将脚本移到底部”。这有点令人困惑。其实我注意到很多网页没有把脚本放在底部,而YSlow仍然为这些页面标记A。
那么,我什么时候应该遵循“将脚本放在底部”的规则?
在提高网站性能的最佳实践http://developer.yahoo.com/performance/rules.html 中,Steve Souders 提到了一条规则“将脚本移到底部”。这有点令人困惑。其实我注意到很多网页没有把脚本放在底部,而YSlow仍然为这些页面标记A。
那么,我什么时候应该遵循“将脚本放在底部”的规则?
当用户从您的站点请求页面时,页面 HTML 开始流式传输到浏览器。一旦浏览器遇到外部图像、脚本、CSS 文件等的标记,它就会同时开始下载该文件。
如果您将脚本放在页面底部,它们将最后加载。换句话说,你的页面/应用程序的 HTML 内容/结构/css/images 将首先加载,并且可以更快地在浏览器中显示某些内容;您的用户无需等待脚本完成下载即可在您的应用程序中看到某些内容。
页面顶部有脚本的页面仍然得分为“A”的原因是因为这不像其他可以进行的性能改进那么重要。
每个规则都有权重,因此某些规则比其他规则对 ySlow 等级的影响更大。
我总是把脚本放在底部。在页面顶部需要脚本的原因很少。我能想到的唯一原因是您需要在页面中的任何其他内容之前立即执行 JavaScript ,这种情况非常罕见。
有时,您别无选择,只能将脚本放在页面中的特定位置。但是,如果您将脚本放在页面底部,浏览器不会中断其渲染以加载 JS 引擎来处理您的脚本(这可能会很昂贵,如果您有大量循环运行)并且可能会显示早点看到页面。
代码可能会引用尚未实例化的 DOM 对象,这是我能想到的最明显的原因。
我不确定这是一个性能问题(可能是),但我参加了 Microsoft 的演示,演示者说网络蜘蛛有时只读取网页上的前 x 个字符来索引它。因此,如果您有大量脚本,您的内容可能无法被正确访问和索引(并且您网站的页面排名不会那么高)。