例如:
<body>
...all content is above the script...
<script src="https://foo/bar.js" defer></script>
</body>
我们是否从脚本标签中删除defer
有关系吗?通过将脚本放在 body 标签的末尾已经延迟了脚本的执行,所以上面的代码应该与下面的代码片段相同,对吗?
<body>
...all content is above the script...
<script src="https://foo/bar.js"></script>
</body>
根据本
·当前的最佳实践?在 head 中按顺序使用延迟脚本,除非您需要支持较旧的浏览器(IE <10、Opera Mini、 等)- 97.45% 浏览器使用率 (参考)
为什么?使用 defer,解析就像我们将脚本放在 body 标签的末尾一样完成,但总的来说,脚本执行完成 之前,因为脚本已与 HTML 解析。此场景将触发更快的 domInteractive 用于页面加载速度的事件。使用异步,在 脚本将执行的内容因脚本的速度而异 已获取,因此订单可能会受到损害。此外,异步脚本是 内联执行并暂停 HTML 的解析。
也来自Mhmdrz_A
浏览器将从上到下解析文档,因此将 所有主要内容之后的脚本将使解析器达到该
后来;这使得浏览器下载脚本 后来;将延迟放在底部造成的延迟是 绝对是无稽之谈,因为浏览器不会在 HTML 解析器之前(或期间)执行它们; 因此,最好让浏览器尽快加载(下载)它们(),并尽快执行它们 因为所有主要任务都已完成。
我们是否从脚本标签中删除延迟有关系吗?通过把 正文标记末尾的脚本已经延迟了 执行脚本,因此上面的代码应该与 以下片段对吧?
你说的对!在这种情况下,我会说没有区别。正如您正确提到的:body 标签在脚本之前,这意味着它首先被解析。你的html文件在完全解析了前面的代码之前不知道有任何javascript,因此defer什么都不做。
Defer 唯一的工作就是在所有 html 被解析后运行 JavaScript:参见 MDN 文档。
也就是说,使用略有不同的代码,比如说,下面的另一个<script />
是发现差异的地方。然后,第二个(或更多)<script />
标签将开始并行下载(但按顺序执行)。例如:
<script src="script1.js" />
<script src="script2.js" />
首先下载脚本1,阻止脚本 2 下载。
<script src="script1.js" defer />
<script src="script2.js" defer />
script1 开始下载,然后 script2 也开始并行下载 — 但是 — script1 仍然首先执行,即使 script2 先完成下载。
延伸阅读:
关于- html 中脚本执行顺序的详细堆栈答案
- W3Schools 对 html 格式
<script />
(及其属性)的描述 - MDN 文档在延迟
希望这有帮助!
实际上,这两者之间没有区别。 除了document.write
(无论如何都不应该使用)显然不允许defer
.
从技术上讲,这些是不同的。因此,具有defer
的脚本和没有的脚本之间的区别在于,具有defer
的脚本在 DOM 完全加载后执行,而在加载时没有脚本的脚本。
如果客户端收到<script src="https://foo/bar.js" defer></script>
标记,但文档的其余部分由于某种原因而延迟,这可能会有所不同。仅当发送完整响应时,defer
脚本才能执行。
但如果发生这种情况,那么你无论如何都会有其他问题。