JS文件异步加载有哪些具体实现方式

JS文件异步加载是在网页开发中提升性能的重要手段，它可以让页面在加载JS文件时不阻塞其他资源的加载和页面的渲染，从而提高用户体验。常见的JS文件异步加载实现方式有以下几种。

动态创建script标签

这是一种较为常用的异步加载JS文件的方法。其原理是通过JavaScript代码动态地创建script标签，并将其添加到HTML文档中。当script标签被添加到文档后，浏览器会立即开始下载并执行该脚本。

示例代码如下：

var script = document.createElement('script');
script.src = 'yourScript.js';
document.head.appendChild(script);

通过这种方式，脚本的下载和执行不会阻塞页面的其他操作。不过，需要注意的是，这种方式加载的脚本会在下载完成后立即执行，如果有多个脚本，它们的执行顺序可能无法保证。

使用defer属性

defer属性是HTML5中为script标签新增的一个属性，它用于告诉浏览器该脚本不会修改DOM，因此可以在文档解析完成后再执行。

示例代码如下：

<script src="yourScript.js" defer></script>

使用defer属性的脚本会按照它们在HTML文档中出现的顺序依次执行，并且会在文档解析完成后、DOMContentLoaded事件触发前执行。这种方式适合那些需要在文档解析完成后执行，但又不依赖于其他脚本的代码。

使用async属性

async属性也是HTML5中为script标签新增的一个属性，它用于告诉浏览器该脚本可以异步加载和执行。

示例代码如下：

<script src="yourScript.js" async></script>

使用async属性的脚本会在下载完成后立即执行，不会等待其他脚本或文档解析完成。因此，使用async属性的脚本的执行顺序是不确定的，不适合那些有依赖关系的脚本。

使用XMLHttpRequest对象

XMLHttpRequest对象是一种用于在浏览器和服务器之间进行异步通信的技术。通过它可以异步地加载JS文件，并在加载完成后执行。

示例代码如下：

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

这种方式可以更灵活地控制脚本的加载和执行，但需要注意的是，由于同源策略的限制，这种方式只能加载同源的JS文件。

相关问答

1. defer和async属性有什么区别？

defer属性会让脚本在文档解析完成后、DOMContentLoaded事件触发前按照它们在HTML文档中出现的顺序依次执行；而async属性会让脚本在下载完成后立即执行，执行顺序是不确定的，不适合有依赖关系的脚本。

2. 动态创建script标签和使用defer、async属性有什么优缺点？

动态创建script标签的优点是可以在运行时动态地加载脚本，灵活性高；缺点是脚本的执行顺序可能无法保证。使用defer属性的优点是可以保证脚本按照顺序执行，并且在文档解析完成后执行；缺点是只能用于外部脚本。使用async属性的优点是可以异步加载脚本，不阻塞页面；缺点是脚本执行顺序不确定。