mousemove,scroll,resize性能优化

最新推荐文章于 2023-03-22 00:41:15 发布

不耐烦

最新推荐文章于 2023-03-22 00:41:15 发布

阅读量3.4k

点赞数 1

分类专栏： javascript 文章标签：性能优化 scroll function 优化 float div

本文链接：https://blog.csdn.net/g125989100/article/details/7926587

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>

不耐烦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
mousemove,scroll,resize性能优化

mousemove,scroll,resize 每秒触发N次 ... 性能优化一下很有必要 *{margin:0; padding:0;} body{height:2000px; font:700 16px/32px '微软雅黑'; color:#fff} #before,#after{width:50%; height:100%; text-align:center;}
复制链接

扫一扫

专栏目录