小程序的双线程模型

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

小程序的宿主环境

微信客户端提供双线程去执行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. CF-1155 D.Beautiful Array

    题目大意:现在有一个数列,还有一个数字x,你可以将这个数列中的一段连续子序列同时乘以这个数字x(当然也可以不乘),然后问你最大子段和是多少 做法:dp,你懂的 #include<iostream ...

  2. ubuntu16.04下安装nvidia驱动心得

    首先机器重启后莫名出现循环登录错误,然后按照网上的方法卸载掉nvidia驱动后,可以正常登录. 但还是要再装nvidia驱动.网上说的各种方法都试过了,geforce.cn官网上推荐的各种版本的run ...

  3. 如果对象的引用被置为null，；垃圾回收器是否会立即释放对象占用的内存？

    不会,在下一个垃圾回调周期中,这个对象将是被可回收的. 也就是说并不会立即被垃圾收集器立刻回收,而是在下一次垃圾回收时才会释放其占用的内存.

  4. 探索ASP.Net Core 3.0系列六：ASP.NET Core 3.0新特性启动信息中的结构化日志

    前言:在本文中,我将聊聊在ASP.NET Core 3.0中细小的变化——启动时记录消息的方式进行小的更改. 现在,ASP.NET Core不再将消息直接记录到控制台,而是正确使用了logging 基 ...

  5. multer 基础教程(英文版)

    Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploadi ...

  6. Mysql相关问题-----1045 Access denied for user 'root'@'localhost' (using password: YES)报错

    MySQL 连接错误,使用Navicat连接MySQL出现错误:1045 Access denied for user 'root'@'localhost' (using password: YES) ...

  7. MySQL for OPS 02：SQL 基础

    写在前面的话 上一节主要谈谈 MySQL 是怎么安装的以及最简单的初始化我们应该做哪些配置.其中也用到了一些简单的用户操作 SQL,所以这一节主要学习常用的 SQL 使用. SQL 介绍 在了解 SQ ...

  8. 使用 Xbox Game 录制桌面视频(录制音频）

    使用 Xbox Game 录制桌面视频(附带音频) 前言:可能自己音频输出的问题,一直无法用工具录制桌面的音频,而最后发现利用 Xbox Game 录制游戏视频的功能很好地解决我们的问题. 1)打开游 ...

  9. dedecms5.7文章页的标签随机插入到内容中并且标签的地址为其标签关联的其他文章地址

    dedecms5.7文章页的标签随机插入到内容中并且标签的地址为其他标签关联的文章地址 1 添加2个自定义函数 在dede/include/extend.func.php底部 添加如下代码 //根据文 ...

  10. 如何查询正在运行的SQL Server agent job

    运行"msdb"系统数据库下的存储过程"dbo.sp_help_job",可以得知现在SQL Server中有多少个正在运行的agent job: USE [m ...