小程序的双线程模型

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

小程序的宿主环境

微信客户端提供双线程去执行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树中，更新页面

注:内容摘自 小猿取经

微信小程序 - 双线程模型的更多相关文章

  1. 微信小程序的线程架构

    小程序的线程架构 每个小程序包含一个描述整体程序的app实例和多个描述页面的page. 其中app由3个文件构成: app.json 公共配置文件 app.wxss 公共样式文件 app.js 主体逻 ...

  2. 理解微信小程序的双线程模型

    有过微信小程序开发经验的朋友应该都知道"双线程模型"这个概念,本文简单梳理一下双线程模型的一些科普知识,学识浅薄,若有错误欢迎指正. 我以前就职于「小程序·云开发」团队,在对外的一 ...

  3. 从微信小程序开发者工具源码看实现原理（三）- - 双线程通信

    文章概览: 引言 小程序开发者工具双线程通信的设计 1.on: 用来收集小程序开发者工具触发的事件回调 2.invoke:以api方式调用开发工具提供的基础能力 3.publish:用来向Appser ...

  4. 微信小程序开发手册

    目录: 数据绑定 条件渲染 列表渲染 API FAQ: <block wx:for> 和 <view wx:for>的区别 wx:if 什么情况下判断为假 坑列表: 微信版本6 ...

  5. 微信小程序之结构目录、视图层、双线程模型、生命周期、事件传递冒泡、组件、request、登录授权及支付

    结构目录与配置介绍 视图层与基础语法 双线程模型 生命周期 事件.传递和冒泡 组件.自定义组件.组件事件传递页面 Request.路由跳转.本地存储 登录(后端实现) | 授权(后端实现) 支付(后端 ...

  6. 小程序的目录结构/配置介绍/视图层wxml数据绑定/双线程模型/小程序的启动流程

    安装好微信小程序开发软件,创建项目 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配 ...

  7. 微信小程序开发（四）线程架构和开发步骤

    线程架构 从前面的章节我们可以知道,.js文件是页面逻辑处理层.我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件.如在页面的onLoad时进行数据的下载,onShow ...

  8. 微信小程序开发教程（四）线程架构与开发步骤

    线程架构 从前面的章节我们可以知道,.js文件是页面逻辑处理层.我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件.如在页面的onLoad时进行数据的下载,onShow ...

  9. 微信小程序 一些要点

    微信小程序,weixin,关于微信小程序,那些开发文档没有告诉你的-微信小程序开发资源-微信开发者平台,微信开发者社区,微信小程序开发者社区 Discuz! Team and Comsenz UI T ...

随机推荐

  1. Class的使用，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字，类的继承

    s6新增了一种定义对象实例的方法,Class(类)这个概念,作为对象的模板.class可以看作只是一个语法糖,通过class关键字,可以定义类.让对象原型的写法更加清晰.更像面向对象编程的语法. 一. ...

  2. bayer2bmp

    #include <stdlib.h> #include <string.h> #include <getopt.h> #include <stdint.h& ...

  3. java基础 Unsafe

    参考文章: https://tech.meituan.com/2019/02/14/talk-about-java-magic-class-unsafe.html

  4. vuex 源码分析(七) module和namespaced 详解

    当项目非常大时,如果所有的状态都集中放到一个对象中,store 对象就有可能变得相当臃肿. 为了解决这个问题,Vuex允许我们将 store 分割成模块(module).每个模块拥有自己的 state ...

  5. RStudio 不中断下载依赖包

    修改下载方式:

  6. 知识图谱与Bert结合

    论文题目: ERNIE: Enhanced Language Representation with Informative Entities(THU/ACL2019) 本文的工作也是属于对BERT锦 ...

  7. 关于 C# 8.0 的 Switch Case When 的用法

    直接贴代码了: static void Main(string[] args) { SwitchSample(); } private static void SwitchSample() { Swi ...

  8. [CrackMe]160个CrackMe之001

    吾爱破解专题汇总:[反汇编练习]160个CrackME索引目录1~160建议收藏备用 一.Serial/Name 之 暴力破解 1. 熟悉界面:很常规的一个界面,输入完账号密码之后会进行验证.  2. ...

  9. 三维网格细分算法（Catmull-Clark subdivision & Loop subdivision）附源码(转载)

    转载:  https://www.cnblogs.com/shushen/p/5251070.html 下图描述了细分的基本思想,每次细分都是在每条边上插入一个新的顶点,可以看到随着细分次数的增加,折 ...

  10. MySql数据库中正则表达式

    命令 说明 ^ 在字符的开启处进行匹配 $ 在字符的末尾处进行匹配 . 匹配任何字符(包括回车和新行) [-.] 匹配括号内的任意单个字符 [m-n] 匹配m到n之间的任意单个字符,例如[0-9],[ ...