小程序的双线程模型

官方文档给出的双线程模型:

小程序的宿主环境

微信客户端提供双线程去执行wxml,wxss,js文件。

双线程模型

1.上述的渲染层上面运行着wxml文件,渲染层使用是的webview线程进行渲染(一个程序会有多个页面,也就会有多个view线程进行运作)

2.js文件是运行在逻辑层,逻辑层的js是通过jscore进行运行的。

通过双线程界面的渲染过程是怎样的?

wxml与DOM树

其实我们wxml文件与我们html中的DOM树是一样的,这样我们就可以有js来模拟一个虚拟的DOM树:

初始化渲染

如果我们的wxml文件中如果有变量:要与js逻辑层共同渲染页面成为一个真正的DOM树:

界面数据发生变化

1如果通过setDat把hell改成dsb,则js对象的的节点会发生改变.

2 这时会用diff算法对比两个对象的变化,

3 然后将变化的部分应用到DOM树上

4 从而达到更新页面的目的,这也就是数据驱动的原理

总结

界面渲染的整体流程

1在渲染层将wxml文件与wxss文件转化成js对象也就是虚拟DOM

2 在逻辑成将虚拟的DOM对象配合生成,真实的DOM树,在交给渲染层渲染

3 当数据变化是,逻辑层提供更新数据,js对象发生改变,用diff算法进行比较

4 将更新的内容,反馈到真实的DOM树中,更新页面

作者: waller
原文:http://www.wxapp-union.com/portal.php?mod=view&aid=5647

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一切始于双线程 技术选型 目前来说,页面渲染的方式主要有三种: Web 渲染。 Native 原生渲染。 Web ...
    赵客缦胡缨v吴钩霜雪明阅读 7,321评论 0 16
  • 微信小程序 项目结构 上图为微信小程序的项目结构,pages下面包含了小程序中的每一个页面,每一个页面由页面结构,...
    Jensen95阅读 12,885评论 0 19
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,801评论 1 32
  • 前两天跟老师学画兔子,发现一个有趣的现象,同一幅画,每个人画出来的作品各有特色,比如我们老师画的是一只母兔,所配文...
    石之画趣阅读 5,664评论 21 16
  • 1. 想拥有高质量睡眠,首先要破除一个误区——“8小时睡眠最健康”。不同的人,甚至不同的生命阶段,对睡眠的需求都是...
    Gabriel_7f3f阅读 12,558评论 0 1