彻底理解 async 和 defer 属性的作用及应用场景
彻底理解 async 和 defer 属性的作用及应用场景
默认HTML 中 script 标签的属性和加载顺序
script
标签默认是阻塞加载的,也就是先下载src
内容,然后执行src
内容,然后再往后读文档head
标签中的script
标签按顺序加载执行,然后再加载body
标签的元素。script
标签移到文档最后,就会先加载body
标签中的内容,再按顺序加载执行script
标签中的内容,此时页面看上去会更快一些。
script 标签增加 async 属性后
- 当浏览器遇到带有
async
属性的script
标签时,浏览器立即开始下载脚本文件,但不会阻止HTML
解析过程。 - 脚本文件下载完成后,浏览器会立即执行该脚本,此时不管
HTML
是否已经解析完成。 - 如果当前页面有多个带有
async
属性的脚本文件,浏览器会立即下载这些脚本文件,下载完成后立即执行。- 注意:多个脚本文件可能会以不确定的顺序执行,因为这些脚本文件下载完成的顺序可能不同,下载完成后立即执行。
async
属性主要适用于独立的脚本,不依赖于页面其他内容的加载顺序,且无需等待HTML
解析完毕即可执行的情况。
script 标签增加 defer 属性后
- 当浏览器遇到带有
defer
属性的script
标签时,立即开始下载脚本文件,但会延迟脚本的执行,直到HTML
解析完成后再执行。 - 多个带有
defer
属性的脚本文件会按照它们在页面中出现的顺序依次执行。 - 与
async
不同,defer
会保证脚本文件按在文档中script
标签顺序执行,并且会在文档解析完成后执行。 - 适用于需要等待文档解析完成后并需要按顺序执行的脚本。
async 和 defer 属性应用场景对比
- 若脚本与其他
script
脚本及页面HTML
元素无关,并且可独立运行,可使用async
属性以尽快地下载和执行脚本。 - 若脚本依赖于页面的结构,需要等待
HTML
解析完成,可以使用defer
先下载,然后等html
解析完成后执行。(或者将脚本放在body
标签 结尾处,可达到同样的效果)。
原文地址:https://blog.csdn.net/qq_39454432/article/details/138563577
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!