JavaScript 异步加载浅析

在网页开发中，我们经常会遇到需要加载外部资源（如CSS、JS等）的情况。传统的加载方式是同步加载，即在加载完一个资源后才会加载下一个资源，这样会导致页面加载速度较慢，影响用户体验。因此，异步加载成为了一个非常重要的技术。

异步加载是指在加载资源的同时，不会阻塞页面的其他操作，而是充分利用空闲时间进行资源加载。在 JavaScript 中，异步加载主要有两种方式：回调函数和 Promise。

回调函数

回调函数是异步编程中一种比较常用的方式。当某个任务执行完成后，会调用预先定义好的回调函数来处理结果。在 JavaScript 中，回调函数是作为参数传递给异步函数的。

例如，我们可以使用 XMLHttpRequest 实现一个异步加载图片的功能，并在加载完成后执行回调函数：

function loadImage(url, callback) {
    var img = new Image();
    img.src = url;
    img.onload = function() {
        callback(img);
    }
}

在上述代码中，loadImage 函数接收两个参数，分别是图片的 URL 和回调函数。当图片加载完成后，onload 回调函数将会被触发，将图片作为参数传入回调函数中。我们可以通过以下方式来调用 loadImage 函数：

loadImage('https://example.com/image.jpg', function(img) {
    console.log('图片加载完成！');
    document.body.appendChild(img);
});

在上面的示例中，当图片加载完成后，控制台会输出一条信息，同时将图片添加到页面中。

Promise

Promise 是 ECMAScript 6 标准中新增的异步编程模型。Promise 表示一个异步操作的最终完成或失败，并且可以将回调函数与成功或失败的处理分离。它的使用方式比回调函数更为灵活，也更容易管理代码。

我们可以使用 Promise 对象实现异步加载图片的功能：

function loadImage(url) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.src = url;
        img.onload = function() {
            resolve(img);
        };
        img.onerror = function() {
            reject(new Error('图片加载失败'));
        };
    });
}

在上述代码中，loadImage 函数返回一个 Promise 对象，该对象有两个回调函数 resolve 和 reject。当图片加载成功时，调用 resolve 函数，将图片对象作为参数传入；当加载失败时，调用 reject 函数，传入一个错误对象。我们可以通过以下方式来调用 loadImage 函数：

loadImage('https://example.com/image.jpg').then(function(img) {
    console.log('图片加载完成！');
    document.body.appendChild(img);
}).catch(function(error) {
    console.error(error);
});

在上面的示例中，当图片加载完成后，执行 then() 方法中的回调函数，并将图片添加到页面中。如果图片加载失败，则执行 catch() 方法中的回调函数，将错误信息输出到控制台。

总结

本文介绍了 JavaScript 中异步加载的两种方式：回调函数和 Promise。两种方式各有优缺点，开发者可以根据实际需求选择合适的方式。使用异步加载可以优化网页加载速度，提升用户体验。

在实践中，我们还可以使用一些现成的库（如 jQuery）、模块加载器（如 require.js、webpack）等工具来帮助我们进行异步加载，从而简化代码的编写和管理。