异步加载JS的方式有哪些？

在Web开发中，异步加载JavaScript是一种提高页面加载性能的常用技术，因为它允许网页在加载和解析JavaScript文件的同时，继续加载页面上的其他内容。以下是几种异步加载JavaScript的方法：

1. 使用 async 属性

HTML5提供了async属性，可以直接在<script>标签中使用。当浏览器遇到带有async属性的<script>标签时，它会继续加载网页的其他部分，同时异步加载脚本。一旦脚本下载完毕，它会被执行，但不会阻塞DOM的解析。

html
<script async src="path/to/your-script.js"></script>

例子：假设你有一个用于分析用户行为的脚本，这个脚本不需要在页面加载时立即执行，你就可以使用async属性来加载它。

2. 使用 defer 属性

与async类似，defer属性也可以在<script>标签中使用，以指示浏览器异步加载脚本。不同的是，使用defer属性的脚本会在整个文档解析完成后、DOMContentLoaded事件触发前执行。

html
<script defer src="path/to/your-script.js"></script>

例子：如果你的脚本需要访问DOM，但又不是紧急的，比如一个幻灯片效果，使用defer属性可以确保DOM加载完毕后再执行脚本。

3. 动态创建 <script> 元素

可以使用JavaScript动态创建一个<script>元素，并将其插入DOM中来异步加载脚本。

javascript
var script = document.createElement('script');
script.src = "path/to/your-script.js";
script.async = true; // 可以设置为async或省略此行来异步加载
document.head.appendChild(script);

例子：在使用单页应用框架（如Angular或React）时，可能需要根据路由动态加载模块，此时可以动态创建<script>元素来加载需要的JavaScript文件。

4. 使用 XMLHttpRequest 或 fetch API

可以使用XMLHttpRequest或现代的fetch API来异步请求脚本内容，并在请求完成后使用eval()或者新的Function构造函数来执行代码。

例子（使用fetch API）：

javascript
fetch('path/to/your-script.js')
  .then(response => response.text())
  .then(text => eval(text))
  .catch(error => console.log(error));

需要注意的是，使用eval()或者Function构造函数来执行脚本会有安全风险，因为它们会执行任意的代码。因此，应该只从可信的源加载脚本，并尽量避免使用这些方法。

5. 使用模块加载器

使用模块加载器和打包工具（如Webpack、RequireJS等）可以帮助开发者更加有效地管理和异步加载模块。

例子：在Webpack中，可以使用import()语法来实现代码分割和动态导入模块。

javascript
import(/* webpackChunkName: "my-chunk-name" */ 'path/to/module').then(module => {
  // 使用模块
});

所有这些方法都可以减少页面首次加载时的时间，并且可以提供更好的用户体验。适当选择异步加载技术还能根据实际需求进行优化，例如，对于核心功能优先加载，对于非核心功能可以延后加载或按需加载。