1、问题与猜想
setData的流程是什么?
一次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、结论
多用组件,因为组件是局部patch、render,页面是全部
同一页面,同一组件的同时setData要合并,特别是页面
后台页面最好不要setData,会抢占通信通道和CPU资源,影响前台页面的渲染,如果控制好set的量级和次数,可以接受。
如果父组件、子组件同时setData,不用考虑合并成一次
多个组件同时setData可以不用合并,引擎层直接合并了,只会触发一次渲染
以上只是个人的一点思考,并用demo验证了下,有错误的地方 欢迎讨论
赞!