加载和执行 --《高性能JavaScript》

Posted 2020-10-12 im.lhc

1.起因：　　

　　每次遇到<script> 标签时，页面必须停下来等待代码下载并执行完，然后再继续处理其他部分。

2.减少javascript对性能的影响

　　1.将所有的JavaScript文件放在</body>前，这能确保脚本执行前页面已经完成了渲染。

　　2.合并脚本。页面中的<script>标签越少，加载也就越快，响应也就更迅速。无论外链脚本还是内嵌脚本。

　　3.有多种无阻塞下载JavaScript方法：

　　　　1.使用<script>的defer属性，async属性（IE）

　　　　2.使用动态创建的<script>元素来下载并执行代码

　　　　

function loadScript(url, callback){
    var script = document.createElement(‘script‘);
    script.type = "text/javascript";
    if(script.readyState){    //IE9以下
        script.onreadystatechange = function(){
            if(script.readyState==‘complete‘||script.readyState==‘loaded‘){
                callback();
            }
        }
    }else{
        script.onload = function () {
            //firefox chrome safair opera
            callback();
        }
    }
    script.src = url;
    document.head.appendChild(script);
}

 

　　　　3.使用XHR对象下载JavaScript代码并注入页面中