超级会员免费看
本文探讨了React Fiber如何解决JavaScript引擎与渲染引擎互斥导致的页面卡顿问题。Fiber是React的重大优化，通过任务拆分、优先级分配和异步处理，实现了更新的中断与恢复，提高了用户界面的响应性。Fiber通过重新实现React核心算法，引入了新的数据结构，使得React能够更智能地调度渲染任务。
一、问题
JavaScript引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待
如果 JavaScript 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿
而这也正是 React 15 的 Stack Reconciler所面临的问题，当 React在渲染组件时，从开始到渲染完成整个过程是一气呵成的，无法中断
如果组件较大，那么js线程会一直执行，然后等到整棵VDOM树计算完成后，才会交给渲染的线程
这就会导致一些用户交互、动画等任务无法立即得到处理，导致卡顿的情况
订阅专栏 解锁全文
扫一扫
1111
到【灌水乐园】发言
