[译] Async 与 Defer
文章目录
- 说明
- </h4><p>让我们从定义没有任何属性的<script>开始。HTML 文件会被解析直到命中脚本文件,那个时候,HTML 将会停止解析并且将会发送一个请求去获取这个文件(如果他是外链),在 HTML 继续解析之前,脚本将会被执行。<br><img src="http://qiniu.xienanbo.com/img/20190415203431.png" alt=""></p> <h4 id="-1"><a href="#-1" class="headerlink" title=""></a><script async></h4><p><code>async</code> 在 HTML 解析的同时下载文件,而且当文件完成下载之后,将会暂停 HTML 解析来执行文件。</p> <p><img src="http://qiniu.xienanbo.com/img/20190416053944.png" alt=""></p> <h4 id="-2"><a href="#-2" class="headerlink" title=""></a><script defer></h4><p><code>defer</code> 在 HTML 解析的同时下载文件, 并且在 HTML 解析完成后才执行它,<code>defer</code> 的多脚本也保证了他们以它们出现在文档上的顺序被顺序执行。</p> <p><img src="http://qiniu.xienanbo.com/img/20190416054041.png" alt=""></p> <h4 id="我什么时候应该用什么?"><a href="#我什么时候应该用什么?" class="headerlink" title="我什么时候应该用什么?"></a>我什么时候应该用什么?</h4><p>通常,您希望尽可能使用 <code>async</code>, 然后是 <code>defer</code>, 再是没有这些属性的脚本。这里有一些常用的规则去遵守。</p> <ul> <li>如果脚本是模块,并且没有依赖其他任何脚本时用 <code>async</code></li> <li>如果脚本依赖或者被其他脚本依赖时用 <code>defer</code></li> <li>如果脚本文件很小,并且被一个 <code>async</code> 脚本依赖时用没有异步属性的内联脚本,并且放在 async 脚本上方。</li> </ul> <h4 id="支持"><a href="#支持" class="headerlink" title="支持"></a>支持</h4><p>IE9 及以下在实现 defer 的时候有一些特别严重的 bug,以至于脚本的执行顺序无法被保证,如果你需要支持 IE9 及以下,建议不要全部用 defer,并且对你的脚本不添加任何属性,如果执行顺序很重要。<a href="https://github.com/h5bp/lazyweb-requests/issues/42">阅读属性说明文件</a></p> <h4 id="译者总结"><a href="#译者总结" class="headerlink" title="译者总结"></a>译者总结</h4><ul> <li>defer 和 async 下载都是异步的</li> <li>defer 在 文件解析完成时(DOMContentLoaded 之前)执行,async 在下载完成后执行</li> <li>多个 defer 的执行顺序和他们出现在页面上的顺序一致</li> <li>async 的执行顺序无法保证。</li> </ul>