[关闭]
@lizlalala 2016-07-13T02:13:32.000000Z 字数 1715 阅读 819

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的时间就会变得非常长,这个时候就会出现渲染变慢和卡顿的问题.

Paste_Image.png

2. 产生graphicLayer tree的场景

3. 网页卡顿的可能原因

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

让我们先看下canvas的原理。

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

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


to see

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注