动态加载与异步加载 JavaScript 详解：加载远程js，加载成功后执行回调函数

动态加载与异步加载 JavaScript 详解

在现代的Web开发中，优化网页性能已经成为了一项至关重要的任务。而优化JavaScript的加载方式，尤其是动态加载和异步加载，是提高页面性能的关键手段之一。本文将深入探讨这两种加载方式的概念、实现方法、优缺点，并给出一些实用的示例代码。

1. 概念解析

1.1 动态加载 JavaScript

动态加载，指的是在需要的时候才加载对应的JavaScript文件。这种方式可以减少页面初始加载时的请求数量，从而加快页面的首次渲染速度。动态加载通常是通过在文档中动态创建<script>标签来实现的。

1.2 异步加载 JavaScript

异步加载，指的是在加载JavaScript文件的同时，不阻塞页面的其他内容加载和渲染。这种方式可以避免因JavaScript加载和执行而造成的页面卡顿现象。异步加载通常通过设置<script>标签的async或defer属性来实现。

2. 实现方法

2.1 动态加载的实现

动态加载JavaScript的基本思路是：在需要执行某个JavaScript文件时，动态地在DOM中插入一个<script>标签，并将其src属性设置为对应的JavaScript文件URL。这样，浏览器就会去加载并执行这个文件。

以下是一个简单的示例代码：

function loadScript(url, callback) {
    let script = document.createElement('script');
    script.src = url;
    script.onload = callback;
    document.head.appendChild(script);
}

// 使用示例
loadScript('https://example.com/path/to/your/script.js', function() {
    console.log('Script loaded successfully!');
});

在这个示例中，我们定义了一个loadScript函数，它接受两个参数：一个是JavaScript文件的URL，另一个是一个回调函数，用于在脚本加载完成后执行某些操作。

2.2 异步加载的实现

异步加载JavaScript可以通过两种方式实现：使用async属性和使用defer属性。

2.2.1 使用async属性

当<script>标签设置了async属性时，浏览器会异步地加载和执行这个脚本。这意味着脚本的加载和执行不会阻塞页面的渲染。但是，需要注意的是，async脚本的执行顺序是不确定的，它们可能会在DOMContentLoaded事件触发之前或之后执行。

示例代码：

<script async src="https://example.com/path/to/your/script.js"></script>

2.2.2 使用defer属性

当<script>标签设置了defer属性时，浏览器也会异步地加载这个脚本，但是执行会被推迟到文档解析完成之后，且在DOMContentLoaded事件触发之前。与async不同，defer脚本的执行顺序是按照它们在文档中出现的顺序来的。

示例代码：

<script defer src="https://example.com/path/to/your/script.js"></script>

3. 优缺点分析

3.1 动态加载的优缺点

优点：

• 可以按需加载JavaScript，减少不必要的资源消耗。
• 可以控制脚本的加载和执行时机，更加灵活。

缺点：

• 需要手动管理脚本的加载和执行，相对复杂。
• 如果脚本之间有依赖关系，需要特别注意加载顺序。

3.2 异步加载的优缺点

优点：

• 不会阻塞页面的渲染，提高用户体验。
• 适用于那些不需要在页面加载时立即执行的脚本。

缺点：

• 对于async脚本，执行顺序不确定，可能会导致依赖问题。
• 对于defer脚本，虽然执行顺序确定，但是需要在文档解析完成后才能执行，可能会有一定的延迟。

4. 最佳实践

4.1 根据需求选择合适的加载方式

对于那些在页面加载时就必须执行的脚本，可以使用普通的<script>标签加载。对于那些可以在页面加载后延迟执行的脚本，可以使用defer属性。对于那些执行时机不确定，且没有依赖关系的脚本，可以使用async属性。对于需要按需加载的脚本，可以使用动态加载的方式。

4.2 优化脚本的加载和执行

为了提高性能，可以采取以下优化措施：

• 合并和压缩脚本文件，减少请求数量和文件大小。

• 使用CDN加速脚本文件的加载。
• 对于动态加载的脚本，可以使用事件监听和条件判断来控制加载时机。
• 避免在脚本中执行耗时的操作，如大量的DOM操作或复杂的计算。

5. 总结

动态加载和异步加载是优化JavaScript加载性能的重要手段。动态加载可以按需加载脚本，减少不必要的资源消耗；异步加载可以避免阻塞页面的渲染，提高用户体验。在实际开发中，我们需要根据需求选择合适的加载方式，并采取一些优化措施来提高性能。希望本文的内容能对大家有所帮助！

加载远程js，加载成功后执行回调函数

export const loadRemoteScript = function(srcPath, callback) {  /*加载远程js，加载成功后执行回调函数*/
  let sid = encodeURIComponent(srcPath)
  let oldScriptEle = document.getElementById(sid)

  if (!oldScriptEle) {
    let s = document.createElement('script')
    s.src = srcPath
    s.id = sid
    document.body.appendChild(s)

    s.onload = s.onreadystatechange = function (_, isAbort) { /* 借鉴自ace.js */
      if (isAbort || !s.readyState || s.readyState === "loaded" || s.readyState === "complete") {
        s = s.onload = s.onreadystatechange = null
        if (!isAbort) {
          callback()
        }
      }
    }
  }
}