当浏览器碰到 ​​script​​ 脚本的时候：

  1. ​​<script src="script.js"></script>​​

    没有 ​​defer​​​ 或 ​​async​​​，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 ​​script​​ 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

  2. ​​<script async src="script.js"></script>​​

    有 ​​async​​​，加载和渲染后续文档元素的过程将和 ​​script.js​​ 的加载与执行并行进行（异步）。

  3. ​​<script defer src="myscript.js"></script>​​

    有 ​​defer​​​，加载后续文档元素的过程将和 ​​script.js​​​ 的加载并行进行（异步），但是 ​​script.js​​​ 的执行要在所有元素解析完成之后，​​DOMContentLoaded​​ 事件触发之前完成。

script的defer和async区别_react



  • Async是在外部JS加载完成后，浏览器空闲时，Load事件触发前执行；而Defer是在JS加载完成后，整个文档解析完成后执行。
  • Defer更像是将<script>标签放在</body>之后的效果，但是它由于是异步加载JS文件，所以可以节省时间。