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

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代码并注入页面中

 

  

posted @ 2017-10-28 17:31  im.lhc  阅读(150)  评论(0编辑  收藏  举报