点评JS异步加载的4种方式

在优化网站性能的过程中，经常需要对JS脚本进行异步加载。点评网作为一个旅游服务平台，需要对JS脚本加载进行优化处理，以确保页面加载速度和用户访问体验。本文将介绍点评网使用的四种JS异步加载方式。

1. 动态创建script节点

动态创建script节点是最常用的JS异步加载方式之一。通过这种方法可以在文档加载期间获取到JS资源，并异步加载JS脚本文件。

实现代码示例如下：

function loadScript(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {
        script.onreadystatechange = function() {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {
        script.onload = function() {
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

实现上述代码后，就可以通过调用loadScript函数来加载JS文件。

loadScript("test.js", function() {
    console.log("test.js加载完成！");
});

2. 使用defer属性

另一种常用的异步加载方式是使用defer属性。设置defer属性后，将会导致JS文件在HTML文档解析完成后再执行，可以避免阻塞其他资源的加载。

实现代码示例如下：

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

3. 使用async属性

使用async属性可以允许JS文件并行加载，而不会按照在HTML文档中出现的顺序执行。这种方式适用于需要立即执行的JS文件。

实现代码示例如下：

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

4. 使用动态创建iframe

使用动态创建iframe的方式也可以异步加载JS文件。通过该方法可以避免阻塞页面主线程执行，提升页面加载速度。

实现代码示例如下：

var iframe = document.createElement('iframe');
iframe.src = 'about:blank';
iframe.style.display = 'none';
document.body.appendChild(iframe);

var iframeDoc = iframe.contentWindow || iframe.contentDocument;
if (iframeDoc.document) {
    iframeDoc = iframeDoc.document;
}

var scriptElm = iframeDoc.createElement('script');
scriptElm.type = 'text/javascript';
scriptElm.src = 'test.js';

iframeDoc.body.appendChild(scriptElm);

上述代码会创建一个隐藏的iframe，并加载JS文件。通过动态创建iframe来实现JS文件的异步加载。

总结：

上述四种方法都有各自的优点和适用范围。在实际的开发中，需要根据具体情况选择合适的异步加载方式，并根据具体情况优化JS加载性能。通过使用上述技巧，点评网提升了网站性能，提供更好的服务体验。