输入JS Engine生成的虚拟DOM.
构造树结构: 分析虚拟DOM JSON数据以构造渲染树(RT).
添加样式: 为渲染树的各个节点添加样式.
创建视图: 为渲染树各个节点创建Native视图.
绑定事件: 为Native视图绑定事件.
CSS布局: 使用 css-layout 来计算各个视图的布局.
更新视窗(Frame): 采用上一步的计算结果来更新视窗中各个视图的最终布局位置.
最终页面呈现.
4.3 异步渲染机制
基本原理:采用流式渲染和离屏渲染
流式渲染: JS Framework每创建一个节点,立即发送给native,同时等待native的
next tick命令的触发才能继续执行,这样就有效的解决了页面回退仍然在渲染,事
件不能响应的问题。
离屏渲染: 用户在浏览页面的过程中,后台Dom线程继续渲染更新页面,将所有
addDom、updateSytle等操作都以最小颗粒度拆分,保证所有的操作都在16ms内完
成,大大提升首屏的加载性能以及滑动的流畅度。