小程序的渲染过程

小程序的双线程模型

小程序的渲染过程_第1张图片

小程序是双线程执行的,wxml模块个wxss样式再渲染层进行运行。渲染层使用webView线程进行渲染.一个程序有多个页面,会使用多个webView的线程

js脚本运行与=于逻辑层,逻辑层使用jscore进行js脚本

渲染过程

小程序的渲染过程_第2张图片

WXML可以先转成JS对象,再渲染出真正的DOM树

数据的变化

小程序的渲染过程_第3张图片

通过setData把msg数据从“Hello World”变成“Goodbye”
 产生的JS对象对应的节点就会发生变化
 此时可以对比前后两个JS对象得到变化的
部分
 然后把这个差异应用到原来的Dom树上
 从而达到更新UI的目的,这就是“数据驱
动”的原理

界面渲染的整体流程

界面渲染整体流程:
 1.在渲染层,宿主环境会把WXML转化成对应的JS对象;
 2.将JS对象再次转成真实DOM树,交由渲染层线程渲染;
 3.数据变化时,逻辑层提供最新的变化数据,JS对象发生变化比较进行diff算法对比;
 4.将最新变化的内容反映到真实的DOM树中,更新UI;

你可能感兴趣的:(小程序)