js延迟加载的几种方法

js加载会影响后面内容的加载。js延迟记载就是等页面加载完后再加载js文件。js延迟加载有助于提高页面加载速度

1.defer属性

延迟加载，会按顺序执行，在onload执行前被触发，只适用于外部脚本文件

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

2.async属性

async是html5新增属性，与defer相似，同样只适用于外部脚本文件
异步加载，加载完就执行，且一定会在onload执行前被触发，缺点是不能控制加载顺序

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

3. jQuery的getScript()方法

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

4.setTimeout延迟方法

<script type="text/javascript">
    function A(){
        $.post("/lord/login",{name:username,pwd:password},function(){
            alert("Hello World!");
        })
    }
    $(function (){
        setTimeout("A()",1000);  //延迟1秒
    })
</script>

5.动态创建DOM方式

由于defer和async的兼容性问题，我们通常使用动态创建script标签的方式来实现异步加载脚本，即：

    //这些代码应被放置在</body>标签前(接近HTML文件底部)
    document.write('<script src="myJs.js" async="async"><\/script>'); 
    //或者：
    function downloadJSAtOnload() { 
        var element = document.createElement("script"); 
        element.src = "defer.js"; 
        document.body.appendChild(element); 
    } 
    if (window.addEventListener) {
        window.addEventListener("load",downloadJSAtOnload, false);
    }else if (window.attachEvent) {
        window.attachEvent("onload",downloadJSAtOnload);
    } else {
        window.onload = downloadJSAtOnload;
    } 

6.让js最后加载

（我们在写js时没有特殊要求都要用此方法），把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度