异步模型 requestAnimationFrame

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

上面这段介绍来自于 MDN 当中，是关于 requestAnimationFrame 的一个介绍。

在网页开发当中，想要设置动画，一般会通过下面的几种途径：

js的定时器
css3的transition和animation
h5当中的canvas

除了上述的几种方式以外，H5还提供了一种新的api, 专门用来请求动画并且是一个异步的api， requestAnimationFrame ，可以理解为 请求动画帧 。

为了便于理解这个api，我们需要来了解几个相关的概念:

屏幕刷新频率

所谓的 屏幕刷新频率 ,指的是图像在屏幕上的更新速度，也就是屏幕上的图像每秒钟出现的次数，单位是赫兹(Hz)。

一般电脑而言，刷新频率一般在60Hz。屏幕的刷新频率会受到屏幕分辨率、屏幕尺寸、显卡的影响。

目前市场上的屏幕主要有两种，一种是CRT，另外一种是LCD，CRT是传统显示屏，LCD是使用比较广泛的液晶显示屏幕。

CRT是一种使用阴极射线管的显示器，屏幕上的图形图像是由一个个因电子束击打而发光的荧光点组成，由于显像管内荧光粉受到电子束击打后发光的时间很短，所以电子束必须不断击打荧光粉使其持续发光。电子束每秒击打荧光粉的次数就是屏幕刷新频率。

而对于LCD来说，则不存在刷新频率的问题，它根本就不需要刷新。因为LCD中每个像素都在持续不断地发光，直到不发光的电压改变并被送到控制器中，所以LCD不会有电子束击打荧光粉而引起的闪烁现象。

当我们正常的去看电脑屏幕的时候，显示器同样会按照指定的赫兹数例如每秒60次的频率不断的更新屏幕上的图像。

而我们之所以感觉不到屏幕上的变化，是因为人的眼睛存在视觉停留效应，简单的说就是前一副画面还没有完全失去印象，后面一副就已经刷新出来了，这中间的间隔时间大约为16.7ms(1000/60≈16.7)，这也就导致了我们认为屏幕上的图像是静止的。

动画原理

根据刷新频率，我们在屏幕上看到的内容以每秒钟60次的频率进行着刷新，因为刷新的频率较高，所以我们基本感觉不到屏幕在进行刷新。而动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。那怎么样才能做到这种效果呢？

刷新的频率为60Hz的屏幕每16.7ms刷新一次，我们可以进行一种假设，在屏幕每次刷新前都将元素向右移动1像素。这样做的结果就是每次在刷新后我们看到的元素的位置都是不同的，会因为刷新频率较快，我们看到的图像就是移动的元素。

setTimeout 和 setInterval 掉帧

我们在使用 setTimeout 和 setInterval 的时候，就可能出现掉帧的现象。

为什么呢？

首先这两个定时器其实就是通过设置一个时间间隔然后不断调整元素位置，从而实现动画效果。

但是在某些机器上或者某些特殊情况下使用定时器实现的动画会出现掉帧和卡顿现象，出现的原因可能是以下的两点因素：

这两个定时器执行时间不确定，因为在js中这两个定时器是属于异步操作，会被放到队列当中去，只有等到主线程的任务执行完毕之后才会执行队列里面的内容。因此定时器执行的时间可能存在比实际的时间长一点的情况。
刷新频率受到屏幕分辨率和屏幕尺寸的影响，因此不同的设备可能会有不同的刷新频率，而定时器的时间间隔是相同并且固定的，这个时间可能和定时器的时间不相符。

以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。那为什么步调不一致就会引起丢帧呢？

首先要明白，setTimeout的执行只是在内存中对图像属性进行改变，这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的图像。

requestAnimationFrame

和传统的定时器相比较而言， requestAnimationFrame 最大的优势是由系统决定到底什么时候执行回调函数。

例如，刷新频率是60Hz，那么回调函数就是每16.7秒执行一次，如果刷新频率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms。

简单的说，这个api可以保证回调函数可以在屏幕的每一次刷新间隔只执行一次，这样做的好处就是不会引起掉帧的发生。

下面是简单的demo，通过 requestAnimationFrame 来让元素不断的位移。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		#d1 {

			width:100px;

			height:100px;

			background-color:red;

			position: absolute;

			left:0;

			top:0;

		}

	</style>

</head>

<body>

	<div id="d1"></div>

</body>

<script type="text/javascript">

	var d1 = document.getElementById('d1')

	var num = 0;

	function render() {

		num +=1;

		if(num <=500) {

			d1.style.left = d1.offsetLeft + 1 + 'px';

			// 动画尚未结束前，进行递归渲染

			window.requestAnimationFrame(render)

		}

	}

	// 第一帧需要手动的进行渲染

	window.requestAnimationFrame(render)

</script>

</html>