“把脚本放在底部”正确吗?

IT技术 javascript performance yslow
2021-02-18 07:09:44

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

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

5个回答

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

如果您将脚本放在页面底部,它们将最后加载。换句话说,你的页面/应用程序的 HTML 内容/结构/css/images 将首先加载,并且可以更快地在浏览器中显示某些内容;您的用户无需等待脚本完成下载即可在您的应用程序中看到某些内容。

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

每个规则都有权重,因此某些规则比其他规则对 ySlow 等级的影响更大。

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

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

好吧,我会称这种代码已损坏。我不明白为什么您不希望更改代码,但从技术上讲,我同意您的观点。
2021-04-17 07:09:44
您能否举例说明“您别无选择,只能将脚本放在页面中的特定位置”?
2021-04-22 07:09:44
@Draemon:比如document.write在页面中间使用生成一些标签。是的,您可以等待页面加载,然后设置innerHTML某个元素的 。这不是我的意思。我的意思是能够将脚本放在底部,而无需重构代码。
2021-05-09 07:09:44
简单地初始化数据的内联 <script></script> 小片段怎么样?这是否会延迟下载先前声明的图像等?
2021-05-12 07:09:44

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

是的,这是另一种方式,但不一定是最好的。如果您可以通过良好的编码风格避免问题,请不要使用变通方法。然后你就有了框架集等的可能性。
2021-04-21 07:09:44
代码在加载时不必立即运行。您可以通过稍后在事件上调用函数来延迟运行
2021-04-28 07:09:44

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