script标签的使用分三种情况
1.没有defer或async属性
浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前,不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载。
2.async属性
如:<script async src="index.js"></script>
表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行。
3.defer属性
如:<script defer src="index.js"></script>
加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之前。
1.defer和async在网络加载过程是一致的,都是异步执行的;
2.两者的区别在于脚本加载完成之后何时执行,可以看出defer更符合大多数场景对应用脚本加载和执行的要求;
3.如果存在多个有defer属性的脚本,那么它们是按照加载顺序执行脚本的;而对于async,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要加载完成就立刻执行,它对于应用脚本用处不大,因为它完全不考虑依赖。
结论
async比较适合第三方的脚本,defer适合与dom有关联的脚本,双方都只适于外部脚本。
参考文章:https://www.jianshu.com/p/69344b8541c6