本文通过分析React源码中的Fiber树和任务调度，探讨了浏览器帧率与动画流畅性之间的关系。通过实例展示了如何使用setTimeout和MessageChannel解决JavaScript任务导致的页面卡顿问题，并设计了一个简单的任务调度器，确保在一帧时间内执行多个任务并留出时间给浏览器绘制和响应用户交互。最后，实现了限制任务连续执行时间不超过5ms的优化策略，以保持60fps的帧率。
最近在看react源码，react构建fiber树这一块逻辑还比较好理解，但是一旦涉及到任务调度相关的逻辑，看起来是一头雾水。在参考了一些资料和react scheduler源码后，我决定来实现一个简单版的scheduler，相信跟着本文的思路实现一遍，就可以理解为什么react需要有scheduler这个东西来调度任务。
简单的背景知识：
我们知道现在大部分设备的帧率都是60fps,也就是说浏览器每16.7ms会绘制一次。如果页面上有一些动画，那么16.7s绘制一次，看起来是比较流畅的。
先来写一个简单的css动画：一个普通的div左右滑动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> #block {width: 50px;height: 50px;margin: 0 0;background-color: #ddd;animation: move 5s linear infinite;position: absolute;}@keyframes move {0% {left: 0;}25% {left: 100px;}50% {left: 200px;}75% {left: 100px;}100% {left: 0;}} </style>
</head>
<body><div id="block"></div>
</body>
</html>
使用谷歌浏览器的性能录制面板可以看到：
在主线程上，一帧的时间是16.7ms，我们放大看看一帧时间里面，浏览器做了什么：
完成一次绘制需要执行Schedule Style Recalculation, Recalculate Style, Layout, Pre-Paint, Paint, Composite Layers。这里我们不细究在每个阶段浏览器做了什么，只需要关注这个渲染是在主线程上进行，由CPU完成的就行了。通常每16.7ms浏览器会绘制一次，但是如果本轮事件循环有任务在执行，那么需要等任务执行完再进行绘制。如果任务耗时过长，绘制次数就会变少，也就是所谓“掉帧”。因为我们现在页面非常简单，没有js任务，所以浏览器每16.7ms绘制一次，动画看起来很流畅。
现在我们来加上一个按钮，点击之后会创建5个任务，每个任务耗时20ms，并且马上执行。
<body><button id="btn">click me</button>
</body>
绑定事件：
const works = [];
const btn = document.getElementById('btn');
btn.onclick = function () {for (let i = 0; i < 5; i++) {works.push(macroTask)}flushWork();
}
function macroTask(){const start = new Date().getTime();while (new Date().getTime() - start < 20) {}
}
function flushWork(){while(works.length){const work = works.shift();work.call(null);}
}
点击按钮会发现，正在滑动的div卡顿了一下，通过下图可以看到，浏览器直到5个宏任务完成后才会执行渲染，在这段时间里面，页面不能更新，也不能响应用户操作。
如果点击按钮要执行成千上百个任务，那么浏览器会卡死很长一段时间，这显然是不能接受的。最简单的改造方法是执行一个任务后，把后续的任务处理放到下一个事件循环，让浏览器可以在本轮事件循环执行绘制。精通浏览器原理的你肯定知道可以利用setTimeout来实现：
const works = [];
const btn = document.getElementById('btn');
btn.onclick = function () {for (let i = 0; i < 50; i++) {works.push(macroTask)}flushWork();
}
function macroTask(){const start = Date.now();while (Date.now() - start < 20) {}
}
function flushWork(){workLoop();
}
function workLoop(){const work = works.shift();if(work){work.call(null);// 只执行一个任务，后面的下个事件循环再处理setTimeout(workLoop, 0);}
}
打开控制台分析一下：
现在可以看到，现在每个宏任务都没有连在一起，它们在不同的事件循环里执行。每个任务完成后，浏览器都会执行一次绘制，就算要执行的任务非常多，动画也不会卡住不动了。
但是，仔细观察一下，后面的宏任务间隔好像都比较大，放大看间隔大概是4ms左右。我们现在一个任务的执行时间是20ms，超过了16.7ms，事实上页面已经有一点卡顿了。主线程资源这么紧张，每个事件循环居然还要浪费4ms，这肯定是不能接受的。很多人应该都听说过setTimeout的最小延时限制，大概意思就是虽然你是setTimeout零秒，实际上嵌套多层之后，至少要过4ms左右，宏任务才会进入到任务队列。
setTimeout不能用了，有其他替代方案吗？答案是有的，我们可以使用MessageChannel来把任务放到宏任务队列。 MessageChannel的用法就不详细介绍了，简单地说，就是利用这个api，我们可以监听一个message事件，当事件触发的时候，事件处理函数这个任务会加入到宏任务队列。对应我们的例子，我们就可以绑定onmessage的时候执行workLoop, 在workLoop里面只执行一个任务，如果还有任务没有执行，那就postMessage，在下一个事件循环继续处理。
const channel = new MessageChannel();
const port2 = channel.port2;
const port1 = channel.port1;
port1.onmessage = workLoop;
const works = [];
const btn = document.getElementById('btn');
btn.onclick = function () {for (let i = 0; i < 50; i++) {works.push(macroTask)}flushWork();
}
function macroTask(){const start = Date.now();while (Date.now() - start < 20) {}
}
function flushWork(){workLoop();
}
function workLoop(){const work = works.shift();if(work){work.call(null);port2.postMessage(null);}
}
重新执行后再分析一下，宏任务之间基本没有间隔了：
目前我们的最小任务单元的执行时间是20ms。因为超过了16.7ms会导致页面变卡顿，所以实际上我们应该确保单个任务不能超过16.7ms。假设经过合理的设计，我们的最小任务单元执行时间不会超过2ms（这里随机设置成1ms或2ms）。然后再来看看点击按钮后执行1000个任务会怎么样。
const channel = new MessageChannel();
const port2 = channel.port2;
const port1 = channel.port1;
port1.onmessage = workLoop;
const works = [];
const btn = document.getElementById('btn');
btn.onclick = function () {for (let i = 0; i < 1000; i++) {works.push(macroTask)}flushWork();
}
function macroTask(){const time = [1, 2]; const zeroOrOne = Math.round(Math.random());const start = Date.now();while (Date.now() - start < time[zeroOrOne]) {}
}
function flushWork(){workLoop();
}
function workLoop(){const work = works.shift();if(work){work.call(null);port2.postMessage(null);}
}
分析运行结果，可以看到现在浏览器绘制的帧率还是没有60fps，我们的任务占据主线程时间太长了。所以我们需要一种机制，使得在一帧的时间内尽可能执行多个任务，而且留有充足的时间给浏览器绘制页面和响应用户交互。
最终我们的设计方案是：在一个事件循环里面，我们只占用主线程5ms, 超过5ms就把主线程控制权交还给浏览器，在下一个事件循环处理任务。
具体思路：
声明一个全局队列taskQueue存放任务；
声明一个全局变量startTime表示任务调度的开始时间, 当接受到onmessage事件时，获取当前时间赋值给startTime，然后开始调度任务；
调度任务：从taskQueue队列中取出一个任务，获取当前时间currentTime, 计算currentTime - startTime，如果大于或等于5ms，说明调度任务时长已经达到5ms了，break出循环，如果队列里还有任务，postMessage交出主线程控制权，等下个事件循环再调度任务。
浏览器绘制完页面，响应用户交互后，在下一个事件循环再次调度任务，重新计算currentTime，startTime,此时它们的差值一定不会超过5ms, 取出一个任务执行，然后更新currentTime。再次进入while循环，判断currentTime - startTime是否大于5ms, 大于5ms就交出控制权，否则继续执行下一个任务。
改造后的代码：
const channel = new MessageChannel();
const port2 = channel.port2;
const port1 = channel.port1;
port1.onmessage = performWorkUntilDeadline;
const taskQueue = [];
let startTime = -1;
const frameYieldMs = 5; // 任务的连续执行时间不能超过5ms
let currentTask = null; // 用来保存当前的任务
btn.onclick = function () {for (let i = 0; i < 1000; i++) {taskQueue.push(macroTask)}// 在下个事件循环开始调度任务port2.postMessage(null);
}
function performWorkUntilDeadline() {startTime = performance.now(); // 更新开始时间let hasMoreWork = true;try {hasMoreWork = flushWork();} finally {currentTask = null;if(hasMoreWork) {port2.postMessage(null);}}
}
function flushWork(){return workLoop();
}
function workLoop() {// 这里用currentTask全局变量来保存当前任务看起来似乎有点丑。// 其实是为了后续实现任务优先级和任务插队功能，先不管，就这么写。currentTask = taskQueue[0];while(currentTask) {if(shouldYieldToHost()) {break;}currentTask.call(null);taskQueue.shift(); // 执行完的任务从队列中删除currentTask = taskQueue[0]; // 继续拿下一个任务}if(currentTask) {// 还有任务需要在下个事件循环处理return true;}
}
function shouldYieldToHost() {// 是否应该挂起任务const currentTime = performance.now();if(currentTime - startTime < frameYieldMs) {return false;}return true;
}
function macroTask(){const time = [1, 2]; const zeroOrOne = Math.round(Math.random());const start = performance.now();while (performance.now() - start < time[zeroOrOne]) {}
}
好了我们再看看运行结果：浏览器的帧率现在已经可以保持在60fps了，效果已经很不错了。但是目前我们的任务队列只是一个普通的先进先出队列，并没有实现优先级和任务插队功能。下一篇文章我们将继续跟着react的实现思路，用最小堆来实现优先队列。
最后
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
扫一扫
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
