小程序的双线程模型

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

小程序的宿主环境

微信客户端提供双线程去执行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. 工具资源系列之 github 上各式各样的小徽章从何而来?

    前言 平时大家在在逛 github 时或多或少都看到过项目首页各式各样的小徽章,不知道你是否和我一样好奇这些小徽章都是哪来的呢? 首先我们先来一睹为快目前前端开发的三大主流框架: var ,看一看他们 ...

  2. 基于C++的STL的vector实现静态链表，要求包含插入，删除，和查找功能

    //main.cpp部分 #include"List.cpp" int main() { StaticList<int> SL; SL.Insert(,); SL.In ...

  3. xargs 用法理解

    原来一直不理解,linux shell下 xargs和 管道的区别: 1.管道在linux shell用得比较广泛,管道常常用来组合两个及以上的命令,共同完成一个功能: 比如:我们要统计某一个文件有多 ...

  4. C# git忽略文件 （.gitignore ）

    # Visual Studio # User-specific files *.suo *.user *.userosscache *.sln.docstates # User-specific fi ...

  5. Note | Ubuntu

    目录 0. 教程 1. 安装 2. 系统 0. 教程 <Linux就该这么学>:https://www.cnblogs.com/RyanXing/p/9462850.html 1. 安装 ...

  6. 与某军工背景软件企业分享Azure DevOps Server的经验

    DevOps 是英文单词Development和Operations的组合词,是一种用于促进软件开发.运维实施和质量保障部门之间协同工作的过程和方法. 结合软件开发管理规范,应用自动化的构建.测试和发 ...

  7. maven pom项目的dependencies转gradle格式

    1.新建一个文件件 2.创建pom.xm,放到新建的文件夹中 3.在命令行切换到新建文件夹中,执行: gradle init --type pom

  8. JSON转成List结构数据

    先要引入对应的jar,然后调用net.sf.json库的 ObjectMapper mapper = new ObjectMapper(); JavaType javaType = mapper.ge ...

  9. python在字节流中对int24的转换

    python在字节流中对int24的转换 概述 最近在写项目的过程中,需要对从串口中读取的数据进行处理,本来用C写完了,但是却一直拿不到正确的数据包,可能是因为自己太菜了.后来用了python重新写了 ...

  10. FastDFS图片服务器(分布式文件系统)学习。

    参考:https://blog.csdn.net/hiqingtian/article/details/79413471 https://blog.csdn.net/sinat_40399893/ar ...