js -- script标签中defer和async属性的区别

使用
没有defer或async属性，浏览器读到就开始加载和执行脚本，此举会阻塞后续文档的加载；
2.
有了async属性，文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；
3.
有了defer属性，加载文档和js脚本的加载是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。

蓝色：js脚本网络加载时间；红色：js脚本执行时间；绿色：html解析时间

总结：

1.defer和async在网络加载过程都是异步执行的；
2.defer和async区别：
(1) defer 属性规定是否延迟执行脚本（直到页面加载完成再执行）。 async 属性规定脚本一
旦加载完成就异步执行。
(2) defer 并行加载 JavaScript 文件， 会按照页面上 script 标签的顺序执行。 async 行加载 JavaScript 文件，下载完成立即执行，不会按照页面上 script 标签的顺序执行。