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

2021-11-12 08:21:38

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的加载和代码执行,布布扣,bubuko.com

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

码农公寓

相关文章