Async、defer VS普通加载script区别详解

2021-09-0407:43:18WEB前端开发Comments1,726 views字数 2128阅读模式

用一张图片诠释这几种script加载的特点,应该是这样的:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

Async、defer VS普通加载script区别详解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

结合图片我们可以将三种方式的特点总结如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

  1. <script> : 当HTML解析过程中遇到script标签时,浏览器中断HTML解析,随即下载script文件,完成后立即执行script,执行完成后再继续HTML解析
  2. <script async> : 当HTML解析过程中遇到script标签时,不会中断HTML解析,同时并行下载script文件,下载完成后中断HTML解析执行script,执行完成后再继续HTML解析(script的执行顺序不一定按照script标签的出现顺序,而是取决于script下载完成的顺序)
  3. <script defer> : 当HTML解析过程中遇到script标签时,不会中断HTML解析,同时并行下载script文件,直到HTML解析完成再执行script(script的执行顺序与script标签出现顺序一致

我们可以通过一个小项目验证上面的结论。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

index.html:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    console.time('timer');
    console.timeLog('timer', '--- Start parsing HTML');
    document.addEventListener('DOMContentLoaded', function () {
      console.timeLog('timer', '--- Document loaded');
    });
  </script>
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <!-- 此处省略500行重复元素 -->
  <script>console.timeLog('timer', '--- Start loading 1.js')</script>
  <script src='./1.js'></script>
  <script>console.timeLog('timer', '--- Start loading 2.js')</script>
  <script src='./2.js'></script>
  <script>console.timeLog('timer', '--- Start loading 3.js')</script>
  <script src='./3.js'></script>
  <!-- 此处省略1500行重复元素 -->
   <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <script>
    console.timeLog('timer', '--- End parsing HTML')
  </script>
</body>

</html>

1.js:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

const text1 = `
  // 超长文本
`

text1.split(' ');
console.timeLog('timer', '--- 1.js excuted');

2.js:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

const text2 = `
  // 超长文本
`

text2.split(' ');
console.timeLog('timer', '--- 2.js excuted');

1.js:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

const text3 = `
  // 超长文本
`

text3.split(' ');
console.timeLog('timer', '--- 3.js excuted');

我们分别使用普通、async和defer的方式加载1.js、2.js、3.js,观察控制台的打印结果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

普通:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

Async、defer VS普通加载script区别详解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

结论:script出现会中断HTML加载,且script会顺序的加载、执行,所有script执行完成后再解析HTML。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

Async:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

Async、defer VS普通加载script区别详解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

结论:HTML解析和script下载同步进行,script执行会中断HTML解析;script执行顺序和tag出现顺序不一定相同;script可能会在document loaded之后执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

Defer:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

Async、defer VS普通加载script区别详解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

结论:HTML解析和script下载同步进行;script会在HTML解析完成后document loaded之前执行,且执行顺序和tag出现顺序一致。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

由以上实验可知:如果使用普通方式时通常建议将script放到<body>的最后,以免阻塞HTML解析影响网页打开速度。而defer相对于async更具优势,不会阻塞HTML解析且script的执行顺序可以预测,有一些需要预先下载执行的script可以使用defer的方式在<head>中引用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22513.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/22513.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定