1. script元素和页面解析的关系
-
浏览器在解析HTML的过程中，遇到了script元素是不能继续构建DOM树的；
首先下载JavaScript代码，并且执行JavaScript的脚本；
到JavaScript脚本执行结束后，才会继续解析HTML，构建DOM树；
-
因为JavaScript的作用之一就是操作DOM，并且可以修改DOM；
如果我们等到DOM树构建完成并且渲染再执行JavaScript，会造成严重的回流和重绘，影响页面的性能；
所以会在遇到script元素时，优先下载和执行JavaScript代码，再继续构建DOM树；
2. defer属性
defer 属性告诉浏览器不要等待脚本下载，而继续解析HTML，构建DOM Tree
是不会阻塞DOM Tree的构建过程；
如果脚本提前下载好了，它会等待DOM Tree构建完成，在DOMContentLoaded事件之前先执行defer中的代码；
多个带defer的脚本是可以保持正确的顺序执行的。
defer可以提高页面的性能，并且推荐放到head元素中；
注意：defer仅适用于外部脚本，对于script默认内容会被忽略。
3. async属性
- 浏览器不会因 async 脚本而阻塞
- async脚本不能保证顺序，它是独立下载、独立运行，不会等待其他脚本；
4. 总结
1. defer通常用于需要在文档解析后操作DOM的JavaScript代码，并且对多个script文件有顺序要求的；
2. async通常用于独立的脚本，对其他脚本，甚至DOM没有依赖的；
1
