美文网首页
react-native RN ListView 性能解决方案

react-native RN ListView 性能解决方案

作者: janiokq | 来源:发表于2018-11-22 14:07 被阅读0次

    # react-native-nlist 

    react-nativ  的 ListView 从rn 这个跨平台框架诞生 到目前为止 一直 被 开发者 诟病,卡顿 视图不回收 内存爆炸 滑动不流畅  等问题 虽然官方有出  FlatList 带有视图重用的

    组件但是  性能表现  一滚动 内存疯狂涨  cpu 占用 超过 100% 而且 列表过长 快速滑动 会有 渲染空白的 问题 (由于RN的渲染通知机制  快速滑动 需要大量计算 触发渲染 cpu占用过高 而且js单线程 再加上 需要和原生交互 等等 性能消耗问题 导致 ) 听说fb有要重构rn的消息 但是不知道 这次 框架核心设计 是否和原来的 有质的提升

    ListView 性能解决方案  原生代码实现  滑动流畅不卡顿  内存回收  视图重用  上拉刷新  下拉加载  支持本地 自定义刷新动画    支持itemView动态 高度

    性能表现  优于 目前所有 列表组件。

    android  demo apk 文件 下载

    github地址 react-native-nlist

    ### IOS实现

    使用 UITabView

    基于  react-native-tableview 做了优化内存  api封装 添加MJRefresh 封装刷新 加载事件 等

    ### Android 实现

    Android 使用 Recyclerview 实现  自己编写的一套 视图模板重用逻辑 加上  滚动事件  下拉刷新 下拉刷新  SmartRefresh 等封装

    ### 性能测试

    #### ios  使用 iphone 6s    10015 条数据的列表,大量的图片.  而且图片没有使用  [SDWebImage] 缓存库和内存缓存优化

    我疯狂的滑动列表到 4679条数据  这个时候 内存的使用量 是 111m 附图中也可以看到 cpu 使用情况 整个过程最高没有超过 34% cpu占用率

    #### Android  使用 小米6  同意 10015 条数据的超长列表, 和大量图片资源.  而且图片没有使用  [Glide] 缓存库和内存缓存优化

    我疯狂的滑动列表到 2569条数据    Android  的列表滚动有最大阈值限制不像苹果是一个加速过程 越滑滚动越越快 当我滑到2千多条数据的时候已经用了2分钟的样子    手痛划不动了  ~~(╯﹏╰)    这是 内存使用情况  123 MB 

    相关文章

      网友评论

          本文标题:react-native RN ListView 性能解决方案

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