1，小程序的宿主环境

  • 宿主环境为小程序客户端或者其他提供运行的客户端程序

  • 宿主环境为了执行小程序的各种文件: wxml,wxss,js文件，所以提供了小程序的双线程

    2，双线程模型

  • wxml模板和wxss样式运行与渲染层，渲染层使用webView线程渲染(一个程序有多页页面，会使用多个webView线程，也就是说宿主环境(客户端)会提供多个webView线程)

  • js脚本(app.js等)运行与逻辑层，逻辑层使用jsCore运行js脚本
  • 这两份线程都会经由微信客户端进行中专交互

小程序的双线程模型 - 图1

3，语法树

  • 在渲染层宿主环境会将wxml转换为对应的js对象
  • 将js对象再次转换为真实的DOM树，交给渲染层渲染
  • 数据变化时，逻辑层提供最新的数据变化，js对象通过diff算法来比较不同点
  • 将新变化的内容反应到正式的DOM中
  • 小程序中逻辑层和渲染层相互合作，先将节点构建为抽象语法树并填充数据，形成一个语法树对象，在通过互相合作将语法树通过渲染层渲染为页面。其中通过diff算法来比较每次数据的变化，只改变数据发生变化的位置，从而提高性能和速度