小程序工作机制简析（小程序工作机制简析）

写作背景

我接触小程序已经有一段时间了。 总的来说，开发小程序的门槛比较低，但还是需要了解基本的工作机制和原理。 “比如面试的时候，他问我小程序有窗口对象吗？他说有。但实际上没有。” 我感觉他根本不懂小程序的原理。 最后，这是我唯一可以使用的工具，但我不知道为什么。

小程序与常规网页开发有很大不同，需要对技术架构进行基础分析。 例如，习惯了 Vue 和 React 开发的开发者会抱怨为小程序创建新页面很痛苦。 页面必须由多个文件组成，组件支持不完整，每次data中的数据发生变化时都必须设置setData。 没有Vue那么方便。 它不适合复杂的场景，因为你无法监控monitor并与Dom交互。 之前不支持npm、sass以及预编译较少的处理语言。

“有人说小程序就像是阉割版的Vue”（笑）。 当然，设计的出发点不同。 我们还需要了解小程序设计的初衷，通过它的使用场景我们需要了解为什么我们选择这个技术架构，这个技术架构有什么好处。 我想如果你明白了这一点你就能明白了。 下面我们将从以下几个角度来分析小程序的工作机制以及整体技术架构：

了解小程序的由来

在小程序出现之前，微信WebView已经逐渐成为移动网络的重要门户。 微信发布了一套完整的网页开发工具包，名为JS-SDK，为所有网页开发者打开了一个新的窗口，让所有开发者都可以使用微信的原生功能，做一些以前不可能完成的事情。以前很难的事情。

但是，JS-SDK 模型并未解决使用移动网页时降低体验的问题，例如由于设备性能或网络速度限制可能出现的白屏。 因此，设计了JS- SDK的增强版“微信网页资源离线存储”。 然而，复杂的页面仍然会遇到白屏问题。 原因是页面切换困难和点击延迟。 现在我们需要JS-SDK无法处理的事情，改善用户体验的系统和小程序已经创建了。

加载速度快

功能更强大

原生体验

轻松安全地打开微信数据

高效简单的开发

小程序和常规网页开发的区别

与常规网页开发相比，开发小程序非常相似。 主要的开发语言也是JavaScript，但是两者还是有一些区别的。

在常规的Web开发中，可以使用各种浏览器提供的DOM API来进行DOM操作。 小程序的逻辑层和渲染层是分开的。 逻辑层运行在JSCore中，没有完整的浏览器。 由于它是一个对象，因此缺少相关的 DOM 和 BOM API。

由于常规Web开发中的渲染线程和脚本线程是互斥的，如果脚本长时间运行，页面可能会变得无响应。 在小程序中，两者是分开的，分别运行。 在另一个线程中。

Web开发人员开发网页时，只需要一个浏览器和一些辅助工具或编辑器。 开发小程序则不同。 您需要经历申请小程序账号、安装小程序开发者工具、配置项目等流程。

小程序执行环境

小程序架构

p>

1.技术选择

界面渲染一般有以下三种技术： 类型：

使用纯客户端原生技术渲染

使用纯Web技术渲染

客户端原生使用技术与Web相结合的混合技术渲染技术（称为混合技术）。

通过以下几个方面的分析，了解哪些技术方案属于小程序

开发门槛：Web门槛低，原生支持RN等框架

开发门槛：Web门槛低，原生支持RN等框架

p>

体验：原生体验比 web 好很多，hybrid 某种程度上比 web 更接近原生体验

版本更新：web 支持在线更新，但原生必须打包到微信中审核和分配。

控制和安全：网络允许您跳转和更改页面内容，并且存在一些您无法控制的元素和安全风险。

由于小程序的宿主环境是微信，如果使用纯客户端端到端原生技术来创建小程序，小程序代码将始终与微信代码相同。必须一起释放。 这种方法是绝对不可行的。

这就需要像Web技术一样可以在云端随时更新的资源包。 可以下载到本地，动态执行后即可渲染界面。 使用纯 Web 技术渲染小程序时，您可能会遇到一些复杂交互的性能问题。 这是因为 Web 技术在单个线程中执行 UI 渲染和 JavaScript 脚本执行，因此某些逻辑任务很容易占用 UI 渲染资源。

最终，将两者结合起来的混合技术被用来渲染小程序。 你可以用类似于Web的方式进行开发，你的代码可以在线更新。 同时，组件部署还提供以下好处：

p>

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

它提供了更好的体验并减少了 WebView 渲染工作。

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

使用客户端原生渲染合并复杂组件可以提高性能。

2.双线程模型

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

那为什么要这样设计呢？前面我们也谈到了控制和安全。 为了解决这些问题，必须阻止开发人员使用浏览器的窗口对象、页面跳转、DOM操作以及动态开放接口来运行脚本。

您可以使用客户端系统JavaScript引擎提供的JsCore环境、iOS上的JavaScriptCore框架和Android上的腾讯x5内核。

此沙箱环境仅提供纯JavaS脚本解释和执行环境没有浏览器相关的接口。

这就是小程序双线程模型的由来。

逻辑层：创建一个单独的线程来运行JavaScript。 这是编写与 JavaScript 业务逻辑相关的所有代码的地方。 小程序将被执行。 负责逻辑处理、数据请求、接口调用等。

View层：所有与渲染界面相关的任务都在WebView线程上执行，渲染哪些界面是通过逻辑层代码控制的。 一个小程序有多个接口，因此视图层有多个WebView线程。

JSBridge充当高层开发和原生（系统层）之间的桥梁，允许小程序使用原生功能。 API。 此外，一些组件被实现为原生组件，这提供了更好的体验。

3.双线程通信

将开发者的JS逻辑代码放置在单独的线程中运行。 然而，Webview线程不允许开发者直接操作DOM。

如何动态改变接口

如上图所示，逻辑层和视图层之间的通信是通过原生（微信客户端）网络请求来中继的。从逻辑层发送来的也由本机转发。

这意味着可以通过简单的数据通信来更新 DOM。

虚拟 DOM 我相信每个人都已经知道了，但这里是高级流程：使用 JS 对象模拟 DOM 树 -> 两个虚拟 DOM 树 比较 -> 中的差异与实际 DOM 树的差异。

如图：

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

当逻辑层发生数据变化时，数据通过托管环境提供的setData方法从逻辑层原生传递，然后传输到渲染层。

比较前后差异后，将差异应用到原始DOM树上并更新界面。

通过将 WXML 转换为数据并通过 Native 进行传输，实现逻辑层和渲染层之间的交互和通信。

这么完整的框架离不开一个小程序的基础库。

4.小程序基础库

小程序基础库可以在视图层和逻辑层插入执行，主要用于以下几个方面：

视图层提供了各种组件来构成界面元素。

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

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

由于小程序渲染层和逻辑层是由两个线程管理的，所以两个每个线程都注入了基础库。

小程序的基础库并没有打包成具体的小程序代码包，而是预先内置在微信客户端中。

这允许您：

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

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

5.Exparser框架

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

Exparser 的主要功能包括：

基于Shadow DOM模型：该模型与WebComponents的ShadowDOM非常相似，但不依赖于原生支持。 有浏览器依赖，没有其他依赖。 库；在实现过程中还添加了其他API来支持小程序组件的编程。

可以在纯JS环境中运行：这意味着逻辑层也具有一定的组件树配置能力。

高效轻量：性能良好，尤其是在组件实例较多、代码量较小的环境中。

Applet 依赖 Exparser 来执行所有与节点树相关的操作，例如构建从 WXML 到页面的最终节点树、创建 SelectorQuery 调用以及自定义组件特性。

内置组件

基于Exparser框架的小程序有一组内置组件，提供视图容器类、表单类、导航类和媒体类。主体类、开放类等数十个组件。 通过将这套丰富的组件与 WXSS 相结合，您可以构建具有任何效果的界面。 即使在功能层面上，它也能满足大多数需求。

6. 工作机制

小程序的启动有两种情况：一种是“冷启动”，另一种是“热启动”。 如果用户已经打开了一个小程序，并在一定时间内再次打开，此时不需要重新启动。 只要把后台的一个小程序调到前台就可以了。 这个过程是一个热启动。 冷启动是指当用户第一次打开小程序或者被微信主动销毁后重新打开小程序时，必须重新加载并启动小程序。

小程序没有重启的概念。

当小程序进入后台时，客户端会保持运行一段时间。 一定时间后（目前为5分钟），微信销毁会自动激活。

短时间内（5秒）收到3次及以上系统内存报警，小程序将被销毁

7. > 如果冷启动时发现新版本小程序，则异步下载新版本代码包，并与客户端本地包同时启动。 这意味着新版本的小程序要等到下一次冷启动时才会应用。 如果您需要立即应用最新版本，可以使用 wx.getUpdateManager API 来执行此操作。

8.性能优化

主要的优化策略可以概括为三点。

简化您的代码并降低 WXML 结构和 JS 代码的复杂性。

p >

合理使用setData调用，减少setData调用次数和数据量。

如有必要，请使用外包优化。

1.setData如何工作

小程序的视图层目前使用WebView作为渲染载体，逻辑层使用单独的JavascriptCore作为执行环境。 从架构上来说，WebView 和 JavaScriptCore 是独立的模块，没有直接的数据共享通道。 目前视图层和逻辑层之间的数据传输实际上是通过两者提供的evaluateJavascript来实现的。 也就是我需要将用户提交的数据转换成文字同时以字符串格式传递，将转换后的数据内容连接到JS脚本中，执行JS脚本传递给双方独立的环境。

由于evaluateJavascript的执行受到多方面的影响，到达视图层的数据并不是实时的。

2.常见的setData操作错误

频繁发生setData在我们分析的一些案例中，一些小程序的setData操作非常频繁（毫秒级别）。 这会导致两个后果： 使用Android的用户在滑动时会感到卡住。 操作反馈明显延迟。 由于JS线程正在编译和渲染，无法及时将用户交互事件传递给逻辑层，逻辑层无法及时处理操作。 处理结果及时传递到视图层。 渲染会有延迟。 WebView的JS线程总是很忙，增加了逻辑层到页面层的通信时间。 当视图层收到数据消息时，距离发送已经过去了几天。 数百毫秒，渲染结果不实时。

每次setData传输大量新数据时，setData的底层实现告诉我们，这次数据传输实际上是EvaluateJavascript

脚本过程。 如果数据量太大，脚本编译和执行时间会增加，会占用WebView JS线程。 SetData 在后台状态页中执行。 当页面位于后台（用户不可见）时，不要继续使用 setData。 用户无法渲染后台状态页面。 此外，感觉后台页面的 setData 抢占了前台页面的执行。

概述

从以上角度对小程序的底层架构进行了高层分析，从它们的起源到双线程的出现、设计、通信和基础。 库和Exparser框架、工作机制、性能优化等都是相关且相互影响的选择。 小程序底层框架的设计还有很多工作要做。 每个框架的诞生都有它的意义。 作为开发人员我们能做的不仅仅是使用这个工具，还要了解它的设计模式。 只有这样你才能不受工具的影响继续前进。

PHP 快速学习视频免费教程（入门到精通）

如何学习 PHP？ 我应该从哪里学习 PHP？ 不用担心。 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

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

• 微信公众号和小程序有什么区别（微信公众号和小程序的区别）
• 如何批量删除小程序（如何批量删除微信中最近使用过的小程序）
• 小程序云开发与非云开发的区别
• 小程序需要租用服务器吗（小程序开发价目表）
• 如何发布我的小程序？

本文由主机参考刊发，转载请注明：小程序工作机制简析（小程序工作机制简析） https://zhujicankao.com/124101.html