简介

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时代的大众验证