在前端开发中，我们经常需要使用 JavaScript 来实现各种交互和动态效果。但是当我们的网页包含大量 JavaScript 代码时，加载速度就会变得缓慢。为了解决这个问题，我们可以使用异步加载或动态加载技术来提高页面性能。
异步加载 vs 动态加载
在介绍动态加载之前，我们先来了解一下异步加载。异步加载是指在浏览器渲染页面的过程中，通过 <script> 标签的 async 或 defer 属性来告诉浏览器该脚本文件是可以异步加载的，不会阻塞页面的渲染。但是，当我们需要保证加载顺序或依赖关系时，异步加载就不能满足需求了。
相比之下，动态加载则允许我们在页面渲染完成后再加载 JavaScript 文件，从而避免了阻塞页面渲染。同时，我们还可以控制加载的时机、顺序和依赖关系。
动态加载的实现方式
动态加载 JavaScript 的实现方式有多种，以下是常见的几种方式：
1. 动态创建 script 标签
我们可以通过 JavaScript 动态创建 <script> 标签，并将其插入到 DOM 中以实现动态加载。例如：
var script = document.createElement('script');
script.src = 'xxx.js';
document.body.appendChild(script);这种方式的优点是简单易用，适用于加载单个文件。但是，如果需要加载多个文件并且需要保证加载顺序，就需要进行一些额外的处理。
2. 使用 XMLHttpRequest 加载 JavaScript
我们也可以使用 XMLHttpRequest 对象来动态加载 JavaScript 文件。例如：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'xxx.js');
xhr.onload = function() {
if (xhr.status === 200) {
eval(xhr.responseText);
}
};
xhr.send();这种方式的优点是可以在加载完成后立即执行脚本，而不需要等待整个页面的渲染完成。但是，需要注意的是，由于浏览器的安全策略限制，通过 AJAX 加载的脚本文件无法访问父窗口中的 DOM。
3. 使用 AMD 或 CommonJS 模块规范
AMD 和 CommonJS 是两种流行的 JavaScript 模块规范，它们都提供了动态加载模块的方法。例如，在 RequireJS 中，我们可以使用 require 函数来异步加载模块：
require(['xxx'], function(xxx) {
// ...
});这种方式的优点是支持模块化开发，并且可以很好地管理依赖关系。但是，需要使用特定的模块加载器库，而且对代码结构有一定的要求。
动态加载的注意事项
在使用动态加载技术时，需要注意以下几点：
- 加载顺序：如果我们需要保证多个文件的加载顺序，就需要对文件进行排序或者使用专门的库来管理依赖关系。
- 兼容性：不同浏览器对于动态加载的支持程度不同，需要进行兼容性测试。
- 安全性：动态加载可能会导致 XSS 攻击等安全问题，需要谨慎处理。
示例代码
最后，我们给出一个使用 Promise 和 async/await 实现动态加载多个 JavaScript 文件并保证加载顺序的示例代码：
-- -------------------- ---- -------
-------- --------------- -
------ --- ------------------------- ------- -
--- ------ - ---------------------------------
---------- - ----
------------- - --------
-------------- - -------
----------------------------------
---
-
----- -------- -----------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------