react 性能问题求指教



  • ======今天被问到好多性能问题,好多都不费,在这里求指教======

    1.react 的虚拟dom存放在哪里?是不是内存里?会不会占用内存。
    2.有没有性能对比数据,对比原生组件和原生通过react native export方法被js调用后的性能对比
    3.安卓生命周期,内存不足安卓进程被杀掉,我们通过react native export方法被js调用后,会怎样,一样崩掉?
    3.jsx被java,oc解析成什么,是不是变成了原生的代码,根本没有js的概念。。
    4.react native 有没有窗口概念
    5、遇到多数据的情况,怎样平滑展示多数据
    ==========大神们看到,请留爪,谢谢!============================



    1. 确实在内存里,当然会占用内存,大约每个节点要占用几十到几百字节,一千个节点(对移动应用来说这通常已经很复杂了)占用也就几十k,核心占用内存的瓶颈通常不在这里。

    2. 这个“性能”的定义有些模糊,因为UI的处理并非大数据量的操作,绝大部分时候单次计算都应该<16ms,所以并没有办法以一个绝对数值进行对比。这里从理论上分析几种情形:

      1. 类似ScrollView、TouchableNativeFeedback、NavigatorIOS等,整个触控操作完全在原生处理,那么一旦View创建好了以后,操作的处理性能和原生“完全一样”
      2. 类似ListView、Navigator、TouchableHighlight等,触控操作要传递到js层计算逻辑和表现,再传递给原生层,如果不涉及复杂的计算,这一个来回通常能在16ms内搞定,用户并不会明显感知。
      3. 同样是ListView、Navigator,如果js层接收到原生层传来的事件之后,还做了较多处理(尤其是大量生成新的View),'就可能会带来较大的性能问题。

      整体上,React并不苛求纯粹的性能指数要达到与原生完全一致的水平(对于js这种动态语言来说,纯粹的性能优化也是有限度的),对于性能,有如下几条准则:

      1. 避免容易由于误用或随着规模上升而导致严重性能问题的设计(如双向绑定),通过dom diff减少性能瓶颈(如bridge的开销)
      2. 将复杂的任务分散到多帧进行(ListView),以及放到不在处理动画或交互的时候进行(InteractionManager),以提升用户的流畅体验。
      3. 如果实在是过于重的计算任务,可以将对应的任务放到原生完成(如图片解码、布局、文字排布等)
    3. 内存不足一样崩掉。

    4. jsx被babel处理成js,然后在JavascriptCore上运行。有js的概念。

    5. 整个移动平台都很少提窗口的概念(尽管Android上存在这样的概念),取而代之,平时讨论的都是视图(View)。React Native里没有窗口的概念,只有视图。

    6. 最关键的因素:不要一帧渲染太多的View



  • :relaxed: 谢谢tdzl2003 ,受教了