script标签中的async和defer
发布时间 2024-06-05 20:39:43 #JavaScript

属性解析

  HTML5 引入了 async 和 defer 属性来控制脚本的加载和执行顺序。

1
2
3
4
5
6
7
8
<html>
  <head></head>
  <body>
    <!-- div content -->
    <script src="script.js" async></script>
    <!-- div content -->
  </body>
</html>

normal

  默认加载方式，会立即加载并执行脚本，阻塞页面的渲染。

缺点：

会阻塞页面的渲染

如果脚本中涉及到了未渲染完成的 DOM 元素操作，可能会报错。

async

  异步加载脚本，不阻塞页面的渲染，可以并行加载多个脚本。

优点：

可以并行加载多个脚本，提高页面的加载速度。

缺点：

如果脚本中涉及到了未渲染完成的 DOM 元素操作，可能会报错。

defer

  延迟加载脚本，在页面渲染完成后再加载脚本，可以保证脚本的执行顺序。

优点：

可以保证脚本中操作的 DOM 元素一定是渲染完成的，不会报错。

缺点：

不能并行加载多个脚本，只能顺序加载，可能会影响页面的加载速度。

结束语

  通过上面介绍的属性，我们可以将 js 脚步文件统一放在 head 标签中，并设置相应的 async 或 defe 属性，来控制脚本的加载和执行顺序，从而提高页面的加载速度（性能优化）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
  <head>
    <!-- no domo operation -->
    <script src="script.js" async></script>
    <!-- has dom operation -->
    <script src="script.js" defer></script>
  </head>
  <body>
    <!-- div content -->

    <!-- no certainty about the execution order of the scripts -->
    <script src="script.js" defer></script>
  </body>
</html>
上一页
2024-06-11 00:39:23
下一页