javascript脚本异步加载的几种方式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript脚本异步加载的几种方式相关的知识,希望对你有一定的参考价值。

一般而言,javascript脚本一般是建议放在body标签的底部,因为使用script标签加载js时,会停止加载后面的内容而停下来解析脚本并对页面进行渲染,使用src属性加载外部脚本也会造成这样的情况,这样的话,如果在head或者body的前面放入过多的script标签,并且内容很多的时候,会造成页面在解析完所有script标签的内容前有短暂的时间整个页面空白,给用户的体验会很差。但是如果所有的脚本都放在底部,又会造成dom加载完毕后有一段时间页面虽然能看到,但是和用户的交互却很差,因此需要让一些脚本与页面异步加载。

1.在html5中,script新增了async的属性,script添加了该属性之后,下载脚本时将可以与页面其他内容并行下载,但是该属性必须在ie9以上的浏览器中才可以使用,并且只能用于加载外部js脚本。

2.同样,在html4中也有一个defer属性,该属性的兼容性更好一点,但是与async一样,可以让js脚本实现异步加载,同样只能用于加载外部js脚本。

asyc与defer属性的不同点是,async会让脚本在加载完可用时立即执行,而defer脚本则会在dom加载完毕后执行,defer脚本的执行会在window.onload之前,其他没有添加defer属性的script标签之后。

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<script>
    window.onload = function() {
        console.log("window.onload");
    }
</script>
<script src="js/defer.js" defer></script>
<script>
    console.log("normal");
</script>

<body>

</body>

</html>

显示的顺序为:normal defer window.onload

3.利用XHR异步加载js内容并执行,代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<script>
    var xhr = new XMLHttpRequest();
    xhr.open("get", "js/defer.js",true)
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            eval(xhr.responseText);
        }
    }
</script>

<body>

</body>

</html>

4.动态创建script标签,主要代码如下

    var script = document.createElement("script");
    script.src = "js/test.js";
    document.head.appendChild(script);

该方式还可以通过script的onreadyState监视加载的状态。

5.iframe方式,利用iframe加载一个同源的子页面,让子页面内的js影响当前父页面的一种方式。

以上是关于javascript脚本异步加载的几种方式的主要内容,如果未能解决你的问题,请参考以下文章

JS异步处理机制的几种方式

Java实现AOP的几种方式

js单线程和js异步操作的几种方法

JavaScript调用C语言的几种方式

a标签调用js的几种方法

a标签调用js的几种方法