js 异步加载

// 使用 JavaScript 异步加载脚本的示例

// 方法 1: 使用 defer 属性
function loadScriptDefer(src) {
    var script = document.createElement('script');
    script.src = src;
    script.defer = true; // 确保脚本在 DOM 加载完成后执行
    document.head.appendChild(script);
}

// 方法 2: 使用 async 属性
function loadScriptAsync(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = true; // 立即下载并尽快执行，不阻塞页面渲染
    document.head.appendChild(script);
}

// 方法 3: 使用回调函数处理加载完成事件
function loadScriptWithCallback(src, callback) {
    var script = document.createElement('script');
    script.src = src;
    script.onload = function() {
        console.log('Script loaded and executed.');
        if (callback && typeof(callback) === 'function') {
            callback(); // 在脚本加载完成后执行回调函数
        }
    };
    script.onerror = function() {
        console.error('Failed to load script.');
    };
    document.head.appendChild(script);
}

// 示例调用
loadScriptDefer('https://example.com/script.js');
loadScriptAsync('https://example.com/another-script.js');
loadScriptWithCallback('https://example.com/callback-script.js', function() {
    console.log('Callback executed after script is loaded.');
});

解释说明：

1. defer 属性：当使用 defer 属性时，脚本会在页面解析完成后立即执行，但不会阻塞页面的渲染。适用于需要确保脚本在 DOM 完全加载后执行的情况。
2. async 属性：当使用 async 属性时，脚本会立即开始下载，并在下载完成后尽快执行，不会等待页面其他资源的加载。适用于独立的脚本文件，不会依赖于其他脚本或 DOM 的状态。
3. 回调函数：通过监听 onload 事件，可以在脚本加载完成后执行特定的回调函数，确保代码按顺序执行。同时，onerror 事件可以捕获加载失败的情况。

这些方法可以帮助你在不影响页面性能的情况下异步加载 JavaScript 文件。