延迟加载js有哪些方法?

90 阅读1分钟

延迟加载js有哪些方法?

1、defer属性

<!DOCTYPE html>
<html> 
<head> 
    <script src="test1.js" defer="defer"></script> 
    <script src="test2.js" defer="defer"></script> 
</head> 
<body> 
    <!-- 这里放内容 --> 
</body> 
</html>

ps:只适用于外部脚本文件,等html全部解析完成,才会执行js代码,顺次执行js脚本

2、async属性

<!DOCTYPE html>
<html> 
<head> 
    <script src="test1.js" async ></script> 
    <script src="test2.js" async ></script> 
</head> 
<body> 
    <!-- 这里放内容 --> 
</body> 
</html>

ps:只适用于外部脚本文件,async和html解析是同步的,不是顺次解析js脚本(谁先加载完谁先执行)

3、动态创建DOM方式

<script type="text/javascript"> 
    (function(){ 
        var scriptEle = document.createElement("script"); 
        scriptEle.type = "text/javasctipt"; 
        scriptEle.async = true; 
        scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
        var x = document.getElementsByTagName("head")[0]; 
        x.insertBefore(scriptEle, x.firstChild); 
    })();
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js",function(){
    //回调函数,成功获取文件后执行的函数 
    console.log("脚本加载完成") 
});

5、使用setTimeout延迟方法

<script type="text/javascript"> 
    function testLoad() {
        console.log("11"); //.....这里可以写向后端的请求 
    } 
    (function(){ 
        setTimeote(function(){ 
            testLoad(); 
        }, 1000); //延迟一秒加载 
    })() 
</script>

6、让JS最后加载