动态加载JavaScript文件

动态加载JavaScript文件是一种在网页加载过程中，通过代码实现异步加载JavaScript文件的方法。这种方法可以提高网页的性能和加载速度，因为浏览器可以在加载其他资源的同时，先加载和执行JavaScript文件。动态加载JavaScript文件可以实现按需加载、懒加载等功能，从而提高网页的性能和用户体验。

以下是一些动态加载JavaScript文件的方法：

使用<script>标签的async属性：

var script = document.createElement('script');
script.src = 'path/to/your/script.js';
script.async = true;
document.body.appendChild(script);

使用<script>标签的defer属性：

var script = document.createElement('script');
script.src = 'path/to/your/script.js';
script.defer = true;
document.body.appendChild(script);

使用XMLHttpRequest或fetch加载JavaScript文件：

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

使用Promise实现按需加载：

function loadScript(src) {
  return new Promise(function(resolve, reject) {
    var script = document.createElement('script');
    script.src = src;
    script.onload = function() {
      resolve();
    };
    script.onerror = function() {
      reject(new Error('Failed to load script: ' + src));
    };
    document.body.appendChild(script);
  });
}

loadScript('path/to/your/script1.js')
  .then(function() {
    return loadScript('path/to/your/script2.js');
  })
  .then(function() {
    // 所有脚本都已加载完成
  })
  .catch(function(error) {
    console.error(error);
  });

推荐的腾讯云相关产品：