双线程架构：渲染层和逻辑层首先是什么？
发表时间：2023-11-22 17:39:31
文章来源：炫佑科技
浏览次数：160
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
双线程架构：渲染层和逻辑层首先是什么？
小程序的由来
首先，我们简单介绍一下微信小程序的发展历史。 当微信逐渐成为移动Web的重要入口时，微信就有了相关的JS API。 早期，腾讯内部的一些业务使用了微信原生的一些能力，但并未对外开放。 2015年初，微信发布了一整套名为JS-SDK的网页开发工具包，开放了更多微信原生能力。 为了提供更原生的体验、更快的加载、更强大的能力，微信开始设计小程序应用，并于2016年9月开始内测，并于2017年1月正式上线。
双线程架构：渲染层和逻辑层
首先我们简单了解一下小程序的运行环境。 小程序基于双线程模型。 在该模型中，小程序的逻辑层和渲染层运行在不同的线程中。 这与传统的Web单线程模型有很大不同，这使得小程序架构更加复杂。 有些复杂，但也有一些限制。 至于为什么选择基于双线程模型构建小程序，以及由此产生的问题和解决方案，我们接下来一一介绍。
小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面进行渲染； 逻辑层使用线程来运行JS脚本。 一个小程序有多个接口，因此渲染层有多个线程。 这两个线程之间的通信会通过微信客户端（以下也用来指微信客户端）进行中继双线程架构：渲染层和逻辑层首先是什么？，逻辑层也会通过发送网络请求，小程序的通信模型如下图所示。
逻辑层和视图层必须通过层进行通信。 逻辑层和视图层之间的工作方式是：数据变化驱动视图更新； 视图层交互触发事件，进而触发逻辑层的事件响应函数。 函数中修改数据会再次触发视图更新，如下图所示。
不同的操作系统，微信小程序的运行环境略有不同，如下图所示。 但一般来说，它们是由逻辑层和渲染层组成的。 开发不需要关心这个差异。
为什么采用双线程架构？
为什么采用双线程架构？ 这可能是由于以下原因：
安全可控，沙箱隔离，限制DOM和BOM能力和性能，提供原生渲染能力和原生API能力；
以上只是我个人的理解。 其实微信官方在这里已经详细介绍了采用双线程模型的原因。 主要目的是为了安全和控制。
数据驱动的虚拟 DOM
小程序采用类似Vue.js的数据驱动机制来渲染和更新页面。
在开发过程中，程序需要维护很多变量的状态，同时操作相应的UI元素。 随着界面变得越来越复杂，我们需要维护很多变量状态，处理界面上很多交互事件，整个程序变得越来越复杂。 通常界面视图和变量状态是相关的。 如果有某种“方法”将状态和视图绑定在一起（当状态改变时，视图也可以自动改变），那么我们就可以省去手动修改视图的工作。 。 这种方法是“数据驱动的”。
小程序的逻辑层和渲染层是两个独立的线程。 在渲染层，宿主环境会将WXML转换为相应的JS对象。 当逻辑层发生数据变化时，数据会通过宿主环境提供的方法从逻辑层传输到渲染层，然后比较差异并应用。 在原始的DOM树上，渲染出了正确的UI界面，如下图所示。 事实上，它采用了虚拟DOM的思想。
组件系统
小程序的视图是在 中渲染的，所以底层仍然是 HTML。 原生 HTML 过于开放。 如果直接使用HTML作为渲染层语言，会存在一些安全问题。 因此，微信设计了一个组件框架——。 基于这个框架，内置了一套组件，覆盖了小程序的基本功能。
它是微信小程序的组件组织框架，内置于小程序基础库中，为小程序的各个组件提供基础支持。 小程序内的所有组件，包括内置组件和自定义组件，均由组织管理。
该组件模型与标准中的组件模型高度相似。 它将维护整个页面的节点树相关信息，包括节点属性、事件绑定等，相当于简化版的DOM实现。 主要特点如下：
基于DOM模型：该模型与DOM高度相似，但不依赖浏览器原生支持，也没有其他依赖库； 实现过程中还添加了其他API来支持小程序编程。 可以运行在纯JS环境中：这意味着逻辑层也具备一定的组件树组织能力。 高效轻量：性能良好，尤其是在组件实例较多的环境下，而且代码量也较小。
小程序中所有与节点树相关的操作都依赖于它，包括WXML到页面节点树的构建、调用以及自定义组件特性。
原生组件
在内置组件中，有一些特殊的组件。 它们并不完全处于 的渲染系统之下，而是客户端原生参与组件的渲染。 我们将这类组件称为“原生组件”，这也是小程序技术的一部分。 申请。
要介绍原生组件的运行机制，我们需要从一行代码开始。
<map latitude="39.92" longtitude="116.46">map>
在原生组件内部，它的节点树非常简单，基本上可以认为只有一个 div 元素。 当上面这行代码开始在渲染层运行时，会经历以下步骤：
组件创建完毕微信小程序原生开发，并按顺序为其属性赋值。 组件被插入到 DOM 树中，浏览器内核会立即计算布局。 这时，我们可以读取组件相对于页面的位置（x，y坐标）、宽度和高度。组件通知客户端。 客户端根据宽度和高度在相同位置插入原生区域。 然后客户端在这个区域渲染界面。 当位置或者宽高发生变化时，组件会通知客户端进行相应的调整。
我们可以看到，本层原生组件的渲染任务非常简单。 它只需要渲染一个占位符元素，然后客户端在这个占位符元素之上堆叠一层原生界面。 因此，原生组件的级别会高于该层渲染的所有普通组件。
引入原生组件主要有以下三个好处：
扩展 Web 的功能。 例如，输入框组件（input，）具有更好地控制键盘的能力。 体验更好，渲染工作减少。 例如，地图组件等更复杂组件的渲染工作不占用线程，而是交给效率更高的客户端进行原生处理。 绕过数据通信和重新渲染过程，以实现更好的渲染性能。 例如组件()可以直接使用丰富的绘图接口进行绘制。
本机组件位于渲染过程之外，这带来了一些限制。 主要限制是某些 CSS 样式无法应用于本机组件。 例如，不能在父节点上使用：来裁剪原生组件的显示区域； 您不能使用它来旋转本机组件。
参考
