使用requestAnimationFrame减少浏览器重绘

迦南giser

已于 2025-02-07 09:58:40 修改

阅读量1.2k

点赞数 18

分类专栏： # 性能优化文章标签： javascript 前端开发语言

于 2025-02-06 20:45:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37987033/article/details/145474733

版权

性能优化专栏收录该内容

2 篇文章

订阅专栏

文章目录

介绍
使用
- 使用rAF前
- 使用rAF后

介绍

在屏幕中，浏览器通常都以60FPS（1/60 s）每帧更新屏幕，但是当前端绑定了一些高频事件，如鼠标移动，屏幕滚动、触摸滑动等时，在一帧的周期内，事件会多次触发，但页面只刷新一次。这种情况就可能导致丢帧现象，抑或者回调函数处理时间过长，也会导致下一帧的重绘延迟，出现卡顿效果。
通过requestAnimationFrame（rAF）保证在一帧的周期内，函数只触发一次然后渲染，就能有效的降低卡顿。

使用

记录一个标志变量判断是否有正在进行的rAM，若有，停止触发绑定事件；否则将标志置为true，在rAM周期内执行回调函数，执行完成后将标志变量置为false

使用rAF前

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>webgl</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		#img1 {
			width: 100px;
			height: 100px;
			background-image: url('./img/img1.jpg');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		#img2 {
			width: 100px;
			height: 100px;
			background-image: url('./img/img2.jpg');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		#img3 {
			width: 100px;
			height: 100px;
			background-image: url('./img/img1.jpg');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	</style>
</head>

<body>
	<div id="main">
		<div class="img" id="img1"> </div>
		<div class="img" id="img2"> </div>
		<div class="img" id="img2"> </div>
		
	</div>
	<script>
		let imgDiv = document.getElementsByClassName('img')
		let flag = false

		// 重绘操作
		function rePaint (pos) {
			for(let i = 0; i<imgDiv.length; i++) {
				imgDiv[i].style.width = (Math.sin(pos/1000) + Math.PI / 2) * 100 + 'px'
				imgDiv[i].style.height = (Math.sin(pos/1000) + Math.PI / 2) * 100 + 'px'
			}
		}

		// 高频触发函数, 
		window.addEventListener('pointermove',(e)=>{
			rePaint(pos)	
		})


	</script>
</body>

</html>

使用rAF后

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>webgl</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <style>
   	body {
   		margin: 0;
   		padding: 0;
   	}

   	#img1 {
   		width: 100px;
   		height: 100px;
   		background-image: url('./img/img1.jpg');
   		background-repeat: no-repeat;
   		background-size: 100% 100%;
   	}

   	#img2 {
   		width: 100px;
   		height: 100px;
   		background-image: url('./img/img2.jpg');
   		background-repeat: no-repeat;
   		background-size: 100% 100%;
   	}

   	#img3 {
   		width: 100px;
   		height: 100px;
   		background-image: url('./img/img1.jpg');
   		background-repeat: no-repeat;
   		background-size: 100% 100%;
   	}
   </style>
</head>

<body>
   <div id="main">
   	<div class="img" id="img1"> </div>
   	<div class="img" id="img2"> </div>
   	<div class="img" id="img2"> </div>
   	
   </div>
   <script>
   	let imgDiv = document.getElementsByClassName('img')
   	let flag = false

   	// 重绘操作
   	function rePaint (pos) {
   		for(let i = 0; i<imgDiv.length; i++) {
   			imgDiv[i].style.width = (Math.sin(pos/1000) + Math.PI / 2) * 100 + 'px'
   			imgDiv[i].style.height = (Math.sin(pos/1000) + Math.PI / 2) * 100 + 'px'
   		}
   	}

   	// 高频触发函数, 
   	window.addEventListener('pointermove',(e)=>{
   		let pos = e.clientX;
   		// 判断，如果有一个正在进行的rAM，停止继续触发；否则将flag置为true
   		if(flag) return;
   		flag = true;

   		window.requestAnimationFrame(()=>{
   			// 此帧执行结束后，将flag重新置为false
   			rePaint(pos)
   			flag = false;
   		})		
   	})


   </script>
</body>

</html>