浅析微信小程序底层原理（微信小程序原理图）

渲染页面的方式主要有3种

推荐：《小程序开发教程》

>

1. Web 渲染

2. Native 渲染

3. 混合渲染。

这是小程序的第三种呈现形式。

双线程通信方法

为什么需要双线程？ -> 避免操纵 DOM 来控制安全。

小程序的渲染层和逻辑层分别由两个线程管理。 渲染层界面使用WebView进行渲染，逻辑层使用JsCore线程执行JS脚本。

微信小程序框架由两部分组成：视图层和APP服务逻辑层。

视图层用于渲染页面结构，

AppService用于逻辑处理、数据请求、接口调用。

在两个进程（两个 Web 视图）中运行。

视图层和逻辑层通过系统层的JSBridage进行通信。

逻辑层：创建一个单独的线程来运行JavaScript。 该环境执行与小程序业务逻辑相关的所有代码。

渲染层：所有与渲染界面相关的任务都在webView线程上执行，逻辑层代码控制渲染哪些界面。

因为小程序有多个接口，所以渲染层有多个Webview线程。

逻辑层和渲染层之间的通信由native（微信客户端）中转。

逻辑层发送的网络请求也是由native转发的。

evaluateJavascript

视图层和逻辑层之间的数据传输实际上是通过双方提供的evaluateJavascript来实现的。 换句话说，用户发送的数据必须是：在转换为字符串格式传递的同时，将转换后的数据内容连接到JS脚本，以JS脚本的形式传递到两个独立的环境。

由于evaluateJavascript的执行受到多方面的影响，到达视图层的数据并不是实时的。 setData函数将数据从逻辑层异步发送到视图层。

模板数据绑定解决方案

1. 解析语法并生成 AST。

2.根据AST结果生成DOM。

3. 转换数据将更新绑定到模板

抽象语法树（缩写为抽象语法树，或 AST）

对于性能问题最可能的原因是第三点和数据解决方案。 更新一下，React首先提出了虚拟DOM的设计，但现在基本上已经被大多数框架吸收了，就连小程序也不例外。

虚拟 DOM 机制 virtual Dom

使用 JS 对象模拟 DOM 树 -> 比较两棵 DOM 树 -> 两棵 DOM 树 -> 将差异应用到实际的 DOM 树。

1.将WXML转换为渲染层对应的JS对象。

2. 当逻辑层中的数据发生更改时，这些更改将通过托管环境提供服务。 setData 方法将数据从逻辑层本地传输，然后传输到渲染层。

3.对比前后差异后，将差异应用到原来的DOM树上，更新接口

小程序基础库

编写一个小程序的基础库 在 JavaScript 中，可以注入到渲染层和逻辑层来执行。 主要用于：

渲染层提供了各种组件来组装页面的元素。

逻辑层提供各种API来处理各种元素。

处理数据绑定、组件系统、事件系统、通信系统等一组框架逻辑。

小程序的渲染和逻辑层由两个线程管理，每个线程都有一个注入的基础库。

小程序的基础库没有封装到小程序的代码中，而是预先内置在微信客户端中。 这可以做到目的：

减少业务小程序的代码包大小。

您可以独立修复基础库中的Bug，无需更改业务小程序的代码包。

Exparser

Exparser是微信小程序的组件组合框架。 它内置于小程序的基础库中，为小程序的各个组件提供基础支持。 小程序中的所有组件，包括内置组件和自定义组件，都由 Exparser 组织和管理。

双线程渲染机制

双线程渲染实际上是之前一系列机制的组合。

1. Applet 为 DSL 提供数据绑定语法和渲染层，用于通过模板数据绑定和虚拟 DOM 机制来描述页面结构。

{{ message }}

2.小程序提供了逻辑层设置页面数据的API。

this.setData({key : value});

3.逻辑层需要更改页面时，只需更改通过setData传递给渲染层的更改数据即可。

待发送的数据在发送前会被转换为字符串，因此请避免发送大量数据。

4.渲染层根据渲染机制重新生成虚拟DOM树，更新对应的DOM树，改变界面。

引入原生组件

通过绕过setData、数据通信和重新渲染过程来提高渲染性能。

扩展网络的功能。 例如输入框组件（input、textarea）具有更好的控制键盘的能力。

它提供了更好的体验并减少了 WebView 渲染工作。 例如，更复杂的组件（例如地图组件）的渲染工作不占用WebView线程，而是交给更高效的线程。在客户端进行本机处理。

原生组件渲染流程：

创建一个组件，并按顺序为其属性赋值。

当一个组件被插入到 DOM 树中时，浏览器内核立即计算其布局。 然后，您可以读取组件相对于页面的位置（x、y 坐标）、宽度和高度。

组件通知客户端将根据其宽度和高度在相同位置插入原生区域，客户端将在该区域绘制界面。

当位置或者宽高发生变化时，组件通知客户端进行相应的调整。

下载微信应用

微信是一款移动通讯软件，支持通过手机网络发送语音消息、视频、照片和文本。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：浅析微信小程序底层原理（微信小程序原理图） https://zhujicankao.com/123594.html