js原理：async 和 defer 属性的区别
Posted 掘金安东尼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>标签，还有其他方式可以加载脚本，比如：
let script = document.createElement(script);
script.src = gibberish.js;
document.head.appendChild(script);
复制代码
以上是关于js原理：async 和 defer 属性的区别的主要内容，如果未能解决你的问题，请参考以下文章