美文网首页react native
rn应用中的卡顿

rn应用中的卡顿

作者: DumpCicada | 来源:发表于2018-01-24 14:28 被阅读390次

Native与JavaScript交互原理图

Native与JavaScript交互原理图

卡顿的场景

rn应用界面的渲染是js驱动native完成的。js代码运行在javascript线程中, react-native组件的生命周期、api调用、触摸事件的处理等就是在这个线程上执行的;在复杂应用的root组件中,调用this.setState,触发子组件重新渲染,而这个过程很耗资源,容易引发卡顿。

js->native

路由切换操作:添加一个新的路由,Javascript线程需要读取这个场景所需要的所有组件,然后通过适当的命令发送给本地端,创建视图。这个过程会花费多个帧,引起卡顿

这是因为transition是由Javascript控制的。由此组件会在componentDidMount中做额外的计算,这可能会导航在transition卡顿的第二个原因.

native->js

响应触摸事件:界面发生的事件是native转发到js的。如果此时js正在执行耗时任务,那么就来不及响应这个事件。例如可能出现点击TouchableOpacity包裹的View时,透明度发生了变化,但js端的响应事件却相对滞后。

卡顿的规避措施

场景一

Slow navigator transitions Navigator动画由Javascript线程控制,转换过程的每一帧,Javascript thread需要将新的x位置发送给主线程。如果javascript 线程被冻结。它就不能做这些,那么这些帧就不会被更新,动画就变得断断续续。

一劳永逸的解决方案是将基于 Javascript的动画转变为基于main thread的动画 useNativeDriver 其他情况应该使用InteractionManager,为新的scene选择最少的内容数量以及动画过程。

在相同的时间里,Javascript线程上做了大量的工作,导致帧被删除;如果在动画期间,有大量的延迟类的工作,则可以考虑LayoutAnimation。Animated api当前计算每一帧都是基于Javascript线程,而LayoutAnimation利用了核心动画,不会受到JS线程和主线程丢帧的影响LayoutAnimtion仅适用于fire-and-forget动画(“静态”动画) - 如果动画需要被中断,则你需要使用Animated。

场景二

在一个sceen里,移动一个View(Scrolling, translating, rotating), UI线程掉帧。常见于,带透明背景的文本,在一个图片之上。或者它的alpha混合的情况。可以使用shouldRasterizeIOS和renderToHardwareTextureAndroid来改进性能。但最好不要乱用它,否则你的内存会被用完,在使用这个属性时,最好监控性能和内存的使用。如果你不计划移动一个View, 则把这些属性关闭。

场景三

改变一个图片大小的动画,UI线程掉帧。在iOS, 每一次你调整一个图片组件的宽和高,它都是从原始图片中re-croped and scaled。这个过程非常昂贵,特别是对于大图来说。代替的, 我们可以使用transform: [{scale}]样式属性动画的改变大小,比如轻触一个图片,然后变为全屏。

场景四

My TouchableX view isn’t very responsive。有时,如果我们在相同的帧里改变透明度和颜色,以响应触摸事情。我们可能在onPress返回之后看不到作何的响应。如果onPress里有一个setState, 它引发大量的工作,并且有一些帧被删除掉,这时就会出现这种情况。一种解决方案是,将作何的动画包装在requestAnimationFrame处理器中。

相关文章

  • rn应用中的卡顿

    Native与JavaScript交互原理图 卡顿的场景 rn应用界面的渲染是js驱动native完成的。js代码...

  • 应用程序的卡顿

    一、卡顿原理 1、应用程序卡不卡顿,指的是APP的流畅度。手机每秒钟显示60次画面(单位fps,Frames Pe...

  • 应用卡顿优化

    概要 应用运行时的卡顿问题非常影响用户体验,严重降低产品表现力,本文将介绍应用卡顿原因以及分析方法等等。 卡顿问题...

  • Android中的卡顿现象

    Android性能优化三个方面 Android的渲染机制,内存与GC,电量优化 1.Android渲染机制 垂直同...

  • Android 检测UI卡顿

    Android 检测UI卡顿 相关工具代码可以在这里找到:BlockDetect 检测应用在UI线程的卡顿,打印出...

  • iOS开发中的卡顿分析

    市面上的iOS卡顿分析方案有三种:监控FPS、监控RunLoop、ping主线程。 方案一:监控FPS 一般来说,...

  • SysTrace Andorid UI性能优化开篇

    保证应用流畅度,是指保证应用在使用过程中能持续提供每秒60帧的运行态。如果低于60帧每秒,就会出现视觉上的卡顿效果...

  • React Native 拆包实践5 - 按需加载js modu

    首先,明确一下需求。App启动时加载一个RN的主应用,当点击主应用中的一个Button后,打开一个RN子应用,这个...

  • 写作的卡顿

    说了那么怕奶, 然后那时候我就不怕, 我也怕, 然后如何改变? 其实这种意思解读思路端的你对整个。 每个人都是一个...

  • 在现有的原生应用中嵌入React Native页面(ios版)

    通常情况下我们有两种方式来构建一个使用RN技术的应用: RN包原生。应用入口由RN控制,页面跳转逻辑也由RN主导,...

网友评论

    本文标题:rn应用中的卡顿

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