js原理（async 和 defer 属性的区别）

【js原理（async 和 defer 属性的区别）】书史足自悦，安用勤与劬。这篇文章主要讲述js原理：async 和 defer 属性的区别相关的知识，希望能为你提供帮助。
javascript 高级程序设计第 4 版（后简称高程4），相较于第 3 版，增加了 ES6 至 ES10 的全新内容，删除了旧版过时的内容，并在原有基础上充实了更加翔实的内容。
中文译版于 2020 年发售，妥妥的“新鲜出炉”，你要是问本瓜：当今学 JavaScript 哪家强，我只能说：红宝书第 4 版最在行。
于是乎，借着更文契机，本瓜将开启一个小系列，带你重看一遍高级程序设计4（先前只是跳着跳着看），将抽取精华，用最简单的话解释核心点、尽量把握全局、快速过一遍的同时，记录与工友们分享~~

文章图片

正文
第二章，讲的是 html 中的 < script> 标签。
这里最重要的，也是面试中常考的点是：< script> 配置 async 和 defer 属性的区别。

async：表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。
defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。

换句话说：配置了 async 和 defert ，加载脚本都不会阻塞页面的渲染，但在执行顺序上有差异；

async	加载优先顺序。脚本在文档中的顺序不重要 —— 先加载完成的先执行	不相关。可能在文档加载完成前加载并执行完毕。如果脚本很小或者来自于缓存，同时文档足够长，就会发生这种情况。
defer	文档顺序（它们在文档中的顺序）	在文档加载和解析完成之后（如果需要，则会等待），即在 DOMContentLoaded 之前执行。

在实际开发中，??defer?? 用于需要整个 DOM 的脚本，或脚本的相对执行顺序很重要的时候。
??async?? 用于独立脚本，例如计数器或广告，这些脚本的相对执行顺序无关紧要。
除了解释async 和 defert，还介绍了其它几个属性，不作展开；
接着呢，说道 < script> 标签应该放在 < body> 标签中，而不是 < head> 标签中；
除了< script> 标签，还有其他方式可以加载脚本，比如：