美文网首页React Native学习
react-native性能优化

react-native性能优化

作者: Hozan | 来源:发表于2017-09-13 18:12 被阅读651次

使用React Native替代基于WebView的框架来开发App的一个强有力的理由,就是为了使App可以达到每秒60帧(足够流畅),并且能有类似原生App的外观和手感。因此我们也尽可能地优化React Native去实现这一目标,使开发者能集中精力处理App的业务逻辑,而不用费心考虑性能。但是,总还是有一些地方有所欠缺,以及在某些场合React Native还不能够替你决定如何进行优化(用原生代码写也无法避免),因此人工的干预依然是必要的。 

一直以为ReactNative很牛逼,一套代码适配多个平台,研究了RN差不多一个月了,感觉从性能上很难达到原生的效果,但是简单的界面和功能从效果上看已经接近原生甚至超过原生的效果了,复杂的功能和界面在性能上确实很难接近原生,毕竟新技术还是需要沉淀的,而原生开发还是不可能被RN取代,毕竟RN不是万能的。Anyway,ReactNative很适合前端开发人员学习。

中文网对RN性能优化方面的讲解:

性能

这里记录一下几个重点:

(1)开发模式 (dev=true)

有个小技巧可以在发布时屏蔽掉所有的console.*调用。React Native中有一个全局变量__DEV__用于指示当前运行环境是否是开发环境。我们可以据此在正式环境中替换掉系统原先的console实现。

__DEV__

_DEV_=true即开发模式下,JavaScript线程的性能是很糟糕的,因为有许多工作需要在运行的时候去做,譬如使你获得良好的警告和错误信息,又比如验证属性类型(propTypes)以及产生各种其他的警告。

(2)缓慢的导航器(Navigator)切换

新的React Navigation库的一大目标就是为了解决这个问题。React Navigation中的视图是原生组件,同时用到了运行在原生线程上的Animated动画库,因而性能表现十分流畅。

(3)ListView初始化渲染太慢以及列表过长时滚动性能太差

这是一个频繁出现的问题。因为iOS配备了UITableView,通过重用底层的UIViews实现了非常高性能的体验(相比之下ListView的性能没有那么好)。用React Native实现相同效果的工作仍正在进行中,但是在此之前,我们有一些可用的方法来稍加改进性能以满足我们的需求。

initialListSize

这个属性定义了在首次渲染中绘制的行数。如果我们关注于快速的显示出页面,可以设置initialListSize为1,然后我们会发现其他行在接下来的帧中被快速绘制到屏幕上。而每帧所显示的行数由pageSize所决定。

pageSize

在初始渲染也就是initialListSize被使用之后,ListView将利用pageSize来决定每一帧所渲染的行数。默认值为1 —— 但是如果你的页面很小,而且渲染的开销不大的话,你会希望这个值更大一些。稍加调整,你会发现它所起到的作用。

scrollRenderAheadDistance

“在将要进入屏幕区域之前的某个位置,开始绘制一行,距离按像素计算。”

如果我们有一个2000个元素的列表,并且立刻全部渲染出来的话,无论是内存还是计算资源都会显得很匮乏。还很可能导致非常可怕的阻塞。因此scrollRenderAheadDistance允许我们来指定一个超过视野范围之外所需要渲染的行数。

removeClippedSubviews

“当这一选项设置为true的时候,超出屏幕的子视图(同时overflow值为hidden)会从它们原生的父视图中移除。这个属性可以在列表很长的时候提高滚动的性能。默认为false。(0.14版本后默认为true)”

这是一个应用在长列表上极其重要的优化。Android上,overflow值总是hidden的,所以你不必担心没有设置它。而在iOS上,你需要确保在行容器上设置了overflow: hidden。

中文网推荐了一个Android性能调试:

调试Android UI性能

在这里推荐一个大神的简书博客@lyxia_ios,如果你学RN,可以多关注,绝对有帮助!

在推荐几个性能优化的链接,在此做记录,老是去翻很麻烦:

React Native性能优化:预加载和缓存View

React 源码剖析系列 - 不可思议的 react diff

深度剖析:如何实现一个 Virtual DOM 算法

携程是如何做React Native优化的

React Native 核心渲染流程分析(1) - 初识组件系统

React Native 性能优化技巧经验详解

相关文章

  • React Native 知识点整理

    2018.5.2更新:React-Native通用化建设与性能优化:https://ivweb.io/topic/...

  • react-native性能优化

    使用React Native替代基于WebView的框架来开发App的一个强有力的理由,就是为了使App可以达到每...

  • react-native 性能优化

    什么样的app才是一个优秀的app呢? 安装包的体积小 启动速度快 使用流畅、不卡顿 用户交互友好 报错或者闪退次...

  • react-native 性能优化

    拆包优化网络优化列表优化

  • Android性能优化 - 消除卡顿

    性能优化系列阅读 Android性能优化 性能优化 - 消除卡顿 性能优化 - 内存优化 性能分析工具 - Tra...

  • Android性能优化 - 内存优化

    性能优化系列阅读 Android性能优化 性能优化 - 消除卡顿 性能优化- 内存优化 性能分析工具 - Trac...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • Awesome Extra

    性能优化 性能优化模式 常见性能优化策略的总结 Spark 性能优化指南——基础篇 Spark 性能优化指南——高...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

网友评论

    本文标题:react-native性能优化

    本文链接:https://www.haomeiwen.com/subject/xwllsxtx.html