1、前提
script标签用来加载和执行脚本,直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载和执行的过程中,会阻塞后续的DOM加载。
2、defer
- 如果script标签设置了该属性,则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染
- 如果有多个设置了defer的script标签存在,则会按照顺序执行所有的script
- defer脚本会在文档渲染完毕后,DOMContentLoaded事件调用前执行
3、async
- async的设置,会使得script脚本异步的加载并在允许的情况下执行
- async的执行,并不会按着script在页面中的顺序来执行,而是谁先加载完谁执行
4、总结
async和defer都可以使得script不阻塞DOM的渲染。在文档解析的过程中,若遇到普通的script脚本,就会停止页面的解析进行下载,只有在解析完前面script元素中的代码之后,才会开始解析后面<script>元素中的代码。
而设置了defer的脚本会在后天进行加载,在页面解析渲染完毕之后,等到所以的defer脚本加载完毕并按顺序执行,执行完毕之后会触发DOMContentLoaded事件。
设置了async的脚本会在加载完后立即执行,当前脚本不必等待其他脚本,也不会阻塞DOM渲染,不能保证脚本按照它们在页面中出现的顺序执行。