同步、异步加载 JavaScript

在HTML中加载JS文件都是同步加载的，这是为了避免因页面还没有渲染完成，JS文件内可能存在对DOM操作而产生错误。
相关文章：时间线、解析与渲染

script标签支持两个属性用于异步加载：

1. defer：异步加载JS文件，但是不会立即执行，而是在页面渲染完成后再执行
2. async：该属性是W3C的标准，是HTML5的属性，它和defer一样会异步加载JS文件，但是加载完成后立即执行 ```html

:::danger
⚠️ 使用异步加载`JS`文件需要注意以下几点：
1. 不对文档`DOM`直接操作的可以用异步加载
2. 工具类的库，完全不直接操作`DOM`的`JS`文件可以用异步加载（指的是调用的时候才生效）
3. 如果浏览器同时兼容`defer`和`async`且`script`上同时存在这两个属性，那么浏览器只会认`async`属性
:::
除了以上两种方式，我们还可以手动按需加载`JS`文件：
```javascript
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "./utils.js"; // 设置 src 后会立马加载文件，但是不会执行
document.body.appendChild(script); // 这个时候才会执行 js 文件

但是这样的方式会阻塞window.onload事件的触发，因为改事件是在所有资源加载完成后才会触发，这样的方式仍然属于加载。
那么我们可以在window.onload事件触发后再异步加载JS文件：

(function () {
  function asyncLoad() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "./utils.js"; // 设置src后会立马加载文件，但是不会执行
    document.body.appendChild(s);
  }
  window.onload = function () {
    asyncLoad();
  };
})();