１.函數(shù)節(jié)流

函數(shù)的觸發(fā)不是由用戶來(lái)控制的税手，當(dāng)函數(shù)被非常頻繁調(diào)用時(shí)图呢，會(huì)造成大的性能問題

• window.onsize事件条篷，這個(gè)時(shí)間會(huì)在窗口改變時(shí)頻繁調(diào)用
• mousemove事件，鼠標(biāo)移動(dòng)時(shí)會(huì)頻繁調(diào)用
• 上傳進(jìn)度岳瞭，插件頻繁通知js上傳進(jìn)度
  基本思路是拥娄，按照時(shí)間段來(lái)忽略一些函數(shù)調(diào)用

var throttle=function(fn,interval){
    var first=true;
    var timer;   //定時(shí)器

    return function(){
        var args=arguments;
        var self=this;

        //第一次調(diào)用時(shí)，無(wú)需延時(shí)執(zhí)行
        if(first){
            fn.apply(self,args);
            first=false;
            return;
        }    
    
        //定時(shí)器存在時(shí)瞳筏，前一次延時(shí)執(zhí)行還未完成
        if(timer){
            return;
        }

        //延時(shí)執(zhí)行相應(yīng)函數(shù)
        timer=setTimeout(function(){
            fn.apply(self,args);
            clearTimeout(timer);
            timer=null;
        },interval || 500);
    }
}

window.onresize=throttle(function(){
    console.log(1);
},500);

2.分時(shí)函數(shù)

有些函數(shù)確實(shí)是用戶調(diào)用的稚瘾，但是這些函數(shù)會(huì)嚴(yán)重影響頁(yè)面性能，例如需要短時(shí)間向頁(yè)面中大量添加DOM節(jié)點(diǎn)姚炕，這可能會(huì)讓瀏覽器卡頓或者假死摊欠。
因此，可以使用一個(gè)timeChunk函數(shù)柱宦，可以將創(chuàng)建節(jié)點(diǎn)的工作通過(guò)定時(shí)器分批進(jìn)行些椒。

//array為節(jié)點(diǎn)數(shù)據(jù)，fn為創(chuàng)建節(jié)點(diǎn)的操作掸刊，count為每次創(chuàng)建節(jié)點(diǎn)的個(gè)數(shù)
    var timeChunk=function(array,fn,count){
        var start=function(){
            for(var i=0;i<Math.min(count || 1,array.length);i++){
                var data=array.shift();
                fn(data);
            }
        }

        var t;
        return function(){
            t=setInterval(function(){
                //節(jié)點(diǎn)已全部創(chuàng)建完畢
                if(array.length===0){
                    return clearInterval(t);
                }
                start();
            },200);
        }
    }

這樣就能每隔200ms創(chuàng)建一批節(jié)點(diǎn)免糕，讓瀏覽器有一個(gè)緩沖時(shí)間。

3.惰性載入函數(shù)

在實(shí)現(xiàn)通用的瀏覽器時(shí)間綁定函數(shù)addEvent時(shí)忧侧，可以將addEvent設(shè)置為一個(gè)普通的函數(shù)石窑，在第一次調(diào)用這個(gè)函數(shù)時(shí)，重寫這個(gè)函數(shù)的內(nèi)容蚓炬，來(lái)實(shí)現(xiàn)惰性加載函數(shù)松逊。

var addEvent=function(ele,type,handler){
        if(ele.addEventListener){
            addEvent=function(ele,type,handler){
                ele.addEventListener(type,handler,false);    
            }
        }
        else if(ele.attachEvent){
            addEvent=function(ele,type,handler){
                ele.attachEvent('on'+type,handler);
            }
        }
        else{
            addEvent=function(ele,type,handler){
                ele['on'+type]=handler;
            }
        }

        addEvent(ele,type,handler);
    };