在Web开发中，动态加载JavaScript文件是一种常见的技术，可以实现按需加载资源，提高页面加载速度和性能。本文汇总了动态加载JavaScript文件的几种常见方法，并对每种方法进行了详细介绍。
方法一：直接使用`document.write()`异步加载
`document.write()`方法可以直接将JavaScript代码或外部脚本标签插入到HTML文档中。例如，如果要异步加载一个名为`xx.js`的文件，可以使用以下代码：
```javascript
document.write("<script src='res/extwidget/echarts/xx.js'></script>");
```
然而，这种方法的缺点非常明显。`document.write()`会重写整个文档，可能会覆盖页面上已经加载的内容，导致页面元素的丢失，因此这种方法在实际开发中并不推荐使用。
方法二：动态改变已有`<script>`元素的`src`属性
这种方法利用了JavaScript动态修改DOM的特性。首先在HTML中预留一个空的`<script>`标签，然后通过JavaScript来更改这个标签的`src`属性，从而实现异步加载外部JavaScript文件。
```javascript
<script src='' id="xx"></script>
<script>
document.getElementById('xx').src = "test.js";
</script>
```
这种方法不会引起页面的重绘和重排，因此比`document.write()`要好。但是，它同样具有异步加载的特性，可能会遇到脚本加载顺序的问题。
方法三：动态创建`<script>`元素异步加载
这是一种更为灵活的加载方式。通过`document.createElement()`创建一个新的`<script>`元素，并设置其`src`属性，然后将其添加到页面的`<body>`或`<head>`中。
```javascript
<script>
var body = document.getElementsByTagName('BODY')[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "xx.js";
body.appendChild(script);
</script>
```
此方法同样不会引起页面的重绘和重排，它允许开发者在JavaScript代码中决定何时加载外部脚本。需要注意的是，脚本加载可能会有延迟，因此在脚本加载完成之前执行相关代码可能会导致出错。
方法四：使用`XMLHttpRequest`或`ActiveXObject`异步加载
这种方法涉及到使用Ajax技术来异步加载JavaScript文件。通过`XMLHttpRequest`对象发起请求，并在请求的`onreadystatechange`事件处理函数中，当请求完成时将JavaScript代码或者外部脚本插入到页面中。
```javascript
function loadJs(id, url) {
var xmlHttp = null;
if (window.ActiveXObject) { // IE
// ... 创建ActiveXObject实例
} else if (window.XMLHttpRequest) { // 非IE浏览器
// ... 创建XMLHttpRequest实例
}
// ... 发起异步或同步请求
}
```
这种方法可以较为精细地控制资源加载，比如可以实现条件加载或者按需加载。需要注意的是，同步请求可能会阻塞浏览器的UI线程，影响用户体验。
方法五：使用`XMLHttpRequest`或`ActiveXObject`动态加载（未完整给出）
虽然提供的内容中方法五的具体实现未完全给出，但根据前文所介绍的思路，我们可以推断出该方法的实现与方法四类似，但是可能会有一些变化，比如请求方式的差异或结果处理方式的不同。
以上五种方法都是异步加载JavaScript文件的常见方式。每种方法都有其使用场景和优缺点，开发者需要根据实际的项目需求和环境特点来选择最合适的动态加载策略。在选择使用这些方法时，还需要注意浏览器兼容性、脚本加载顺序、以及脚本加载完成后的依赖问题等因素，这些因素都可能影响到动态加载脚本的最终效果。
