mousemove,scroll,resize 每秒触发N次 ... 性能优化一下很有必要
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; padding:0;}
body{height:2000px; font:700 16px/32px '微软雅黑'; color:#fff}
#before,#after{width:50%; height:100%; text-align:center;}
#before{float:left; background-color:#0000FF; }
#after{float:right; background-color:#FF0000;}
</style>
<script type="text/javascript">
var i = 0,j = 0;
window.addEventListener('load',function(){
var before = document.getElementById('before');
var after = document.getElementById('after');
//优化
(function(){
var me = arguments.callee;
before.addEventListener('mousemove',function(e){
i+=1;
before.innerHTML = '优化后:' + e.type + ':' + i ;
before.removeEventListener('mousemove',arguments.callee);
window.setTimeout(function(){
me();
},300); //300毫秒执行一次
});
})();
//未优化
(function(){
var me = arguments.callee;
after.addEventListener('mousemove',function(e){
j+=1;
after.innerHTML = '优化前' + e.type + ':' + j ;
});
})();
});
</script>
</head>
<body>
<div id="msg"></div>
<div id="before"></div>
<div id="after"></div>
</body>
</html>