rn应用中的卡顿

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处理器中。