理解JS中script标签defer和async属性

1.<script src="example.js"></script>
基本用法,无async或defer属性,浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前,不等待后续加载的文档元素,读到就开始加载和执行,这样会阻塞后续文档的加载;

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

加上async属性,表示后续文档的加载+渲染与js脚本的加载+执行是并行进行的,即异步执行;

兼容性:
async兼容性

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

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

兼容性:
defer兼容性
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。