记一次ReactNative优化

这是一个试水项目,是找的代码做二次开发,在中低端手机上运行,滑动列表有点卡。

代码到手后总体浏览了一下,基本没有什么复杂计算,应该是对象创建和布局绘制占大头。

具体找到对应界面的样式和组件代码后,确实代码为了布局容易,层次嵌套比较多,样式书写简单直接,可以透明的容器都填充了颜色,经过一番调整,主要修改样式,部分扁平化层级后,问题解决。

这里不打算写具体修改的内容,原生平台的开发手册里都会有layout,overdraw和gpu profile相关的内容,里面有写的很好的指引说明。

(这里还改了react-navigation-stack里的StackViewCard,因为当时的版本,它的背景设置不了透明,本想略去的,因为本质还是改样式,但毕竟动到了三方组件里面,还是补充说明一下)


优化并不都是高深复杂的事情,很多时候认真做好基础的事情就已经能满足大部分需求。

看起来外在表现一样,可能对应的内在在代码不一样,优化在于用心。


overdraw对比 gpu对比
修改前overdraw 修改后overdraw 修改前gpu 修改后gpu

评论