小程序的双线程模型

微信客户端作为小程序的宿主环境,为了能够执行小程序的各种文件(wxml文件、wxss文件、js文件),提供了双线程模型。

双线程模型:

  • WXML模块和WXSS样式运行与渲染层,渲染层使用WebVIew线程渲染(一个程序有多个页面,会使用多个WebView的线程)
  • JS脚本运行于逻辑层,逻辑层使用jsCore运行JS脚本。
  • 这两个线程都会经由微信客户端(Native)进行中转交互。

界面渲染过程:

WXML先转换为js对象,再渲染成DOM树。每当小程序视图有数据需要更新时,逻辑层会调用小程序宿主环境提供的setData方法将数据从逻辑层传递到视图层,经过一系列渲染之后完成UI视图的更新。

  • 小程序逻辑层调用宿主环境的setData方法。
  • 逻辑层执行JSON.stringify将待传输数据转换成字符串并拼接到特定的js脚本,并通过evaluateJavaScript执行脚本将数据传输到渲染层
  • 渲染层接收到后,WebView JS线程会对脚本进行编译,得到待更新数据后进入渲染队列等待WebView线程空闲时进行页面渲染。
  • WebView 线程开始执行渲染时,待更新数据会合并到视图层保留原始data数据,并将新数据套用在WXML片段中得到新的虚拟节点数。经过新虚拟节点树与当前节点树的diff对比,将差异部分更新到UI视图。同时,将新的节点树替换旧节点树,用于下一次重渲染。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值