超级会员免费看
本文详细探讨了JavaScript中requestAnimationFrame（rAF）与setTimeout的区别，通过讲解渲染进程的任务调度系统和Chromium的优化策略，解释了为何推荐使用rAF。文章介绍了从单消息队列的队头阻塞问题，到Chromium如何通过引入多优先级队列、动态调度策略和权重机制来提升动画性能的过程。
我们都知道，要想利用JavaScript实现高性能的动画，那就得使用requestAnimationFrame这个API，我们简称rAF，那么为什么都推荐使用rAF而不是setTimeOut呢？
要解释清楚这个问题，就要从渲染进程的任务调度系统讲起，理解了渲染进程任务调度系统，你自然就明白了rAF和setTimeOut的区别。其次，如果你理解任务调度系统，那么你就能将渲染流水线和浏览器系统架构等知识串起来，理解了这些概念也有助于你理解Performance标签是如何工作的。
要想了解最新Chrome的任务调度系统是怎么工作的，我们得先来回顾下之前介绍的消息循环系统，我们知道了渲染进程内部的大多数任务都是在主线程上执行的，诸如JavaScript执行、DOM、CSS、计算布局、V8的垃圾回收等任务。要让这些任务能够在主线程上有条不紊地运行，就需要引入消息队列。
在前面的《16 | WebAPI：setTimeout是如何实现的？》这篇文章中，我们还介绍了，主线程维护了一个普通的消息队列和一个延迟消息队列，调度模块会按照规则依次取出这两个消息队列中的任务，并在主线程上执行。为了下文讲述方便，在这里我把普通的消息队列和延迟队列都当成一个消息队列。
新的任务都是被放进消息队列中去的，然后主线程再依次从消息队列中取出这些任务来顺
订阅专栏 解锁全文
扫一扫
929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
