【深入理解 script 标签的 async,defer 属性(同步加载,异步加载,延迟执行)】

程序员文章站 2022-04-29 12:56:50

...

async,defer 属性同步加载,异步加载,延迟执行

1. 异步加载和延迟执行存在的意义 : 避免影响页面渲染/显示
2. 同步加载和执行 (影响页面解析/渲染/显示)
3. async 属性: 异步加载 (不是异步执行,搭配 src 属性,仅限外部脚本)
4. defer 属性: 延迟执行 (不是延迟加载,加载是并行的,搭配 src 属性,仅限外部脚本 )
5. 同步加载,异步加载,延迟执行的联系和区别
结束语

1. 异步加载和延迟执行存在的意义 : 避免影响页面渲染/显示

浏览器解析(渲染/显示)的阻塞问题
- 加载和解析顺序: 浏览器在解析 HTML 页面代码时, 是 从上到下依次加载, 解析、渲染
- 阻塞 1: 外部脚本 js 文件的加载和执行, 影响页面渲染(显示).
  - 如果 , 在<head>中 ,用<scrip> 引用了一个外部脚本 js 文件
    - <script src="home.js" type="text/javascript"></script>
  - 而且这个文件很大或者有问题，需要 2 秒的加载和执行时间，那么在这个时间中, 浏览器会停止渲染页面,页面就会是 白屏显示，什么内容都没有），2 秒后脚本加载和执行完成才会继续渲染页面 ,页面才显示.
  - 用户体验差: 这个时候用户体验就很不好,因为有几秒什么也看不见,急脾气的用户,可能会直接关闭页面.
  - 这种影响页面解析(渲染,显示)的行为, 就是阻塞。
- 阻塞 2: 外部 css 文件的加载和执行, 影响页面渲染(显示).
  - CSS 文件也一样，因为 CSS 文件会对DOM的样式，布局，色彩等外观产生影响，所以浏览器会等 CSS 文件下载并执行完成后继续。
    为了页面的性能，要避免阻塞。

2. 同步加载和执行 (影响页面解析/渲染/显示)

默认同步加载: 脚本 <script>标签默认用的都是同步加载。
- <script src="imagescript.js"></script>
同步模式
- 又称阻塞模式，会阻止浏览器的后续处理，停止了 后续的文件的解析
  - ① 立即加载: 如果async,defer 两个属性都不存在，则立即加载(获取) 脚本
  - ② 立即执行: 加载完成后, 立刻执行脚本, 直到脚本加载和执行完成,才能进行页面的解析/渲染/显示。
  - 这个时候,加载和执行脚本, 都会阻塞(打断)解析，多多少少都会影响页面的显示速度.
使用同步加载和执行的时机:
- 浏览器需要采用同步模式，一般因为加载的 js文件中有对 dom 的操作，如, 重定向等默认行为，所以同步才是最安全的。
把<script>标签放在 </body>前的意义:
- 一般来说, <script> 都是放在 <head>中,来引用外部脚本 js 文件的
- 也会把要加载的 js文件 <script> 放到 </body>之前，使得js 文件可 在页面最后加载，尽量减少阻塞页面的渲染/显示。这样可以先让页面显示出来.
同步加载的加载和执行过程示例图
- ① 加载:不是并行的,会打断页面解析
- ② 执行: 不是并行的, 会打断页面解析
  - 加载和执行,都会打断页面解析,影响页面显示.

示例1: 下图, 是在淘宝网的代码中截的图,可以看到把很多<script>标签 ,放在了文档底部的位置,在文档主体结束标签 </body> 之前.

【深入理解 script 标签的 async,defer 属性(同步加载,异步加载,延迟执行)】

示例2: 下图,是在 MDN 网站的截图, 也有 <script>标签,被放在了文档的底部,</body> 标签之前.

【深入理解 script 标签的 async,defer 属性(同步加载,异步加载,延迟执行)】

3. async 属性: 异步加载 (不是异步执行,搭配 src 属性,仅限外部脚本)

脚本的异步加载:
- ① 并行加载(获取): 对于脚本，如果有async属性，那么脚本将在页面解析过程中被并行获取
- ② 加载/下载完立即执行: 并在脚本文件加载(下载)完成可用时(可能在页面解析完成之前) 进行执行。
- ③ 执行会打断解析: 加载不打断页面解析,但执行会打断页面解析,记住,只是异步加载,执行并不是异步的,还要回到原来的流水线上.
- 注意: 搭配 src 事项,异步加载, 仅限外部脚本
模块脚本(module scripts)的异步加载
- ① 并行获取对于模块脚本，如果有异步加载async属性，那么将在解析过程中 并行地获取 模块脚本及其所有依赖项
- ② 下载完成立即执行: 并且一旦模块脚本可用(可能在页面解析完成之前)，就会对其进行执行。
  - 否则，模块脚本及其依赖项将在解析过程中并行获取，并在页面完成解析后进行执行。
- 注: 延迟执行 defer属性对模块脚本没有影响。
异步加载async的加载和执行过程示例图
- ① 加载:是并行的,不影响页面解析
- ② 执行: 不是并行的, 会打断页面解析
  - 加载不打断页面解析,执行会打断页面解析.

示例1: 在MDN网站的文档头部标签<head>中,也出现了异步加载的 js文件 <script>

4. defer 属性: 延迟执行 (不是延迟加载,加载是并行的,搭配 src 属性,仅限外部脚本 )

延迟执行: defer
- ① 并行获取: 如果异步加载 async属性不存在，而延迟执行defer属性存在，那么脚本将被并行获取
  - 加载/获取/下载,都是一个意思
- ② 延迟执行: 并在页面完成解析后进行执行。
- 注意: 搭配 src 属性,延迟执行, 仅限外部脚本
延迟执行 defer的加载和执行过程示例图
- ① 加载:是并行的,不影响页面解析
- ② 执行: 不是并行的, 但不会打断页面解析,因为是在页面解析完成后才执行的.
- 加载和执行,都不会打断页面解析.
延迟执行的使用时机
- 延迟执行：
  - 有些 js代码并不是页面初始化的时候就立刻需要的，而在稍后的某些情况才需要的。
  - 那么一开始并不执行这些暂时不用的 js，而是在需要的时候或稍后再通过js 的控制来执行,也不会影响。
根据 js 的需要时机进行分类:
- 将 js 切分成许多模块，页面初始化时只执行需要立即执行的 js 可以使用同步加载 ,可以放在head的script标签中
- 其它 js ,可以延迟执行。
  - 比如, 页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。
  - 就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片.
延迟加载: 除了延迟执行,其实也可以设置延迟加载,就是把代码片段,写在文档的底部,</body>的前面,这样文档按顺序加载和解析的时候,到最后才会加载这些代码片段.
注意: defer只是延迟执行,并不是延迟加载,在页面解析的同时,就并行加载了,也不会影响页面解析.
冲突事项:
- 用了defer不要使用 document.write() 方法;(为什么 ?因为涉及到页面显示吗?延迟执行了,会影响页面显示?)

示例1: MDN 网站中,在文档的底部,</body>之前,就添加了延迟执行的脚本文件.

【深入理解 script 标签的 async,defer 属性(同步加载,异步加载,延迟执行)】

示例2: 延迟加载 (无关defer)
- 如果页面初始的渲染, 并不依赖于 js 或者 css, 可以用延迟加载
- 即,最后加载js, css代码，把引用外部文件的代码写在最后 </body>前面。
- 比如,一些按钮的点击事件，轮播图动画的脚本也可以放在最后。

<html>
   <head>
   </head>
   
   <body>

     <!--延迟加载  -->
     <script type="text/javascript" src="a.js"></script>
     <link href="a.css" rel="stylesheet" />
  </body>
</html>

5. 同步加载,异步加载,延迟执行的联系和区别

⑴ 同步加载,异步加载async,延迟执行 defer的 加载和执行示例图
- 绿色: 页面解析(渲染/显示)
- 蓝色: 脚本加载(下载/获取)
- 红色: 脚本执行
① 同步加载的加载和执行过程
- 加载:不是并行的,会打断页面解析
- 执行: 不是并行的, 会打断页面解析
  - 加载和执行,★ 都会打断页面解析
② 异步加载async的加载和执行过程
- 加载:是并行的,不影响页面解析
- 执行: 不是并行的, 会打断页面解析
  - 加载不打断页面解析,★执行会打断页面解析.
③ 延迟执行 defer的加载和执行过程
- 加载:是并行的,不影响页面解析
- 执行: 不是并行的, 但不会打断页面解析,因为是在页面解析完成后才执行的.
- 加载和执行,★都不会打断页面解析.

⑵ 同时指定 async,defer 属性: (行为回退,避免阻塞行为)
- 行为回退: 即使指定了异步加载async属性，也可以指定 defer属性
  - 回退到延迟执行: 以使仅支持延迟执行defer(而不支持异步加载async)的遗留Web浏览器退回到延迟执行defer行为，而不是默认的阻塞行为。
⑶ 多个脚本的执行顺序:
- ① 同步加载
  - 按顺序: 放置在<head>内
    - 会阻塞<body>的渲染, 会出现白屏，按照顺序立即执行几个脚本文件
  - ★ 按顺序: 放置在<body>底部
    - 等<body>中的内容渲染完毕后, 再加载, 顺序执行js
      - <script>写在<body>底部，没有兼容性问题，没有白屏问题，没有执行顺序问题.
    - 是比较推荐的写法,很多网站都在使用,比如淘宝网, MDN 网站等.
- ② 异步加载: 放置在<head>头部并使用async
  - 先加载完毕的先执行: 异步并行加载资源，且加载完JS资源立即执行，并不会按 js 文件的顺序，谁快谁先上
- ③ 延迟执行: 放置在<head>头部并使用defer
  - 按顺序执行: 异步并行加载资源，在 DOM 渲染后,即,页面解析完毕后, 再按顺序执行 js
  - HTML5 规范要求脚本按照它们出现的先后顺序执行，因此第一个defer 延迟脚本, 会先于第二个延迟脚本执行，而这两个脚本会先于 DOMContentLoaded 事件执行。
  - 在实际应用当中，延迟执行的脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad 时间触发前执行，因此最好只包含一个延迟脚本。
- ④ ★ 异步加载和延迟执行: 放置在<head>头部, 并同时使用async和defer
  - 表现和async一致
  - 不支持async的,支持defer的,会表现得和defer一样
    - 异步加载比延迟执行的优先级高些.
  - 这种方法,也是比较推荐的,同时兼容支持async和defer 两个属性的浏览器
⑷ 仅限外部脚本: 脚本<script>标签的异步加载 async和延迟执行defer,都必须搭配 src 属性,仅限外部脚本使用.