简述JavaScript标签中 defer和 async属性的区别 ?
defer
和 async
都是 HTML <script>
标签的属性,它们都用于改变浏览器处理脚本的方式。
默认情况下,浏览器在解析 HTML 文档的过程中,一旦遇到 <script>
标签,就会立即下载并执行该脚本,然后才会继续解析后面的 HTML。这可能会导致页面加载的延迟,特别是当脚本文件很大,或者网络连接较慢的时候。
这两个属性的作用如下:
defer
如果一个脚本标签有 defer
属性,那么浏览器会立即开始下载脚本,但会延迟执行脚本,直到整个 HTML 文档都解析完毕。如果有多个带有 defer
属性的脚本,它们会按照在文档中出现的顺序执行。
async
如果一个脚本标签有 async
属性,那么浏览器也会立即开始下载脚本。然而,一旦脚本下载完毕,浏览器会尽快执行这个脚本,而不管此时 HTML 文档是否解析完毕。如果有多个带有 async
属性的脚本,它们可能会按照下载完成的顺序执行,这个顺序可能与在文档中出现的顺序不同。
总的来说,defer
和 async
属性都可以使页面更快地呈现给用户,但它们的行为略有不同。如果一个脚本不依赖于其他脚本,并且其执行时间并不影响页面的初次渲染,那么可以使用 async
属性。如果脚本之间有依赖关系,那么可以使用 defer
属性,这样可以保证脚本按照正确的顺序执行。