React Fiber性能优化

简介

react早期的优化都是停留在js层面，虚拟dom，注入减少组件复杂度的Stateless,减少向下diff的规模，减少diff的成本，再react16的时候，优化到了浏览器渲染机制层面。基于EventLoop机制

基本原理

1 .大量分配很多任务，他的处理速度就下降，但是如果把很多相同的任务放在一起。把一个长时间的任务打散，分解成很多小任务，可以执行非常快。
1.1 .一次执行插入10000个节点的插入操作，花费0.1s，但是分批插入，每次操作100个节点，一共100次，性能异常的好
2 .fiber算法分为两个阶段，第一段就是创建dom，并且标记各种任务，第二阶段才执行任务
3 .执行任务时候，先进行优先插入dom或移动操作，然后时属性样式操作，等其他比较花费时间的操作
4 .dom插入操作移除变成批处理，样式属性也变成批处理，然后还有一个异步模式的时间调度器

5 .本来的eventloop会在繁忙的状态下让页面卡顿，所以这里做了一个时间调度器
6 .requestidCallbac会根据参数的不同，再有限时间内安排一定量的js任务，从而不影响视图，事件回调，也可以强制在浏览器不段更新视图的时候，强制中断这个行为，立即插入我们的react js逻辑
7 .所以可以在requerstidCallback中中加入一个Workloop的方法，他每接触一个fiber,就判断一下当前时间，看是否有空闲时间让他执行下一个操作，如果没有时间就把他放到队列中去，把控制权让渡给视图渲染，下次requestidCallback唤起时，就将队列从刚才那个fiber取出来，执行工作。

8 .浏览器是单线程，将GUI描绘，时间器处理，js执行，远程资源加载统统放在一起，只有当他做完一件事才会继续下一件事，如果有足够的时间，浏览器是会对我们的代码进行编译优化的，一些dom操作也会进行reflow操作
9 .本质就是渲染-执行任务--渲染-执行任务--渲染--执行任务
10 .其中有很多任务我们是可以控制的，有的任务不可控制。比如setTiemout,资源加载时间不可控制，但是有的js我们是可以控制的，可以让他分派执行，task的时间不宜过长，这样浏览器就有足够的时间来优化js代码与修正reflow
11 .总之就是让浏览器休息好，浏览器就能跑的更快

如何让代码断开并重启,也就是冻结任务，然后再拉起来任务

1 .react之前的代码时栈调度器，但是他的坏处不能随机break，continue掉。如果我们break后我们还要重新执行，我们需要一种链表的结构，而不是栈
2 .链表是对异步非常友好的，链表再循环的时候不用每次进入递归函数，重新生成之心法国上下文，变量对象，激活对象

3 .如何决定每次更新的数量

1 .react15的时候，每次更新都是从根组件或state后的组件开始，更新整个子树，我们唯一能做的就是再某个节点中使用SCU断开一部分的更新，或者是优化SCU的比较效率
2 .react16则是将虚拟dom转化成fiber节点，首先规定一定时间内，再这个时间内可以转换多少个fiberNode，就更新多少个
3 .因此第一阶段就是将虚拟dom转换为fiber，fiber转换成组件实例或者真实DOM，fiber转换成后两者会明显消耗时间，需要计算还剩下多少时间，并且转换实例还需要一些钩子函数，
4 .总的来说就是每次会算出两个时间端，一个是自己的，一个是浏览器的，requestAnimationFrame能帮助我们解决第二个时间段，从而保证整体都是60帧或者75帧流畅运行

v2-e1ba24e51c372e7c824bdf4df5a41555_r.jpg

5 .任务系统还有另一个存在意义，保证一些任务优先执行，某些任务是在另一些任务之前。我们称之为任务分拣。这就像快递的仓库管理一样，有了归类才好进行优化。比如说，元素虚拟DOM的插入移动操作必须在所有任务之前执行，移除操作必须在componentWillUnmount后执行。这些任务之所以是这个顺序，因为这样做才合理，都经过高手们的严密推敲，经过React15时代的大众验证

React Fiber

1 .一次更新将被分成多片完成。所以完全有可能一个更新任务还没有完成，就被另一个更高优先级的更新打断。这时候，优先级高得更新任务会优先处理完。而低级更新任务所作的工作则会完全作废，然后等待机会从头再来。componentWillUpdate函数会被在调用一次
2 .render phase ,commmit phase
3 .在render phase中，react fiber就会找出需要更新哪些dom,这个阶段是可以被打断的，而到了第二阶段commit phase，就一鼓作气把dom更新完，绝不会被打断
4 .这两个阶段的分界点就是render函数。
5 .之前的react函数中，每个生命周期函数在一个加载或者更新过程中绝对只会被调用一次。在react fiber中，不再是这样了，第一阶段中的生命周期函数在一次加载和更新过程中可能被多次调用