小程序双线程模型详解（小程序多线程）

本文将帮助您了解微信小程序的双线程模型。 我们先来说说小程序的双线程模型是什么。 为什么我的小程序使用的是双线程模型而不是浏览器的线程模型，希望对你有帮助！可能熟悉“双线程模型”的概念。 本文快速总结了有关双线程模型的常见科学知识。 如果知识水平有限，错误之处还请指正。

我之前在“小程序云开发”团队工作。 在几次外部培训和技术分享中，我们经常收到“微信小程序和网页版的主要技术区别”的问题。 从编程语言和范式的角度来看，小程序开发与Web前端开发非常相似（例如，它们都使用WXML/WXSS，一种与HTML/CSS等非常相似的JavaScript语言）。 然而，并没有直接使用原生前端技术。 【相关学习推荐：小程序开发教程】

相比网站，微信上托管的小程序需要考虑安全、性能等因素。 确保小程序不影响微信应用本身的安全性，以及尽量做到接近原生应用的性能和用户体验，是小程序不直接使用浏览器线程的两个主要原因。

那么小程序的双线程模型是什么？

这是理解新概念和技术的最佳方式。 因此，要理解它。 要在小程序中使用线程模型，首先需要对浏览器的线程模型有一些了解。

浏览器是多进程的

大概每个前端工程师刚入行的时候都会被面试官问到，“你怎么理解前端的单线程？”多次提问。 因为JavaScript是前端核心技能之一。 该语言是单线程的。 对JS单线程操作的透彻理解和掌握是对前端工程师最基本的要求。 然而，很多初学者都陷入了一个误区。 问题在于“JavaScript单线程”被错误地理解为“浏览器单线程”。

事实上，浏览器的内部架构相当复杂，仅用于处理GUI渲染线程和JavaScript逻辑脚本线程。互斥和区块管理模式引起了一些开发者的误解。

以Chrome浏览器为例，点击右上角的设置按钮，输入“更多工具”->“任务管理器”，你会看到这样的弹窗: 将会完成。 ：

可以看到Chrome打开了多个进程，包括浏览器进程、网络进程、GPU进程等等。 这些都是常见的流程。 请注意，上图中有两个选项卡流程。 Chrome为每个标签页打开一个单独的渲染进程（renderer process）。 我们在每个进程之间不共享资源（CPU、内存等）或行为（UI、逻辑等），因此如果一个选项卡页崩溃，其他选项卡页不会受到影响。

在每个选项卡进程中，浏览器都会将不同的任务传递给相应的线程。 例如，GUI 渲染线程负责将 HTML 渲染到可视 UI 中。 JavaScript引擎线程负责解析和执行JavaScript。 代码逻辑。 定时触发线程负责 setTimeout/setInterval 定时器之类的事情。

还有一件事非常令人困惑。 事实上，setTimeout/setInterval并不是JavaScript语言的一部分，而是运行时（最初是浏览器，后来Node.js也支持）提供的功能。

GUI渲染线程和JavaScript引擎线程是互斥的。 JavaScript 在执行期间会阻止 UI 呈现。 即使脚本运行时间过长，页面也会长时间不响应，脚本就会崩溃。 这种线程之间的互斥以及GUI渲染线程和JavaScript引擎管理线程的方式导致一些前端开发人员认为浏览器是单线程的。

为什么 JavaScript 被设计为单线程？

JavaScript 的创始人只有 10 天的时间来创建这门语言。 他最初的想法是为浏览器提供简单的脚本逻辑来处理用户交互和 DOM 操作等事情。 因此，设计时应遵循以下两点：

语法简单，操作机制简单。

在语法方面，JavaScript 借鉴了 Java，但消除了许多复杂性，例如类型声明、模块系统（稍后添加）等。

在执行机制方面，JavaScript并不像Java那样提供多线程能力。 主要原因是为了避免多线程DOM操作引起的UI冲突。 例如，如果多个线程同时操作同一个 DOM，浏览器应该如何决定使用哪个线程来产生最终的 UI 效果？ 这是一个经典的线程安全（也称为线程同步）问题。 多线程编程领域有很多解决方案，比如添加锁定机制，但这引入了更多的复杂性，违背了JavaScript简单易用的设计，也违背了初衷。

这也解释了为什么GUI渲染线程和JavaScript引擎线程是互斥的。 也就是说，JavaScript 代码具有修改 DOM 的能力。

当 JavaScript 代码执行时，GUI 渲染线程会暂停并等待 JavaScript 引擎线程空闲后再执行。 这样就避免了 JavaScript 在渲染过程中反复修改 DOM 带来的不必要的渲染压力。 可以使用互斥模式等待JavaScript代码完成执行，以确保渲染是最终的执行结果。 因此，浏览器空闲时间也成为衡量网站性能的重要指标之一。 空闲时间主要表明JavaScript逻辑不密集，DOM变化不频繁。 在这种情况下，浏览器可以更快、更流畅地响应用户交互。 它的工作原理如下：

HTML5 随后引入了 Web Workers，它提供了在多个线程上运行 JavaScript 代码的能力。 然而，与其他编程语言不同，工作线程与主线程不同。 这不是并行，而是一种主/从（Master-Slave）多线程模型。

worker 中的 JavaScript 代码无法操作 DOM，并且被认为是线程安全的。 记住牢记这一点是我们稍后讨论的小程序双线程模型的重要基础。

那么微信小程序为什么不直接使用浏览器的线程模型呢？为此，我们需要从产品和技术角度来比较小程序和网站的区别。

为什么小程序不使用浏览器的线程模型？

当我第一次接触小程序开发时，我发现它的功能相对于网页来说很弱，而且语法相对于网页来说太简单。我常常讨厌它。 看法。 当时我觉得小程序是依靠微信庞大用户群的技术垄断。

但是，随着我对技术和产品的了解不断深入，我对小程序的态度也从“讨厌”变成了赞扬。 因为在充分了解小程序的产品定位之后，你会发现，对于小程序这样的产品场景，双线程模型是最好的解决方案。 那么，小程序是一个什么样的产品呢？

虽然小程序的宿主是微信，但小程序的版本迭代是独立的，升级和更新是与宿主无关的。 这与网站相同。 换句话说，小程序继承了Web的一些优点，但它们并不是Web。 Web相关技术现在已经非常全面，可以承载非常大规模的应用程序，例如3D地图、游戏等。

小程序的定位是小、美、用完就消失。 。 微信并不寻求实现网页的所有功能，因此在功能上它明显不如网页。 同时，它还具有微信提供的一些功能。 原生组件、系统级、微信生态API等原生特性。

而且，“小程序-微信”的关系与“网站-浏览器”的关系不同。 。 前者更类似于在线编程平台（称为课堂平台），例如 CodePen 或 JSFiddler。 每个程序案例（简称案例）与平台的关系。

从技术的角度来看，一个平台的核心考虑因素之一就是保证案例的逻辑不会损害平台的安全性，同时仍然为案例提供足够的功能。 。 想象一下，如果您能够在 CodePen 上编写一个程序来检索 CodePen 的个人信息，那么也许第二天 CodePen 就会崩溃，您的所有员工都会被解雇。

我们根据这个产品基调来选择技术，接下来是架构师和程序员的工作。

以CodePen为例。 如果您被要求设计这样一个编程平台，您可能会首先考虑使用 iframe，因为所有 Web 功能都可以在 iframe 中使用。 事实上，CodePen使用iframe来显示程序效果，但它并没有完全复制你输入的JavaScript代码到iframe中执行。 相反，代码在插入 iframe 之前会经过编译过程。 这个出发点主要是出于安全考虑，在编译过程中删除了一些危险代码。 其次，你还可以在你的平台上支持更多的语言，比如typescript。 当然还有性能。 性能问题是 iframe 的常见问题，因此我们不会详细讨论它们。

因此，除了使用 iframe 之外，您还需要部署额外的 JavaScript 编译器。 CodePen 必须确保 JavaScript 代码在每种情况下都是线程安全的。 最基本的是防止程序操纵CodePen网站的DOM。 有两种方法可以实现此目的。

其中之一是 Web Worker。

p>

另一个选择是使用 Shadow DOM。

Web Workers 是线程安全的。 Worker 中的 JavaScript 代码无法检索 Window 和 Document 对象，因此它无法操作 DOM。 另外，worker的线程安全特性意味着worker内部的代码在执行过程中不会阻塞外部GUI渲染线程，两者可以并行运行。

Shadow DOM 是 Web 组件规范的一部分。 将 ShadowRoot 模式设置为关闭可以防止 ShadowRoot 节点被检索并且无法操作内部 DOM。

两者相比，Shadow DOM 的兼容性不如 Web Workers，距离大规模使用还很远。因此，Web Worker方案更加实用。

这形成了一个简单的双线程模型。 工作线程负责计算，并将结果通过postMessage传递给主线程，主线程负责渲染。

但是，这个模型存在严重的性能问题。 Web Workers 消耗大量资源。 除了计算消耗之外，与主线程通信的过程也会造成显着的性能下降。

有没有办法既能达到和Web Worker一样的线程安全性，同时又兼顾性能和保证良好的用户体验，这就是微信小程序使用双线程模型的主要目的。

安全高效的双线程模型

虽然前面用CodePen这样的编程平台来比喻，但小程序和CodePen的技术要求并不完全相同。 主要区别在于小程序不必支持所有 HTML。 标签仅提供有限数量的 UI 组件。 根据小程序的产品定位，小程序的主要技术要求可以概括如下： （新技术和架构是为了解决特定问题而设计的，因此您需要了解您的小程序的主要技术要求。）

限制和指定UI组件类型

p>

Mini。程序在声明组件时不使用原生HTML标签，而是使用了微信提供的一些内置的基础组件。 当然，你也可以自定义组件，但这也是通过内置基础组件的组合来实现的。 。

保证逻辑线程安全，不允许直接操作UI组件

小程序更新UI的方式遵循Vue/React等MVVM框架的方法，类似于 JavaScript 代码无法直接操作 DOM（仅作为示例）（事实上，小程序没有 DOM 的概念），但更新状态（setState）会异步更新 UI。 此过程使用 VDOM 和高效的差异。 算法（这两点我就不解释了，课后大家可以自行查找相关资料）。

无需依赖微信即可在线更新

小程序的宿主是微信。 何时使用对于纯原生实现来说，小程序版本更新需要依赖微信，必须与微信代码一起发布，这是绝对不可能的。 纯Web实现的安全性和性能很难保证。

小程序必须能够将其资源托管在云端（例如网络），并能够独立更新。 同时，它必须能够确保足够的安全性和性能。 所以最终小程序采用了混合架构模式。 这意味着使用 Web 视图来渲染 UI，并使用类似于 Web Worker 的单独线程来执行逻辑。 这是双线程模型。

应尽可能提高性能，以保证良好的用户体验。

上述基于Web Worker的简单双线程模型的性能是一个大问题。 小程序的双线程模型采用独立的“主线程”，而不是Web Worker的子线程，保证了相对较好的性能。

渲染线程和逻辑线程

小程序中的双线程是指渲染线程和逻辑线程。 这两个线程分别负责渲染 UI 和执行 JavaScript 代码。 如下图所示：

渲染线程使用Webview来渲染UI。 Webview是一个完整的类似浏览器的执行环境，具有运行JavaScript的能力。 不过，小程序并不是把逻辑脚本放入Webview中运行，而是使用客户端将逻辑层拆分成与Webview并行的线程，由JavaScript引擎运行代码，iOS上的JavaScriptCore、iOS上的JsCore环境Android，并运行 nwjs IDE 工具。 由腾讯X5内核提供支持。

逻辑线程是只能运行 JavaScript 的沙箱环境。 它不提供用于 DOM 操作的 API，因此您无法直接操作 UI。 只能通过setData更新数据来异步更新UI。

事件驱动的通信方式

注意上图中渲染线程和逻辑线程之间的通信方式。 与Vue/React的区别在于渲染层和小程序逻辑层之间的通信。这封信在两方之间并不直接传递数据或事件，而是由原生者作为中介传递。

整个过程是典型的事件驱动模型。

渲染层（也称为视图层）通过用户交互触发某些事件。

事件随后被传递到逻辑层。

逻辑层通过一系列逻辑操作、数据请求、接口调用等将处理后的数据传递给渲染层。 它是如何工作的；

最终渲染层将数据渲染到可视化 UI。

这种数据驱动的UI模型是前端编程领域比较推崇的编程范式。 如果你是一个拥有5年以上开发经验的前端开发人员，你会首先接触到这种模式。 在那之前，使用 JavaScript 进行 DOM 操作几乎是一个“行业规则”，所以使用它时肯定会有些不舒服。 有许多书籍、博客和教科书可以帮助您从 DOM 操作开始开始使用前端。 现在这些看起来肯定有点不合适。

另一方面，这种逻辑和渲染分离的线程模式确保了运行在逻辑线程沙箱中的 JavaScript 代码是线程安全的。 另一方面，渲染线程的计算复杂度很低，保证了对用户交互的快速响应，提高了用户体验。

总的来说，相比浏览器线程模型，小程序的双线程模型解决或避免了Web Worker的性能问题，同时提供了与Web Worker相同的线程安全性。 从性能和安全角度都取得了改进。 双线程模式可以概括为针对浏览器现有进程和线程管理模式限制的小程序特定场景下的一种改进的架构方案。

总结

在我看来，一个程序员的核心能力和竞争优势并不在于完全理解特定语言或框架的API，而在于理解基础知识和了解原理。 对于小程序开发者来说，工作中出现技术问题时的解决方案往往是基于底层原理（或者更简单地说，在找工作面试时，没有人问小程序的语法）。

路径通过了解小程序双线程模型的背景、设计和通信，大家可以更好地理解小程序的底层架构。 当后续工作需要类似场景时，也可以作为参考。 当然，了解小程序的双线程模型并不是您的唯一目标。 这些知识可以为日常开发工作提供一些灵感，主要是从性能角度来看。

在保留功能的同时尽可能多地使用它。 简单的结构化用户界面。

最小化 JavaScript 逻辑的复杂性。

尽量减少调用 setData 的频率和传输的数据量。

想要了解更多编程知识，请观看编程视频。 ！

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

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

下载

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

• applet中多线程模型的深入分析（多线程工作）
• 深入分析小程序中的双线程模型(微信小程序有两个线程)

本文由主机参考刊发，转载请注明：小程序双线程模型详解（小程序多线程） https://zhujicankao.com/141922.html