js 性能优化收拾之 高频优化

js 性能优化整理之 高频优化

//mousemove 拖拽操作

var count = 0;
elem.onmousemove = function(){
    count++;
    // 当计数器为偶数的时候不执行mousemove
    if( count % 2 === 0 ){
    return;
    }

    // 实现拖拽功能的代码...
};

 

高频事件的简单处理

var throldHold = 200; //两次scroll事件触发之间最小的事件间隔
window.onscroll = function () {
    if (arguments.callee.timer) {
        clearTimeout(arguments.callee.timer);
    }
    arguments.callee.timer = setTimeout(isDivScroll, throldHold);
}
//isDivScroll滚动执行的方法

针对高频事件，我们封装一下

//函数节流（throttle）与函数去抖（debounce）
var throttle = function( fn, timeout ){     
    var timer;
    return function(){
        var self = this,
            args = arguments;
    clearTimeout( timer );
        timer = setTimeout(function(){
            fn.apply( self, args );
        }, timeout );
    };

};

 

//mousewheel 滚轮操作

window.onmousewheel = throttle(function(){
    // 滚轮滚动时的操作代码..
}, 200 );

 

 

//resize  窗口操作  ie每次比其他浏览是多重复触发一次

window.onresize = throttle(function(){  //普通绑定
    // 自适应布局的代码...
}, 200 );


window.addEventListener("resize", throttle(function(){  //监听绑定
		console.log('重置');
},200),false);

 

 

 

参考别的框架的代码  UnderscoreJS 框架

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
  }
 
// 添加resize的回调函数，但是只允许它每300毫秒执行一次
window.addEventListener('resize', debounce(function(event) {
    // 这里写resize过程 
}, 300));