网站建设资讯

NEWS

网站建设资讯

腾讯优测优分享|探索reactnative首屏渲染最佳实践-创新互联

腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~
此文主要与以下内容相关,希望对大家有帮助。

react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react native实现的界面进行持续优化。目标只有一个,在享受react native带来的新特性的同时,在体验上无限逼近原生实现。
作为一名前端开发,本文会从前端角度,探索react native首屏渲染最佳实践。
##1.首屏耗时计算方法
###1.1我们关注的耗时
优化首屏渲染耗时,需要先定义首屏耗时的衡量方法。将react native集成至原生app中时,可以将首屏耗时定义为如下
首屏耗时=react native上下文初始化耗时+首屏视图渲染耗时
其中,react native上下文初始化耗时为一个固定开销,通过将初始化过程提前至app启动后异步进行,在安卓端,这一耗时已经可以降低到约70ms。本文关注的是首屏视图渲染耗时,文中优化探索是在安卓端react native结合版app中进行,但其思路和方法,可以复用至iOS端。
###1.2渲染耗时衡量方法
关注首屏视图渲染耗时,需要理解react框架视图渲染流程,相应的需要了解其生命周期方法。下图是一张react组件完整的声明周期图,从图中可以看出,上方虚线框内为生命周期第一阶段,这个阶段完成初始化,并第一次渲染组件。左下角虚线框为组件运行和交互阶段,这里可能会再次渲染组件。右下角虚线框为第三阶段,组件这一阶段卸载消亡。

![](http://img.blog.csdn.net/20160906144533144?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

对应上述生命周期方法,我们在初始阶段首先渲染loading视图,并开始拉取数据。获取数据后,通过改变状态(state),触发视图的再次渲染,在屏幕绘制出视图。

![](http://img.blog.csdn.net/20160906144552822?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

结合上述分析,我们将首屏视图渲染耗时定义为如下
首屏视图渲染耗时=compontDidUpdate结束时间 – compontWillMount开始时间
##2.开启渲染优化探索之路
###2.1输出当前渲染耗时
既然已经明确了视图渲染耗时的计算方法,那么就可以打时间点日志输出这一耗时看看。这里查看耗时有两种方法。
使用调试模式,通过console.log,在chrome调试工具中输出时间差值
封装native层日志方法封装给react native层调用,将日志输出到app日志文件中。
推荐使用第二种方法,采用这种方法,可以以release模式运行app,输出结果与我们普通的安装运行app表现一致。
这时我们的耗时输出是怎样的呢?查看日志得知,在wifi环境下,荣耀4X手机上,渲染耗时为约700ms,加上react native上下文初始化时间约70ms耗时,整个界面的耗时需要约770ms。
那么原生app的实现中,发现tab渲染耗时是多少呢?通过打点发现,安卓端原生app实现中,发现tab从onCreateViewEx开始至onResume结束,耗时约100ms。
###2.2来吧,加上缓存
看到上述数据时,我的内心是有点崩溃的,说好的高性能呢?但是我并不慌,根据我的前端开发经验,我知道有一个大招还没有用上,那就是使用缓存数据。
react native为我们提供了AsyncStorage模块,AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统,它对于App来说是全局性的。相对于之前我们使用LocalStorage存储数据,在react native端,我们可以使用AsyncStorage作为数据存储解决方案。
在使用缓存之前,我们的视图渲染流程如下所示

![](http://img.blog.csdn.net/20160906144632214?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

![](http://img.blog.csdn.net/20160906144645457?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

上述流程中,每次渲染界面视图前,都需要等待网络请求。这里我们将请求数据缓存起来,渲染界面视图时,首先使用缓存数据渲染视图,同时发起网络请求,数据返回时再以新的数据渲染一遍。使用缓存之后的渲染流程如下图所示

![](http://img.blog.csdn.net/20160906144645457?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

上述流程中,当有缓存数据时,我们会快速拿到缓存数据渲染出界面视图。然后在网络请求返回数据时,再次触发render方法,以新数据再次渲染视图。
这里为了提升性能,避免多余的触发render方法,可以在shouldComponentUpdate方法中判断cache data和response data差异,仅当两份数据不一致时才再次触发render方法。同时,得益于react 框架的虚拟dom特性,在网络请求的数据返回再次触发render方法后,react native会计算dom diff并以此为依据来判定视图更新范围。
此时通过日志数据可以看到,在有缓存场景下,我们获取缓存时间耗时约在40ms,此时我们的渲染耗时下降至400ms。
###2.3接管轮播图
加入缓存优化后,我们将渲染耗时降低至400ms,但是仍与原生实现中耗时有较大差距。此时的优化进入了深水区,经过梳理界面视图,可以将视图划分为上部轮播图、中间部落列表和下部热门帖子三个模块,逐一优化。

![](http://img.blog.csdn.net/20160906144703074?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

在最初的版本中,我们是这么实现轮播组件的:在请求的返回结果中,取出轮播图集合,依次生成全部图片视图,并添加至轮播图容器视图中。最后监听容器视图的对应事件,设置当前显示的图片视图。
如下图所示,当结果数据中共有五张轮播图时,会有五个图片视图被添加至轮播图容器中。初始时仅首张图片视图可见,容器内滑动事件发生时,图片视图可见状态随之改变。

![](http://img.blog.csdn.net/20160906144716246?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

从上述过程可以看出一个明显的问题:对首屏来讲,轮播图容器内,非可见状态的其余图片视图的渲染是没有意义的。
既然已经找到了问题,优化是思路也就很自然:在从请求结果中获取轮播图集合后,不是生成全部图片视图,而是仅生成一份,将这一个图片视图添加至容器内,并为他设置当前图片的url地址。当容器内滑动事件发生时,不再是切换不同视图的可见状态,而是复用这一个图片视图,切换视图图片的url地址,其流程如下图所示。

![](http://img.blog.csdn.net/20160906144731934?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

采用这一方案,完全去除了非可见状态的图片视图的渲染耗时,同时,通过复用视图,也降低了对内存的占用。这一方案在理论上将渲染耗时和内存占用做到了最优,然而在实际运用中,会有一个体验的问题:当滑动发生时,才加载下一张图片并刷新图片视图,会导致容器内滑动事件的卡顿,使得滑动有阻滞感。
因此我们最终采用了一种折衷方案:当轮播图集合超过三张时,在容器内加入当前图片视图,同时提前加入当前图片的上一张和下一张图片视图。容器内滑动事件发生时,复用这三个视图,来设置这次事件对应的当前图片、上一张和下一站图片视图。
![](http://img.blog.csdn.net/20160906144750341?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

通过日志输出优化前后的耗时数据,采用这一方案时,在渲染耗时上降低了约30ms,此时我们的首屏渲染耗时下降到了约370ms。
###2.4为列表加特效
在发现tab界面中部,是子类别的部落列表。子类别数量通常是两个,每个子类别下一般有七至八个列表项,每个列表项由部落图标和部落名称组成。
![](http://img.blog.csdn.net/20160906144856380?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
最初的版本中,我们从请求结果数据中获取子类别下部落集合,以ScrollView为容器,依次创建列表项视图并添加至容器中。这样,当所有列表项渲染完成,该子类的部落列表才渲染完成,最初的实现示意如下所示。

![](http://img.blog.csdn.net/20160906144947360?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

通过上述过程可以发现,在部落列表渲染过程中,等待非可视区域的列表项的图片下载再渲染该视图,对于首屏是没有意义的。
结合对轮播图组件的优化经验,我们尝试延迟加载列表项视图。理想的状态是在首屏仅渲染可见的几个列表项,非可见区域的列表项,延迟渲染,流程如下所示

![](http://img.blog.csdn.net/20160906145004844?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

很快我们遇到了问题,在轮播图组件中,首屏仅显示第一张图片。但是在横向部落列表中,首屏应该渲染几个列表项呢?答案是我们无法提前确定,首屏可见的列表项,只有在渲染时,根据当前列表项在横向列表中的相对位置,才能计算出该项是否可见。
继续思考,虽然我们不能预知在首屏应该几个列表项,但是利用react native 提供的API方法,我们可以获取当前视图相对于容器的坐标位置。

![](http://img.blog.csdn.net/20160906145018813?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

利用measureLayout方法,在视图完成布局,触发其onLayout事件回调后,可以通过视图的measureLayout方法,传入容器节点,从而获得当前视图在容器中的相对位置。利用这一特性,结合我们的视图特点——列表项视图的尺寸是确定的,可以在初始时,将所有列表项视图渲染为这一特定尺寸的空视图,待所有空视图渲染完成后,获取视图在容器中相对位置,仅将可视区域内的列表项用真实视图重新渲染。
同时监听列表容器的滚动事件,在滚动事件回调中,计算视图在容器中的相对位置,当视图进入了可视区域时,再用真实视图替换空视图,上述流程如下所示

![](http://img.blog.csdn.net/20160906145129174?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

通过上述方案,我们可以实现列表项的延迟渲染特性,通过日志输出耗时时间,可以发现通过这一优化,渲染优化又可降低约30ms。
上述方案中,屏幕在首次渲染空白视图和再次渲染首屏可见列表项视图之间,有短暂闪动的感觉,为解决这一体验问题,可使用占位图方案替代空视图方案,即首先都用静态资源占位图来渲染列表项icon图,并延迟加载非可见列表项icon图,其方案如下所示

![](http://img.blog.csdn.net/20160906145141288?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
实现效果如下,首次渲染时均用占位图,首屏区域内的列表项icon视图依次下载并重新渲染。在采用这样实现后,解决了空视图带来的屏幕闪动问题,快速的完成初次渲染,实现了icon图片的延迟加载,渲染耗时稍有增加,相比空视图方案耗时增加约10ms,此时我们的首屏渲染耗时下降到了约350ms。

###2.5热门帖模块的归宿
发现tab视图下部还有一个模块,如下所示,是几条热门帖子的展示区域。对于首屏内容来说,这一模块整个都属于非可视区域,因此我们需要设法将这一块的耗时从首屏耗时中拿掉。

![](http://img.blog.csdn.net/20160906145241644?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

有了上面部落列表的优化经验,我们已经知道,在布局事件完成后,可以获取视图在容器内的相对位置,对于滚动视图如ScrollView,我们可以监听他的滚动事件,来判断视图距离可视区域的位置以决定是否渲染该视图。
为了优化体验,我们再给视图的渲染设置一个提前阈值aheadDistance,当视图距离可视区域还有aheadDistance单位时,提前渲染该视图,这一方法如下图所示
![](http://img.blog.csdn.net/20160906145230910?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

采用这一方案后,已经可以将热门帖子模块的渲染耗时从首屏耗时中去掉了,此时通过日志输出耗时分析,首屏渲染耗时下降到了约270ms。
那么这块的优化工作完成了吗?没有,在优化做完,回顾体验时,我们发现了这里仍存在体验问题。这一体验问题与发现tab的视图结构有关。在发现tab中,热门帖子模块,距可视区域底部的距离不远。因为本身距离可视区域底部很接近,所以ahead Distance的设置并没有起到预想的效果,导致发现tab界面向下滑动时,因为实时去渲染热门帖子模块,使得滑动不流畅,有阻滞感。
为了解决这一体验问题,继续对热门帖子模块做了定制的优化,最终对热门帖子模块做到了异步渲染。在首屏渲染时,还是将热门帖子渲染为空视图,然后将ahead Distance调大,使得空视图落在ahead Distance区域内,接着使用setTimeout技巧,异步的去计算该空视图在容器中位置,并将热门帖子真实视图渲染出来。
通过上述方案,将延迟渲染替换为异步渲染,在不增加渲染耗时的基础上,同时解决了滑动不流畅的体验问题,最终将首屏渲染耗时定格在约270ms。
##3.总结
react native框架给了我们新的能力,使得我们可以用javascript开发原生app。当我们走入react native应用的深水区,开始对他进行各方面细致的优化时,我们在原来web端积累的最佳实践依然有效,诸如缓存的使用、元素复用、延迟加载、异步加载等方法依然会起到很好的效果。
与此同时,对渲染耗时的优化也要兼顾使用的体验,我们应该追求的,不仅仅是快。而是在快的基础上,也有很好的使用体验。
优化探索到最后,我们将首屏渲染耗时定格在约270ms,加上react native初始化耗时约70ms,我们的首屏总耗时仍需约340ms,相比原生实现仍然存在差距。原生实现的渲染速度也是经过了层层的优化,而我们对react native最佳实践的探索也没有结束,欢迎大家指导、探讨。
文 / 腾讯   龚麒
_______________________________________________________________________________________
腾讯优测是专业的移动云测试平台,为应用、游戏、H5混合应用的研发团队提供产品质量检测与问题解决服务。不仅在线上平台提供自动化兼容性测试、云手机远程租用与调试、漏洞分析、自动化测试工具Xtest等多种质量检测工具,更为VIP客户配备了专家团队提供定制化综合测试解决方案。

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。

网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了潞州免费建站欢迎大家使用!
分享题目:腾讯优测优分享|探索reactnative首屏渲染最佳实践-创新互联
链接URL:http://njwzjz.com/article/dioiei.html