使用<script>标签得三种情况:
1.<script src="example.js"></script>
没有defer或async属性,浏览器读到就开始加载和执行脚本,此举会阻塞后续文档的加载;
2.<script async src="example.js"></script>
有了async属性,文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行;
3.<script defer src="example.js"></script>
有了defer属性,加载文档和js脚本的加载是并行进行的(异步),js脚本的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之前。
总结:
1.defer和async在网络加载过程都是异步执行的;
2.defer和async区别:
(1) defer 属性规定是否延迟执行脚本(直到页面加载完成再执行)。 async 属性规定脚本一
旦加载完成就异步执行。
(2) defer 并行加载 JavaScript 文件, 会按照页面上 script 标签的顺序执行。 async 行加载 JavaScript 文件,下载完成立即执行,不会按照页面上 script 标签的顺序执行。