简述JavaScript标签中 defer和 async属性的区别 ?

deferasync 都是 HTML <script> 标签的属性,它们都用于改变浏览器处理脚本的方式。

默认情况下,浏览器在解析 HTML 文档的过程中,一旦遇到 <script> 标签,就会立即下载并执行该脚本,然后才会继续解析后面的 HTML。这可能会导致页面加载的延迟,特别是当脚本文件很大,或者网络连接较慢的时候。

这两个属性的作用如下:

defer

如果一个脚本标签有 defer 属性,那么浏览器会立即开始下载脚本,但会延迟执行脚本,直到整个 HTML 文档都解析完毕。如果有多个带有 defer 属性的脚本,它们会按照在文档中出现的顺序执行。

async

如果一个脚本标签有 async 属性,那么浏览器也会立即开始下载脚本。然而,一旦脚本下载完毕,浏览器会尽快执行这个脚本,而不管此时 HTML 文档是否解析完毕。如果有多个带有 async 属性的脚本,它们可能会按照下载完成的顺序执行,这个顺序可能与在文档中出现的顺序不同。

总的来说,deferasync 属性都可以使页面更快地呈现给用户,但它们的行为略有不同。如果一个脚本不依赖于其他脚本,并且其执行时间并不影响页面的初次渲染,那么可以使用 async 属性。如果脚本之间有依赖关系,那么可以使用 defer 属性,这样可以保证脚本按照正确的顺序执行。

发表评论

后才能评论