【基础知识】【转】彻底搞懂 async & defer

前端开发 作者: 2024-08-20 18:10:01
普通 script 先来看一个普通的 script 标签。 <script src="a.js"></script> 浏览器会做如下处理 停止解析 docu
<script src="a.js"></script>
  • 停止解析 document.
  • 请求 a.js
  • 执行 a.js 中的脚本
  • 继续解析 document
="d.js" defer>
="e.js">
  • 不阻止解析 document, 并行下载 d.js,e.js
  • 即使下载完 d.js,e.js 仍继续解析 document
  • 按照页面中出现的顺序,在其他同步脚本执行后,DOMContentLoaded 事件前 依次执行 d.js,e.js。
="b.js" async="c.js">
  • 不阻止解析 document,并行下载 b.js,c.js
  • 当脚本下载完后立即执行。(两者执行顺序不确定,执行阶段不确定,可能在 DOMContentLoaded 事件前或者后 )
  • 如果 script 无 src 属性,则 defer,async 会被忽略
  • 动态添加的 script 标签隐含 async 属性
  • 两者都不会阻止 document 的解析
  • defer 会在 DOMContentLoaded 前依次执行 (可以利用这两点哦!)
  • async 则是下载完立即执行,不一定是在 DOMContentLoaded 前
  • async 因为顺序无关,所以很适合像 Google Analytics 这样的无依赖脚本

Reference

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65650.html