script标签可以使用defer、asyc以及type=module来异步加载js,这三者之间的去区别如下:
defer
- 如果
script
标签设置了该属性,则浏览器会异步的下载该文件并且不会影响到后续DOM
的渲染; - 如果有多个设置了
defer
的script
标签存在,则会按照顺序执行所有的script
; defer
脚本会在文档渲染完毕后,DOMContentLoaded
事件调用前执行。
async
async
的设置,会使得script
脚本异步的加载并在允许的情况下异步执行该脚本。async
的执行,并不会按着script
在页面中的顺序来执行,而是谁先加载完谁执行,执行脚本时页面停止渲染,执行完成后继续页面渲染。DOMContentLoaded
事件的触发并不受async
脚本加载的影响。
type=module
带有type="module"的<script>,都是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,再执行模块脚本,等同于打开了<script>标签的defer属性。
<!-- 等到整个页面渲染完,再执行模块脚本 -->
<script type="module" src="foo.js"></script>
<!-- 等同于 -->
<script type="module" src="foo.js" defer></script>
<!-- 标签的async属性也可以打开,这时js只要下载完成就立即执行,并且中断页面渲染 -->
<script type="module" src="foo.js" async></script>