30

我总是将脚本标签放在页面底部，因为在 HTML/CSS 和文本等内容完成加载后加载脚本是一种很好的做法。我刚刚发现了 defer 属性，它基本上做同样的事情，即它等待页面完成加载，然后再获取和执行脚本。

因此，如果使用 defer 属性，是否有必要将 script 标签物理放置在页面底部而不是 head 标签内？

我发现将脚本标签保留在 head 部分中会更好地提高可读性。

<script src="script.js" defer="defer"></script>

或者

<script defer="defer">

// do something

</script>
4

5 回答 5

8

当前的最佳实践？在 head 中按顺序使用延迟脚本，除非您需要支持较旧的浏览器（IE < 10、Opera Mini 等） - 97.45% 的浏览器使用率（参考）

为什么？使用defer, 解析就像我们将脚本放在 body 标记的末尾一样完成，但总体而言，脚本执行之前完成得很好，因为脚本已与 HTML 解析并行下载。这种情况将触发domInteractive用于页面加载速度的更快事件。使用async时，脚本的执行顺序会根据获取脚本的速度而有所不同，因此可能会影响顺序。此外，async脚本内联执行并暂停 HTML 的解析。

于 2012-09-13T23:49:44.143 回答
7

自从编写这些答案以来，最佳实践已经发生了变化，因为全球对该defer属性的支持已经增长到98%。

除非您需要针对旧版浏览器优化速度，否则您应该将脚本放在头部并标记为 defer。这 1) 将所有脚本引用保存在一个地方（更易于维护）和 2) 使浏览器更快地意识到脚本，这让它更早地开始优先考虑资源。

对于大多数页面而言，性能差异差异应该可以忽略不计，因为浏览器的预加载器可能在整个文档被解析之前不会开始下载延迟脚本。但是，它不应该受到伤害，它为浏览器留下了更多的工作，这通常是最好的。

于 2018-02-26T14:13:50.740 回答
2

首先，并非所有浏览器都支持 defer 属性（有些支持它的只是忽略它）。将脚本放在页面底部可确保其上方的所有 HTML 元素在脚本执行之前都已加载到 DOM 中。另一种方法是使用该onload方法或使用 jQuery 的DOM 就绪功能。

于 2012-09-13T23:43:39.613 回答
2

在 HTML 底部的脚本中使用 defer 有不同的原因：

  • 并非所有浏览器都支持“延迟”。如果你把你的脚本放在带有 defer 的 HEAD 中并且浏览器不支持 defer，那么脚本会阻止以下元素的并行下载，并且还会阻止脚本下所有内容的渐进式渲染。
  • 如果您只是将脚本放在底部而不延迟，浏览器将继续显示繁忙指示符，直到页面完成 JavaScript 解析。
  • 在某些情况下，“底部没有延迟的脚本”会阻止渐进式渲染。在 Google Chrome 36 和 IE11 中测试（见下方评论）

重要的是要知道每个浏览器都处理“延迟”之类的事情，而且繁忙的指标也略有不同。

最佳实践应该是：将脚本放在底部并使用 defer。

除了可读性方面，与“带延迟的头部脚本”或“不带延迟的底部脚本”相比，我只看到将脚本放在底部并带有延迟的优势。

于 2014-08-21T07:25:52.570 回答
1

虽然我同意您的观点，即使用“延迟”并将脚本放在标题中会提高可读性，但桌面和移动 Opera 仍然不支持此属性（请查看此表了解详细信息）。

于 2012-09-13T23:42:42.990 回答