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

Question

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

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

我发现将脚本标记保留在head部分中的可读性更好.

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

要么

<script defer="defer">

// do something

</script>

Answer 1

目前的最佳做法？除非需要支持较旧的浏览器（IE <10，Opera Mini等），否则请按顺序使用延迟脚本，除非使用97.45％的浏览器（参考）

为什么？使用时defer，解析就像完成脚本一样，就像我们将脚本放在body标签的末尾一样，但是总体而言脚本执行早于完成，因为脚本是与HTML解析并行下载的。这种情况将触发domInteractive用于页面加载速度的更快事件。使用时async，脚本的执行顺序会因提取脚本的速度而异，因此可以损害顺序。此外，async脚本以内联方式执行并暂停HTML的解析。

Answer 2

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

除非您需要为旧浏览器优化速度，否则您应该将脚本放在头部并标记为延迟。这 1) 将所有脚本引用保存在一个地方（更易于维护）和 2) 使浏览器更快地了解脚本，从而使其更早地开始对资源进行优先级排序。

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