当前播放: React Native如何避免掉帧?
00:00 / 00:00
    1.0x
    • 2.0x
    • 1.5x
    • 1.25x
    • 1.0x
    • 0.5x
    网页全屏
    全屏
    00:00
    付费课程,可试看

    React Native如何避免掉帧?

    吴泞含 美菜网前端工程师
    200次播放
    在ReactNative技术栈逐渐成熟稳定的当下,应用开发者在关心开发效率的同时,逐渐会有更高层次的性能要求。说到性能要求,掉帧就是一个避不开的话题了。因此,今天这节课我们就从掉帧现象出发,着重分析下产生掉帧的原理,以及如何解决掉帧的问题并提供解决思路。内容看点掉帧产生的原理是什么?如何避免掉帧?讲师介绍吴泞含,美菜网前端工程师。擅长RN应用的监控指标方向探索、性能调优以及平台体系化建设。
    登录 后留言

    精选留言(1)

    • 那风在极客
      归根结底,是要减轻 bridge 的负担。

      避免重新渲染,也就避免了过多不必要的数据通过桥传递给原生,不过总是使用类似 shouldComponentUpdate 之类的技术来避免重新渲染的,会影响开发效率和开发体验,我们只有在监测到某个页面有明显的性能问题,才会使用。

      使用 InteractionManager 是为了避免用户操作时重新渲染 UI,同样减轻了桥的负担。用户操作时,譬如滑动列表,会产生大量的触屏事件,这些事件会通过桥传递给 React 侧处理,如果此时再将渲染数据通过桥传递给原生,就会造成阻塞,导致卡顿。所以需要等待用户行为结束,再将渲染数据发送给原生侧,刷新 UI。不过,我们更倾向于将手势,动画封装到原生组件中,由原生侧处理用户行为。


      2021-01-20
      2
    收起评论
    我的每日一课VIP
    每日一课VIP
    0.1元 畅看850+技术视频
    开通
    相关推荐
    相关专题
    1505
    38:53
    面向未来的原生化Web开发
    郭力恒 广发证券前端技术专家
    试看
    1322
    40:59
    使用云和人工智能技术构建Web应用(英文演讲)
    Jakub Jedryszek Microsoft 软件工程师
    免费
    1844
    35:17
    泛娱乐直播下的HTML5
    宋光宇 奇虎360前端开发工程师
    试看
    1583
    35:30
    WebAssembly在音视频领域的应用
    和君 TutorABC大前端部门负责人
    试看