一起理解script标签中的async和defer属性
前端当然要从 HTML 开端，我们来聊聊在 script 标签中加上 async/defer 时的功效及差别。
都清楚的事理
我们都知道，阅读器解析 HTML 是一行一行依照次序向后读取的，在传统的写法中，当阅读器读到 <script> 时，便会暂停解析 DOM，同时马上开端下载 <script> 中定义的资源，并鄙人载完成后立即施行。由于这样的特性，大概会造成 DOM 树在还没有完全解析时就开端施行 JavaScript，需要操纵 DOM 的程序大概因此没法准确施行，从而造成很多问题；或是由于 <script> 中的资源下载、施行时间历程，会员会卡在白画面，并会发生觉得网站太慢不好用之类的体验。
而解决办法也很简便，我们需要把 <script> 标签的位置都放到 <body> 的最后一行来幸免 DOM 树解析不完全的问题，但是在复杂的网站中， HTML、JavaScript 的个头都很大，需要比及整个 DOM 树都载入完成才开端下载 <script> 内的资源，从网站读取完成到可操纵，会发生明显的延迟感。
那这种问题该如何解决呢？
从HTML4 开端，<script> 多了 defer 属性，而 HTML5 则多了 async，两者都是用来帮忙开发者操纵 <script> 内资源的载入及施行次序，乃至幸免 DOM 的解析被资源下载卡住的。
defer
defer 的意思是延迟（Deferred），在 HTML4.01 标准 中规定：
设定后，这个布尔属性会向会员代理提醒该足本将不会生成任何网页内容（例如，JavaScript中不会生成 “document.write”），因此，会员代理可以连续解析和渲染。
也就是说，在加上 defer 属性后，阅读器会连续解析、渲染画面，而不会由于需要载入<script> 内的资源而卡住；实际施行时，会在 DOMContentLoaded 施行此前，由上到下的遵照摆放次序触发。
听起来很利便对吧？但要提示各位，虽然 W3C 标准上说 defer 属性会是一个布尔值，但 IE9 之前的版本是自定义的，即便写成 <script defer="false"> 依然会有 defer 的结果，使用时要特殊留意。
又是你这个老不死的 IE……
async
async 的意思是异步（Asynchronous），在 HTML5 标准 中规定：
…假如存在 async 属性，则足本将会在可用时马上异步施行 …
在 <script> 标签中加上 async 属性后，与defer 的雷同点是也会在后台施行下载，但不一样的是当下载完成会立刻暂停 DOM 解析（假如还没有解析完成的话），并开端施行 JavaScript。由于下载完成后会马上施行，加上 async 属性后，就没法包管施行次序了。
这个属性在标准中，同时也支撑通过 JavaScript 动态插入 <script> 的状况。例如：
const script = document.createElement('script')
script.src = "/something/awesome.js"
document.body.append(script)动态创立的 <script>，默许就是异步载入；但可以通过设定属性将它关闭：
script.async = false
type=”module”
在主流的现代阅读器中，<script> 的属性可以加上 type="module"。这时阅读器会认为这个文件是一个JavaScript 模块，其中的解析规则、施行环境会略有不一样；这时 <script> 的默许行动会像是 defer 一样，在后台下载，并且等候 DOM 解析、渲染完成之后才会施行，所以 defer 属性没法在 type="module" 的状况下发生作用。但一样可以通过 async 属性使它鄙人载完成后即刻施行。
用途
此刻你应当清楚这两个属性的特点了，那么该怎样准确地使用呢？
defer 由于后台载入、不打断渲染及确保施行次序的特点，根本上在没非凡需求的状况下，在 <script> 中设定一下就行了；当然 <script> 本身的摆放次序还是要轻微留心一下。
async 比力特殊，由于鄙人载后会立即施行，且不包管施行次序，一样常见的利用是设定在完全独立的小小模块中，例如背景Logo、页面广告等，在幸免造成使用者体验变差的同时，尽量早的发生结果。
此刻前端开发大都通过 Webpack 等打包工具来辅助处置，很少有本人设定这些属性的时机；开发者可以通过 script-ext-html-webpack-plugin 等插件的帮忙，将切分好的 Chunk 设定一般需要的 <script> 属性。
总结
async 及 defer 是 <script> 专属的属性，关于网页中的其他资源，可以通过 <link> 的preload、prefetch 属性，来帮我们延迟加载 将来才需要用到的资源。
虽然 <script> 的async、defer 这些属性的设定大都已经包括在现代框架的打包流程中了，但只要扎实的认识这些网页最根基的标准，才能清楚本人写出来的代码最后会发生什么结果。
