以下是“js怎么动态加载js文件(javascript性能优化篇)”的完整攻略，包括过程中的两个示例说明。

js怎么动态加载js文件(javascript性能优化篇)

在JavaScript中，动态加载JS文件是一种常见的性能化技术。通过动态JS文件，可以减少页面加载时间，提高用户体验。以下是一份关于如何动态加载JS文件的详细教程。

1. 使用document.createElement()方法动态加载JS文件

使用document.createElement()方法可以动态创建一个script元素，并将其添加到页面中。以下是一个示例：

var script = document.createElement('script');
script.src = 'path/to/your/js/file.js';
document.head.appendChild(script);

在上述示例中，我们使用document.createElement()方法创建了一个script元素，并将其src属性设置为要加载的JS文件的路径。然后，我们将该元素添加到页面的head元素中。

2. 使用XMLHttpRequest对象动态加载JS文件

使用XMLHttpRequest对象可以动态加载JS文件，并将其添加到页面中。以下是一个示例：

 xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/your/js/file.js', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.text = xhr.responseText;
    document.head.appendChild(script);
  }
};
xhr.send();

在上述示例中，我们使用XMLHttpRequest对象发送一个GET请求，以获取要加载的JS文件。然后，我们在onreadystatechange事件处理程序中检查请求的状态和响应状态码。如果状态码为200，我们将响应文本添加到一个新的script元素中，并将该元素添加到页面的head元素中。

3. 示例说明

以下是两个使用动态加载JS文件的示例：

示例1：使用document.createElement()方法动态加载JS文件

假设我们有一个JS文件，其路径为/path/to/your/js/file.js。我们可以使用document.createElement()方法动态加载该文件，以便在页面加载时异步加载该文件。以下是一个使用document.createElement()方法动态加载JS文件的示例：

var script = document.createElement('script');
script.src = 'path/to/your/js/file.js';
document.head.appendChild(script);

在上述示例中，我们使用document.createElement()方法创建了一个script元素，并将其src属性设置为要加载的JS文件的路径。然后，我们将该元素添加到页面的head元素中。

示例2：使用XMLHttpRequest对象动态加载JS文件

假设我们有一个JS，其路径为/path/to/your/js/file.js。我们可以使用XMLHttpRequest对象动态加载该文件，以便在页面加载时异步加载该文件。以下是一个使用XMLHttpRequest对象动态加载JS文件的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/your/js/file.js', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.text = xhr.responseText;
    document.head.appendChild(script);
  }
};
xhr.send();

在上述示例中，我们使用XMLHttpRequest对象发送一个GET请求，以获取要加载的JS文件。然后，我们在onreadystatechange事件处理程序中检查请求的状态和响应状态码。如果状态码为200，我们将响应文本添加到一个新的script元素中，并将该元素添加到页面的head元素中。

4. 总结

以上是js怎么动态加载JS文件(javascript性能优化篇)”的完整攻略，包括使用document.createElement()方法和XMLHttpRequest对象动态加载JS文件的详细说明和示例。我们可以根据具体情况选择合适的方法来动态加载JS文件，以提高页面性能和用户体验。