react 填坑之旅（一）

性能优化 渲染

最近写react遇到一个问题，页面一打开后，需要渲染当前页面上的数据以及echarts。然后当用户点击日期选择器上的某一天时，datepicker层需要立刻消失，setState，showLoading，根据选中的时间发送ajax请求，当response回来后hideloading。

但是因为代码逻辑的问题，重现了这么一个场景，echarts的绘制阻塞了hideLoading的执行。也就是涉及到两个UI线程的优先级的问题。带着这个问题，查看了相关的资料。

1. renderLayerTree.

render tree->renderLayerTree->graphicsLayerTree

网页渲染的时候，会产生一棵render tree，但由于z-index和一些特殊元素如overflow，fixed元素等的存在，浏览器为了保证渲染的正确，真正渲染的时候不直接使用render tree，而是根据render tree的信息产生一棵对应的renderLayer tree(相当于一个平面，上面分布着render tree的节点)。同时如果有上述如z-index元素的存在，还会在上面产生一个或多个graphicsLayer tree，再基于graphicsLayer tree在不同平台产生新的layer，如在android 上layerAndroid tree。有两棵。一个在内核，一个在UI线程（决定于真正的渲染）。

layerAndroid tree益处在于：
每个layerAndroid相对独立，各自渲染后合并，相应的也就不会影响到其他部分，因此我们可以把一些元素抽出来形成一个单独的layer渲染。

但当使用不当，比如会产生多个layerAnroid tree.遍历和绘制layerAndroid tree的时间就会变得非常长，这个时候就会出现渲染变慢和卡顿的问题.

2. 产生graphicLayer tree的场景

• video元素
• canvas元素
• 插件如flash元素
• frame或iframe元素
• 网页元素有一些3d变换属性如translate3d，Preserve3D等
• 网页元素有backface-visibility:hidden属性
• 网页元素正在进行加速动画
• 网页使用了CSS Filter 【todo】
• Fixed元素
• 网页元素有overflow:scroll或者overflow:auto（产生滚动条的情况，与overflow:scroll一样）
• 网页元素使用了fixedBackgroundImage，这种情况会产生不止一个graphicsLayer
• 多个层，不同的z-index，导致overlap。此时需要注意的是，如果下层会产生graphicLayer，那么上层就必须产生。

3. 网页卡顿的可能原因

• transition3D，使得上层都会变成graphicsLayer。
• canvas .浏览器并不是对所有的canvas都加速的，有一个size的界限，过大过小不能加速的话，就会无意义，反而更卡
• 一些底部无意义的元素，如z-index为负，看不见，但是会导致上层都变为graphicsLayer
• overflow:auto,scroll，会导致浏览器产生一个scrollLayer,滑动的效率会较低
• css动画中非transform和opacity的都是不可以加速的动画，需要内核线程与UI线程配合不断提供新的内容去更新，而可以加速的动画只需UI线程即可，效率更高。

4. 之前提到的canvas及UI渲染线程的优先级的问题

让我们先看下canvas的原理。

把动画的一帧渲染出来，需要经过以下步骤：
1.计算：处理游戏逻辑，计算每个对象的状态，不涉及 DOM 操作（当然也包含对 Canvas 上下文的操作）。
2.渲染：真正把对象绘制出来。
- 2.1. JavaScript 调用 DOM API（包括 Canvas API）以进行渲染。
- 2.2. 浏览器（通常是另一个渲染线程）把渲染后的结果呈现在屏幕上的过程。

可以看到，当canvas及ui如hide,show这种展示到屏幕上的操作排队要执行的时候，先进行canvas的

to see

• 3d加速的界限
• css filter