使用“defer”属性时是否有必要将脚本放在页面底部？

Question

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

因此，如果使用defer属性，是否有必要将脚本标签物理地放置在页面底部和头部标签内？

我觉得将脚本标签保留在头部内部的可读性更好。

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

或

<script defer="defer">

// do something

</script>

Answer 1

你问的最佳做法？ 使用延迟脚本

为什么？放在页面底部的脚本可以很好地工作，因为脚本通常会阻止并行下载，如HTML / 1.1规范中所指定的那样，但使​​用此替代属性表示脚本不包含document.write并告诉浏览器继续渲染。

Here is a better description of using the defer attribute that can be rendered for moz

Answer 2

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

Answer 3

虽然我同意你的看法，使用'defer'并在标题中放置脚本会提高可读性，桌面和移动Opera仍然不支持此属性（详情请查看this table）。

Answer 4

在HTML底部的脚本中使用defer有不同的理由：

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

重要的是要知道每个浏览器都有“延迟”之类的东西，而繁忙的指标则有点不同。

最佳做法应该是：将脚本放在底部并推迟。

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