例如:
<body>
...all content is above the script...
<script src="https://foo/bar.js" defer></script>
</body>
Run Code Online (Sandbox Code Playgroud)
defer如果我们从 script 标签中删除 ,有什么关系吗?通过将脚本放在 body 标记的末尾已经延迟了脚本的执行,因此上面的代码应该与下面的代码片段相同,对吧?
<body>
...all content is above the script...
<script src="https://foo/bar.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)
小智 2
据本
当前的最佳实践?在头部按顺序使用延迟脚本,除非您需要支持较旧的浏览器(IE < 10、Opera Mini 等) - 97.45% 浏览器使用率(参考)
为什么?使用 defer 时,解析完成就像我们将脚本放在 body 标记末尾一样,但总体来说脚本执行早于完成,因为脚本是与 HTML 解析并行下载的。这种情况将触发用于提高页面加载速度的更快的 domInteractive 事件。使用异步时,脚本的执行顺序会根据脚本的获取速度而变化,因此顺序可能会受到影响。此外,异步脚本内联执行并暂停 HTML 的解析。
同样来自Mhmdrz_A
浏览器将从上到下解析文档,因此将脚本放在所有主要内容之后将使解析器能够到达该内容
稍后;这使得浏览器能够及时下载脚本;将 defer 放在底部造成的延迟绝对是没有意义的,因为浏览器不会在 HTML 解析器之前(或期间)执行它们;因此,最好让浏览器尽快加载(下载)它们,并在所有主要任务完成后立即执行它们。