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