关于React Native项目在android上UI性能调试实践

时间:2022-05-21 12:41:32

我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到。要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是统一处理的,这意味着你没办法像iOS那样*。不过有些时候,你还是可以想办法提升应用的性能(有的时候问题根本不是出在原生代码上!)

要想解决应用的性能问题,第一步就是搞明白在每个16毫秒的帧中,时间都去哪儿了。为此,我们会使用一个标准的Android性能分析工具systrace,不过在此之前……

请先确定JS的开发者模式已经关闭!

你应该在应用的日志里看到__DEV__ === false, development-level warning are OFF, performance optimizations are ON等字样(你可以通过adb logcat来查看应用日志)

使用Systrace进行性能分析

Systrace是一个标准的基于标记的Android性能分析工具(如果你安装了Android platform-tool包,它也会一同安装)。被调试的代码段在开始和结束处加上标记,在执行的过程中标记会被记录,最后会以图表形式展现统计结果。包括Android SDK自己和React Native框架都已经提供了标准的标记供你查看。

收集一次数据

注意:

Systrace从React Native v0.15版本开始支持。你需要在此版本下构建项目才能收集相应的性能数据。

首先,把你想分析的、运行不流畅的设备使用USB线链接到电脑上,然后操作应用来到你想分析的导航/动画之前,接着这样运行systrace:

$ <AndroidSDK所在目录>/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <你的应用包名>

对于此命令做一个简单的说明:

  • time参数控制本次数据收集的持续时间,单位是秒。
  • schdgfx, 和view是我们所关心的Android SDK内置的tag(标记的集合):schd提供了你的设备的每个CPU核心正在做什么的信息,gfx提供了你的图形相关信息,譬如每帧的时间范围,而view提供了一些关于视图布局和渲染相关性能的信息。
  • -a <你的应用包名>启用了针对应用的过滤。在这里填写你用React Native创建的应用包名。你的应用包名可以在你应用中的AndroidManifest.xml里找到,形如com.example.app

译注:实际上,AndroidManifest.xml里的应用包名会被app/build.gradle里的applicationId取代。如果二者不一致,应当以app/build.gradle里的为准。

一旦systrace开始收集数据,你可以操作应用执行你所关心的动画和操作。在收集结束后,systrace会给你提供一个链接,你可以在浏览器中打开这个链接来查看数据收集的结果。

查看性能数据

在浏览器中打开数据页面(建议使用Chrome),你应该能看到类似这样的结果:

关于React Native项目在android上UI性能调试实践

提示: 你可以使用WSAD键来滚动和缩放性能数据图表。

启用垂直同步高亮

接下来你首先应该启用16毫秒帧区间的高亮。在屏幕顶端点击对应的复选框:

关于React Native项目在android上UI性能调试实践

然后你应该能在屏幕上看到类似上图的斑马状条纹。如果你无法看到这样的条纹,可以尝试换一台设备来进行分析:部分三星手机显示垂直同步高亮存在已知问题,而Nexus系列大部分情况都相当可靠。

找到你的进程

滚动图表直到你找到你的应用包名。在上面的例子里,我正在分析com.facebook.adsmanager,由于内核的线程名字长度限制,它会显示成book.adsmanager

在左侧,你应该能看到一系列线程对应着右边的时间轴。有3到4个线程是我们必须关注的:UI线程(名字可能是UI Thread或者是你的包名), mqt_jsmqt_native_modules。如果你在Android 5.0以上版本运行,我们还需要关注Render(渲染)线程。

UI 线程

标准的Android布局和绘制都在UI线程里发生。右侧显示的线程名字会是你的包名(在我的例子里是book.adsmanager)或者UI Thread.你在这个线程里看到的事件可能会是一些Choreographertraversals或者DispatchUI

关于React Native项目在android上UI性能调试实践

JS线程

这是用于执行JavaScript代码的线程。根据Android系统版本或者设备的不同,线程名可能是mqt_js或者<...>。如果看不到对应的名字的话,寻找类似JSCallBridge.executeJSCall这样的事件。

关于React Native项目在android上UI性能调试实践

原生模块线程

这里是用于原生模块执行代码(譬如UIManager)的线程,线程名可能是mqt_native_modules<...>。在后一种情况下,寻找类似NativeCallCallJavaModuleMethod, 还有onBatchComplete这样的事件名:

关于React Native项目在android上UI性能调试实践

额外的:渲染线程

如果你在使用Android L(5.0)或者更高版本,你应该还会在你的应用里看到一个渲染线程。这个线程真正生成OpenGL渲染序列来渲染你的UI。这个线程的名字可能为RenderThread或者<...>,在后一种情况下,寻找类似DrawFramequeueBuffer这样的事件:

关于React Native项目在android上UI性能调试实践

寻找导致卡顿的罪魁祸首

一个流畅的动画应该看起来像这样:

关于React Native项目在android上UI性能调试实践

每个背景颜色不同的部分我们称作“一帧”——记住要渲染一个流畅的帧,我们所有的界面工作都需要在16毫秒内完成。注意没有任何一个线程在靠近帧的边界处工作。类似这样的一个应用程序就正在60FPS(帧每秒)的情况下流畅表现。

如果你发现一些起伏的地方,譬如这样:

关于React Native项目在android上UI性能调试实践

注意在上图中JS线程基本上一直在执行,并且超越了帧的边界。这个应用就没法以60FPS渲染了。在这种情况下,问题出在JS中。

你还有可能会看到一些类似这样的东西:

关于React Native项目在android上UI性能调试实践

在这种情况下,UI和渲染线程有一些重负荷的工作,以至于超越了帧的边界。这可能是由于我们每帧试图渲染的UI太多了导致的。在这种情况下,问题出在需要渲染的原生视图上。

并且,你还应该能看到一些可以指导接下来优化工作的有用的信息。

JS的问题

如果你发现问题出在JS上,在你正在执行的JS代码中寻找线索。在上面的图中,我们会发现RCTEventEmitter每帧被执行了很多次。这是上面的数据统计放大后的内容:

关于React Native项目在android上UI性能调试实践

这看起来不是很正常,为什么事件被调用的如此频繁?它们是不同的事件吗?具体的答案取决于你的产品的代码。在许多情况下,你可能需要看看shouldComponentUpdate的介绍。

TODO: 我们还在准备更多的JS性能分析的工具,会在将来的版本中加入。

原生UI问题

如果你发现问题出在原生UI上,有两种常见的情况:

  1. 你每帧在渲染的UI给GPU带来了太重的负载,或者:
  2. 你在动画、交互的过程中不断创建新的UI对象(譬如在scroll的过程中加载新的内容)

GPU负担过重

在第一种情况下,你应该能看到UI线程的图表类似这样:

关于React Native项目在android上UI性能调试实践

注意DrawFrame花费了很多时间,超越了帧的边界。这些时间用来等待GPU获取它的操作缓存。

要缓解这个问题,你应该:

  • 检查renderToHardwareTextureAndroid的使用,有这个属性的View的子节点正在进行动画或变形会导致性能大幅下降(譬如Navigator提供的滑动、淡入淡出动画)。
  • 确保你没有使用needsOffscreenAlphaCompositing,这个默认是关闭的,因为它在大部分情况下都会带来GPU消耗的大幅提升。

如果这还不能帮你解决问题,你可能需要更深入的探索GPU到底在做什么。参见Tracer for OpenGL ES

在UI线程创建大量视图

如果是第二种情况,你可能会看到类似这样的结果:

关于React Native项目在android上UI性能调试实践

注意一开始JS线程工作了很久,然后你看到原生模块线程干了些事情,最后带来了UI线程的巨大开销。

这个问题并没有什么简单直接的优化办法,除非你能把创建UI的步骤推迟到交互结束以后去进行,或者你能直接简化你所要创建的UI。React Native小组正在架构层设法提供一个方案,使得新的UI视图可以在主线程之外去创建和配置,这样就可以使得交互变得更加流畅。

关于React Native项目在android上UI性能调试实践的更多相关文章

  1. react native项目在ios上运行测试,亲测

    参考文章:https://segmentfault.com/a/1190000014416132 说明:参考文章中有对AppDelegate.m文件的操作,我的RN版本是0.57.8未设置,也可成功运 ...

  2. 安装android Studio和运行react native项目(基础篇)

    ANDROID_HOME环境变量 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径. 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设 ...

  3. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  4. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  5. React Native 项目实战-Tamic

    layout: post title: React Native 项目实战 date: 2016-10-18 15:02:29 +0800 comments: true categories: Rea ...

  6. React Native移植原生Android

    (一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...

  7. React Native 项目整合 CodePush 全然指南

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...

  8. Expo大作战&lpar;三&rpar;--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  9. 技术实践丨React Native 项目 Web 端同构

    摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...

随机推荐

  1. js获取当前坐标

    <script type="text/javascript"> var position_option = {enableHighAccuracy: false,max ...

  2. List&period;Sort以及快速排序ZZ

    经常看到有人因为使用.net中的集合类处理海量数据时性能不够理想,就武断的得出.net不行,c#也不行这样的结论.对于.net framework这样的类库来说,除了性能以外,通用性和安全性同样重要, ...

  3. 进程控制之exit函数

    进程有下面5种正常终止方式: (1)在main函数内执行return语句.这等效于调用exit. (2)调用exit函数.此函数有ISO C定义,其操作包括调用各终止处理程序(终止处理程序在调用ate ...

  4. NodeJS 初学之安装配置环境

    [TOC] 1.环境安装 操作系统: Ubuntu 16.04.2 LTS 1.1安装nvm ryan@ryan-900X5L:~/temp$ curl https://raw.githubuserc ...

  5. &lbrack;转载&rsqb;如何在ubuntu上使用github

    来源:https://blog.csdn.net/tina_ttl/article/details/51326684 https://blog.csdn.net/u013551462/article/ ...

  6. MD5 SHA1 SHA256 SHA512 SHA1WithRSA 的区别

    MD5 SHA1 SHA256 SHA512 这4种本质都是摘要函数,不通在于长度  MD5 是 128 位,SHA1  是 160 位 ,SHA256  是 256 位,SHA512 是512 位. ...

  7. Highcharts X轴纵向显示

    xAxis: { categories: ['苹果', '橘子', '梨', '葡萄', '香蕉'], labels:{ rotation: 90, style:{ fontSize: '13px', ...

  8. &lbrack;原创&rsqb; Keil uVision5 下载程序 add flash programming algorithm选项缺少需要的算法解决办法

    MDK开发环境从V4升级到V5后,支持包不再是集成到开发环境当中,而是封装在PACK中,需要自行安装,比较麻烦. 搭建MDK开发环境以及破解的方法,在前面的文章中有详细说明,这里不再赘述,有兴趣的可以 ...

  9. JavaBean 规范

    JavaBean是公共Java类,需要满以下条件: 1.所有属性为private2.提供默认无参构造方法3.提供getter和setter4.实现serializable接口 具体为: (1)Java ...

  10. Java反序列化漏洞之殇

    ref:https://xz.aliyun.com/t/2043 小结: 3.2.2版本之前的Apache-CommonsCollections存在该漏洞(不只该包)1.漏洞触发场景 在java编写的 ...