参考文献： 浏览器的even loop
js在浏览器中运行，用户看到界面，可以简单地分解为页面渲染，和js进程执行两部分。这两部分相辅相成，共同构成我们在浏览器内进行点击，滚动鼠标，酷炫的动画等流畅的交互体验。
页面渲染过程
页面渲染会有固定的节奏，可以分为三个小步骤
- Structure - 构建 DOM 树的结构
- Layout - 确认每个 DOM 的大致位置（排版）
- Paint - 绘制每个 DOM 具体的内容（绘制）
用户的一些行为，如刷新，缩放窗口等操作会引起页面的重新渲染。
js进程执行
js是单线程的，一次只能执行一个任务。某些js操作也会出发页面的重新渲染，如获取样式和浏览器宽高等。
当一个进程执行时间太长，就会导致无法执行后续代码，同时也会阻塞浏览器的渲染。
单线程执行
控制台输入while(true)，你会发现浏览器所有行为失效（并不是卡顿，鼠标还能运动）。很好玩，值得一试（真诚微笑脸）。
异步队列
所以为了防止因为某个任务执行时间太长而导致整个进程阻塞，js中很合理就存在一个异步队列的概念，可以把耗时长的任务放入异步队列中。像setTimeout，ajax请求等都属于把进程放入异步队列的操作。当主进程为空时，再去执行异步队列中的任务。
比如下方代码
function loop() {
setTimeout(loop, 0)
}
loop();
虽然也是在不断循环一个操作。但本质上是不断地向异步队列中加入新任务，新的任务将在主进程为空的时候去执行，所以不会阻塞。
requestAnimationFrame
这是一个特别的异步任务，它不是被加入异步队列，而是加入页面渲染这边的队列中。它在渲染的三个步骤之前被执行。通常用来处理渲染相关的工作。不知道我在说啥？不要慌，我们继续往下讲
requestAnimationFrame 和setTimeout的差别
假设我们有一个元素 box，并且有一个 moveOnePixel 方法，作用是让这个元素向右移动 1 像素。我们分别使用requestAnimationFrame和 setTimeout执行
// 方法 1 requestAnimationFrame
function callback() {
moveOnePixel();
requestAnimationFrame(callback)
}
callback()
// 方法 2 setTimeout
function callback() {
moveOnePixel();
setTimeout(callback, 0)
}
callback()
两种方法都可以让 box 移动起来。但实际测试发现，使用 setTimeout移动的 box 要比 requestAnimationFrame速度快得多。这表明单位时间内 callback 被调用的次数是不一样的。
浏览器的even loop一文中作出如下解释
这是因为
setTimeout在每次运行结束时都把自己添加到异步队列。等渲染过程的时候（不是每次执行异步队列都会进到渲染循环）异步队列已经运行过很多次了，所以渲染部分会一下会更新很多像素，而不是 1 像素。requestAnimationFrame只在渲染过程之前运行，因此严格遵守“执行一次渲染一次”，所以一次只移动 1 像素，是我们预期的方式。
如果在低端环境兼容，常规也会写作
setTimeout(callback, 1000 / 60)来大致模拟 60 fps 的情况，但本质上setTimeout并不适合用来处理渲染相关的工作。因此和渲染动画相关的，多用requestAnimationFrame，不会有掉帧的问题（即某一帧没有渲染，下一帧把两次的结果一起渲染了）
简单来说，浏览器的渲染步骤不是每时每刻都在进行， setTimeout里设置的执行时间间隔为0，也就是说在没有其他进程干扰的情况下，js在不断执行把BOX移动1px的操作。但是渲染有一个最小间隔，通常情况下为16ms(待考证)。所以在执行渲染步骤之前，BOX已经被移动了多次。
所以，在页面渲染某个动画时，使用requestAnimationFrame更符合浏览器渲染的运转原理。requestAnimationFrame开启的动画可以使用cancelAnimationFrame停止
let id = null;
//一个动画函数
function animate() {
//一个完整的动作
//执行渲染动作，按帧更新animate函数创建的状态
id = window.requestanimationframe(animate)
}
//让动画停止
window.cancelAnimationFrame(id)
