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));
------------------------------------------------------------------------------------
//阻止mouseover和mouseout的反复触发
function contains(parentNode, childNode) {
if (parentNode.contains) {
return parentNode != childNode && parentNode.contains(childNode);
} else {
return !!(parentNode.compareDocumentPosition(childNode) & 16);
}
}
function checkHover(e,target){
if (getEvent(e).type=="mouseover") {
return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);
} else {
return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);
}
}
function getEvent(e){
return e||window.event;
}
document.getElementById("element").addEventListener("mouseover",function(e){
if(checkHover(e,this)){
console.log('鼠标进去一次');
}
},false);