《高性能javascript》读书笔记:js的加载和代码执行

1.每个<script>加载时都会阻塞其他文件(图片、音乐等)的同时加载,同时浏览器会在js代码执行时停止渲染Dom.所以为了减少界面加载的卡顿和空白发生,应尽力将js代码或者文件放在</body>前,防止js代码影响Dom渲染。

 

2.js文件现在浏览器内部已经实现并行加载。提高浏览器加载js性能:a.减小js大小 b.减少内链代码个数 3.http请求会带来额外开销,所以1个100K的js加载时间短语4个25k的。

 

3.页面无阻塞:考虑在页面框架加载渲染完之后再触发对脚本的下载

  window.onload()

  可以在<script>标签内加入defer:

 <script src=”index.js” defer></script>

 

,向浏览器提前说明:本js文件无对dom操作,可以延迟加载执行。目前所有浏览器都已实现.

 

4.script标签也是Dom对象,所以可以动态添加js脚本。

        

var script=document.cresteElement(“script”);
script.type = “text/javascript”;
script.scr= ”123.js”;
document.getElementByTagName(“head”)[0].appendChild(script);

 

可以添加加载完成时的状态:

   

script.onload = function(){  //除IE外,支持
        alert(‘动态js加载完成’);
   };
        script.onreadystatechange = function(){//IE
           //其中readyState 为识别值,有5种取值结果:
           // unintialized初始状态 loading下载中  loaded下载完成  interactive 数据完、、          //成下载但不可用  complete 所有数据已经准备完成

            if(script.readyState ==”loaded” || script.readyState ==”complete”){
                //…………
            }
        }
   }

 

 

但是,如何将两种浏览器加载识别模式融合在一起?

         

function loadScript (url,callback){//url为文件位置,callback为回调函数
        var script = document.createElement(“script”);
        script.type=”text/javascript”;
        script.src=”index.js”;
        if(script.readyState){  //ie
            script.onreadystatechange = function(){
            if(script.readyState ==”loaded” || script.readyState ==”complete”){
                callback();
            }
        }
        else{ //其他浏览器
            script.onload = function(){
                callback();
            }
        }
    script.scr= url;
        document.getElementByTagName(“head”)[0].appendChild(script);
    }

 

上面这种是书上给出的只能加载js的函数,怎么用这个函数同样能css动态加载?  自己改良了一下:

    

function afterload(){
        alert("已加载");    
    }

    function loadScript(url,type,callback){
        if("js"==type){
            var script = document.createElement("script");
            script.type = "text/javascript";
            if(script.readyState){  //ie
                 script.onreadystatechange = function(){
                      if(script.readyState ==”loaded” || script.readyState ==”complete”){
                            callback();
                      }
                 }
}
else{ //其他浏览器 script.onload = function(){ callback(); } } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } else if("css"==type){ var css = document.createElement("link"); css.setAttribute("rel","stylesheet");//增加属性函数,css.rel()不存在,所以只能setA...出来 css.setAttribute("type","text/css"); if(css.readyState){ //ie css.onreadystatechange = function(){ if(css.readyState ==”loaded” || css.readyState ==”complete”){ callback(); }
}
}
else{ //其他浏览器 css.onload = function(){ callback(); } } css.setAttribute("href",url); document.getElementsByTagName("head")[0].appendChild(css); } }

 

  

5.可以尝试使用YUI或者Lazyload来做无阻塞加载

《高性能javascript》读书笔记:js的加载和代码执行,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。