详解defer和async 属性在script标签中分别有什么作用

• 首先，浏览器在解析html的过程中，遇到了script元素是不会继续构建dom树，⾸先下载JavaScript代码，并且执⾏JavaScript的脚本，才会继续解析dom树，构建dom树
• 为什么要这样做 ：js的作用之一就是操作dom，并且可以修改dom，如果等到dom树完全构建完成的话，会导致严重的回流和重绘，大大浪费性能。
• 但是在现代框架下，js的脚本往往都很重，如果任由浏览器下载执行js可能需要很多时间，dom树的构建长时间被阻塞，导致用户的体验感很差，很浪费事件和性能
• 所以script标签为我们提供defer 和async 属性
• defer属性就是告诉浏览器，不用等待脚本下载，继续解析html，构建dom树。
• 如果脚本提前下载好了，也会等到dom树构建完成，在domconteeloaded事件之前先执行defer代码，保证了代码的可行性。
• 所以defer是可以提高性能的。
• 而async是让一个脚本的下载和执行是独立的，浏览器也不会因脚本的下载而阻塞，但是async的脚本会在下载好后立刻执行（执行时会阻塞DOM Tree的构建）

总结 ：

script标签的defer和async属性都是用来控制外部脚本的加载和执行方式，它们对于改善页面的加载速度是非常有效的。

这两个标签有什么不同呢，

• defer标签是也是不会阻塞dom树的构建，同时下载js脚本，但是即使js脚本下载完了，也会等到domcontentloaded事件之前在执行脚本代码，并且defer的js脚本执行也是有按顺序的。
• async 也不会阻塞dom树的构建，同时也下载js脚本，但是js脚本下载完后就会立刻执行阻塞dom树的构建（如果dom还没构建完成）。所以async属性的使用也更加适合在脚本是在不依赖任何dom元素的时候使用（例如一些数据分析工具）

欢迎来 Caa · 语雀，每日更新前端知识ing