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

Question

如题所述

Answer 1

　script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：

　　1.<script src="example.js"></script>

　　　没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；

　　2.<script async src="example.js"></script>

　　 有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；

　　3.<script defer src="example.js"></script>

有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。