收藏
评论

setData与渲染

1、问题与猜想

  1. setData的流程是什么?

  1. 一次setData调用必定会引起一次渲染?


1.1、setData的流程 ?

通信过程:jscore -> native -> webview,native以队列处理消息,最终的结果可以大致理解为插了一段 eval 代码到对应webview中。

  • jscore -> native 的时间可以基本忽略。

  • 数据量比较大的时候 native -> webview 比较耗时

  • native -> webview 的通信,在ios上会抢占CPU资源,影响页面渲染

  • eval编译代码也比较耗时,抢占渲染线程


1.2、一次setData调用必定会引起一次渲染 ?

一次setData并不会引起一次渲染,如果在一次渲染周期内,收到了多次setData,那么只会有一次渲染。setData会在当前的js执行栈中插入一段js代码,如果刚好赶上了当前的渲染周期,那多次setData也只会引起一次渲染。


2、验证测试 (demo测试)


2.1、同一页面连续setData

  • 前少后多:一般是赶不上第一次的渲染周期,会触发两次

  • 前多后少:只有一次


2.2、不同页面的setData 

  • 前少后多:ios上影响当前页面渲染,android没有影响

  • 前多后少:基本影响,后台页面set的数据比较少的时候,用的资源基本可以忽略

后台页面setData首先会抢占通信通道,其次会抢占CPU资源,ios上如果后台页面set的数据多,当前页面渲染会有很明显延迟,android上无影响。


2.3、页面和组件同时setData

  • 前少后多:只有一次

  • 前多后少:只有一次


2.4、同一组件连续setData

  • 前少后多:一般是赶不上第一次的渲染周期,会触发两次

  • 前多后少:只有一次


2.5、不同组件同时setData

  • 前少后多:一次渲染

  • 前多后少:只有一次

当多个组件同时setData时,感觉引擎层会搜集所有改变,一次渲染,这样也比较合理,某个属性改变,引起多个组件同时渲染的场景还是挺多的。


3、结论

  1. 多用组件,因为组件是局部patch、render,页面是全部

  1. 同一页面,同一组件的同时setData要合并,特别是页面

  2. 后台页面最好不要setData,会抢占通信通道和CPU资源,影响前台页面的渲染,如果控制好set的量级和次数,可以接受。

  3. 如果父组件、子组件同时setData,不用考虑合并成一次

  4. 多个组件同时setData可以不用合并,引擎层直接合并了,只会触发一次渲染

以上只是个人的一点思考,并用demo验证了下,有错误的地方 欢迎讨论


    最后一次编辑于  2018-12-04  (未经腾讯允许,不得转载)
    收藏赞 2

    1 个评论

    • 土豆豆
      土豆豆
      2018-12-24

      赞!

      2018-12-24
      赞同
      回复