小程序与 H5 深度对比及原理解析

你写过小程序/H5，那你知道他们的区别在哪里吗？ 为什么说小程序的性能通常优于 H5? 小程序能访问到 DOM 对象吗？ 小程序的原理是什么？

一. 小程序 VS H5

小程序和 H5 都是轻量级的、可直接在移动设备上运行的应用，但它们之间存在一些关键差异。

1. 运行环境

• 小程序：运行在特定的 APP（如微信，支付宝）内的一个独立的运行环境。📱
• H5：运行在各种浏览器中的，这些浏览器基本上都遵循相同的 Web 标准，因此 H5 应用可以在任何支持这些标准的浏览器中运行。🌐

2. 开发环境和工具

• 小程序：开发需要使用特定的开发工具，如微信开发者工具，阿里巴巴的 IDE 等。你只能使用这些工具提供的 API 和组件进行开发，不能使用大部分的第三方库和工具。🛠️
• H5：开发工具和库则非常丰富。你可以根据自己的需求和喜好选择最适合的工具进行开发，开发自由度较高。🎨

3. 性能和体验

• 小程序：由于小程序的代码运行在一个相对封闭和优化过的环境中，因此其运行效率和性能比 H5 更高。而且小程序可以实现类似于原生 APP 的体验，如 离线访问，深度集成 等。🚀
• H5：H5 的性能和体验则受到浏览器的限制。虽然现代浏览器的性能已经非常好，但是相对于小程序和原生 APP 来说，H5 在运行效率和用户体验上还是有所欠缺。🔍

3.1 小程序热启动

• 小程序：当用户离开小程序或者切换到其他应用，小程序就会被挂起或关闭。如果用户在短时间内回到小程序，通常可以直接恢复之前的状态，这被称为热启动。🔥
• H5：H5 应用的生命周期取决于浏览器的生命周期。当用户关闭浏览器或者浏览器标签页时，H5 应用也就结束了。只有当用户重新打开浏览器并访问该 H5 应用时，应用才会重新启动。🔄

  PS： 补充概念 冷启动： 如果小程序已经被完全关闭（例如用户手动关闭了小程序，或者由于系统资源管理策略导致小程序被关闭），那么用户回到小程序时就需要进行冷启动，即重新加载小程序的代码并启动小程序。此外，小程序的代码在首次打开时会被下载到本地，因此在后续的使用中，可以直接从本地加载代码，无需通过网络下载。

3.2 离线访问

• 小程序：小程序在首次打开时会下载必要的代码和资源文件到本地，因此在后续的使用中，即使没有网络连接，也能够运行基本的功能。这提供了更好的离线体验，尤其在网络环境不佳的情况下。📡
• H5：相比之下，H5 应用每次打开都需要从服务器获取页面和资源，如果没有网络连接，就无法正常访问。虽然有一些技术（如 Service Worker）可以使 H5 应用具有离线访问的能力，但这需要额外的开发工作，而且在实际使用中可能会受到诸多限制。🏔️

3.3 深度集成（系统权限）

• 小程序：小程序运行在特定的 APP（如微信，支付宝）中，因此可以更深入地集成到这个 APP 的生态系统中。例如，微信小程序可以直接使用微信的支付、分享、登录等功能，这些都是浏览器无法提供的。🌲
• H5：H5 应用则主要依赖于浏览器提供的标准 Web API，无法直接访问设备的某些功能或特定 APP 的功能。虽然现代的浏览器 API 已经非常丰富，但是在某些特定的场景下，H5 应用可能无法提供和小程序或原生应用同等的用户体验。🌐

4. 更新机制

• 小程序：小程序的代码包在发布新版本后，需要用户重新打开小程序时才会下载新的代码包。一般来说，小程序平台会在用户打开小程序时进行版本检查，如果发现有新的版本，就会自动下载新版本的代码包。🔄
  • PS: 小程序平台通常支持增量更新，即只下载变更部分的代码，这可以减少下载时间和流量消耗。此外，小程序平台也可能提供一些其他的更新机制，例如预下载、静默更新等，这些都可以帮助提升用户体验。📦
• H5：H5 应用的更新更为简单，只需要在服务器端更新网页和资源文件即可。当用户下次访问网页时，浏览器就会自动加载新的内容。这种方式的优点是可以即时推送更新，无需用户进行任何操作，但是缺点是每次更新都需要用户重新加载所有的内容，即使只有一小部分发生了变化。🛎️

5. 渲染机制

5.1 小程序双线程架构

• 小程序：采用的是一种分离的渲染机制。双线程架构，逻辑层和渲染层是分开的，它们运行在两个不同的线程中。
  • 逻辑层运行在 JavaScriptCore 中，负责数据处理和事件处理等逻辑；
  • 而渲染层则运行在 WebView 中，负责页面的渲染。
  • 这两个线程通过一个数据桥进行通信，JS 线程将需要渲染的数据发送到渲染线程，然后由渲染线程根据这些数据来渲染页面。
  • 性能提升：由于小程序的渲染过程并不依赖于 JS，因此即使 JS 线程发生阻塞，页面的渲染也不会受到影响。这种机制有利于提高渲染效率，减少卡顿，提升用户体验。🚦
  • 小程序由于不支持直接操作 DOM，因此所有的页面更新都是通过数据驱动的，这使得代码更为简洁，易于维护。📝
• H5：使用的是传统的浏览器渲染机制。当页面的数据或状态发生变化时，JavaScript 会直接操作 DOM，修改页面的内容。浏览器会监听这些操作，当 DOM 发生变化时，会重新计算样式，生成新的布局，然后绘制到屏幕上。这种方式的优点是灵活，可以实现各种复杂的效果和交互，但是缺点是性能开销比较大，如果操作不当，可能会导致页面卡顿或闪烁。🖥️

5.2 DOM 访问

• 小程序：中访问不到 DOM：小程序的宿主环境是基于浏览器内核重构的内置解析器，它并不是一个完整的浏览器，官方文档中重点强调了脚本内无法使用浏览器中常用的 window 对象和 document 对象，就是没有 DOM 和 BOM 的相关的 API，这一条就干掉了 JQ 和一些依赖于 BOM 和 DOM 的 NPM 包。也造成再实现一些负责动画的情况下，小程序优势不如 H5🧐

6. 开发成本

6.1 生态 & 学习成本

• 小程序：小程序脱离 W3C 标准，很多第三方库不能直接使用了。小程序本身会增加学习成本。📚

6.2 兼容性

• 小程序：小程序的兼容性主要取决于小程序平台。由于每个小程序平台（例如微信、支付宝）都有自己的 API 和规范，所以一个小程序可能需要针对不同的平台进行适配或修改。此外，小程序也需要考虑不同的设备和操作系统，例如不同的手机型号、屏幕大小、系统版本等。🔄
• H5：H5 的兼容性主要取决于浏览器。由于存在大量不同的浏览器和版本，H5 开发者需要确保他们的应用能在各种浏览器中正常运行。这可能涉及到一些复杂的问题，如浏览器差异、特性检测、降级策略等。此外，H5 应用也需要适应各种不同的设备和屏幕，这可能需要使用响应式设计或其他技术。🌟

二. 知识点补充

1. 小程序增量更新是如何做的？

小程序的增量更新机制主要依赖于小程序平台的设计。具体实现可能因不同的小程序平台（如微信、支付宝等）而有所不同。以下是一种可能的实现方式：

• 当小程序开发者发布新版本时，小程序平台会比较新旧两个版本的差异，并生成一个包含差异信息的补丁文件。
• 然后，当用户打开小程序时，小程序平台会检查用户设备上的小程序版本。如果发现用户的版本落后于服务器上的版本，那么就会下载补丁文件，而不是整个新版本的代码包。
• 接着，小程序平台会应用补丁文件，将用户设备上的小程序更新到新版本。

这种增量更新的方式可以大大减少需要下载的数据量，从而提高更新速度，节省用户的网络流量。此外，因为补丁文件只包含差异信息，所以它通常比完整的代码包要小得多，这使得小程序可以更快地启动和运行。

然而，值得注意的是，增量更新需要小程序平台提供相应的支持，如果小程序平台不支持增量更新，那么小程序在更新时就需要下载整个新版本的代码包。此外，即使小程序平台支持增量更新，也可能存在一些限制或要求，例如对代码包的大小或结构有特定的规定等。

以上是一种可能的实现方式，具体的增量更新机制可能会因不同的小程序平台而有所不同。要获取更准确的信息，建议参考具体的小程序平台的官方文档或者资源。

2. 小程序的双线程架构的原理？

小程序的双线程架构是指其在运行时有两个主要的线程负责处理不同的任务：一个是渲染线程（Render Thread），另一个是逻辑线程（Logic Thread）。

• 渲染线程 主要负责页面的渲染工作，包括解析和展示 HTML、CSS 以及处理用户的交互事件（如点击、滑动等）。在小程序中，渲染线程通常是在 Webview 中运行的，这使得小程序能够利用 Web 技术进行页面的渲染。
• 逻辑线程 则主要负责处理应用的逻辑，包括处理 API 调用、请求数据、处理数据等。在小程序中，逻辑线程通常是在 JSCore 中运行的，这使得小程序能够利用 JavaScript 来编写应用逻辑。

这两个线程是相互独立的，它们在运行时并不共享任何 JavaScript 对象或函数。这意味着，小程序在进行页面渲染和处理应用逻辑时，可以利用多核 CPU 的并行计算能力，提高运行效率。

然而，这两个线程之间仍然需要进行通信。这是通过一种称为数据桥（Data Bridge）的机制实现的。逻辑线程将需要渲染的数据通过数据桥发送到渲染线程，然后由渲染线程根据这些数据来渲染页面。这种通信机制有利于隔离渲染和逻辑处理，防止 JS 的阻塞影响到页面的渲染，从而提高用户体验。

双线程架构的优点是可以提高效率，提升用户体验。但是，由于渲染线程和逻辑线程是分离的，因此小程序不能直接操作 DOM，所有的页面更新都是通过数据驱动的，这使得小程序在处理复杂的页面布局和交互时可能会有些限制。

伪代码模拟

小程序的双线程架构是由小程序的运行环境所支持的，并非可以简单通过一段 JavaScript 代码来模拟实现。实际上，要实现这样的架构，你需要一个可以运行两个独立 JavaScript 环境的运行时，并且还需要一个数据桥来在这两个环境之间进行通信。这涉及到很多底层的实现细节，一般来说，无法在浏览器环境中直接实现。

但是，为了帮助你理解这个概念，我可以提供一个基本的模型，来说明渲染线程和逻辑线程是如何工作和交互的。请注意，这只是一个简化的模型，真实的小程序架构会更加复杂。

首先，我们可以假设有两个线程：renderThread 和 logicThread，它们都是异步运行的。

// 渲染线程
async function renderThread(dataBridge) {
  let data = await dataBridge.receive()
  render(data)
}

// 逻辑线程
async function logicThread(dataBridge) {
  let data = await fetchData()
  dataBridge.send(data)
}

这两个线程通过一个 dataBridge 进行通信。这个 dataBridge 需要有 send 和 receive 两个方法，用于在两个线程之间发送和接收数据。

// 数据桥
class DataBridge {
  constructor() {
    this.queue = []
    this.listeners = []
  }

  send(data) {
    this.queue.push(data)
    this.listeners.forEach((listener) => listener(data))
  }

  receive() {
    return new Promise((resolve) => {
      if (this.queue.length > 0) {
        resolve(this.queue.shift())
      } else {
        this.listeners.push(resolve)
      }
    })
  }
}

然后，我们可以创建一个 dataBridge，并将它传给 renderThread 和 logicThread，让它们开始运行。

let dataBridge = new DataBridge()

renderThread(dataBridge)
logicThread(dataBridge)

当 logicThread 处理完逻辑并获取到数据后，它会通过 dataBridge 将数据发送给 renderThread，然后 renderThread 就可以根据这些数据来渲染页面。

请注意，这只是一个非常简化的模型，真实的小程序架构会更加复杂。在实际的小程序环境中，还需要处理很多其他的问题，如数据同步、错误处理、资源管理等。并且，由于小程序的运行环境与浏览器环境不同，因此在处理一些特定的问题时，可能需要使用不同的方法和技术。

参考资源

传送门

小程序开放文档

原文地址