在结束正文标记的末尾向脚本标记添加 defer 是否多余?



例如:

<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脚本才能执行。

但如果发生这种情况,那么你无论如何都会有其他问题。

最新更新