我们知道像是一般我们常用到的 App 都是 hybrid 模式的，特别是例如支付宝、微信、抖音、美团之类的都是以原生+H5的形式进行业务的承载，但是到了后面这些 App 又不约而同的在其中增加了小程序的运行能力。

如果我们对技术层面进行分析会发现，不管是 H5 还是小程序，其实他们的核心都是 Webview。

说到这里我们先搞清什么是 Webview？

用比较官方的语言来讲 WebView 是 WebKit 框架中的核心视图类，用于管理 WebFrame 和 WebFrameView 类之间的交互。要在应用程序中嵌入 web 内容，只需创建一个 WebView 对象，将其附加到窗口，并向其主框架发送一个 load 消息。

用更加直白的语言来翻译就是在移动端系统中，内嵌的可以用来展示 Web 应用的组件，这让移动端可以像打开浏览器一样打开页面。

回到最开始说到的不管是 H5 还是小程序，其实他们的核心都是 Webview，但是他们的核心架构还是有一些区别的，这里我们就进行具体的一些分析和对比。

H5的架构与流程

在他们的架构中最关键的就是渲染流程和通信流程。

1、H5的渲染流程

单看 H5 的渲染流程其实类似于传统的 Web 应用，先由 Native 打开一个 WebView 容器，WebView 就像浏览器一样，打开 WebView 对应的 URL 地址，然后进行请求资源、加载数据、绘制页面，最终页面呈现在我们眼前。

2、H5的通信流程

H5 方案的通信流程也较为简单，由 DOM 触发事件，像 Vue 或者 React 构建的 Web 应用会响应事件，然后通过数据驱动，更新视图。

小程序的架构与流程

小程序的渲染和通信流程和 H5 就有较大的区别，特别是小程序采用了双线程技术，相较于H5 会有一定的优势，下面我们具体来看看。

1、小程序的双线程

我们先来回顾下，传统的 H5 开发中，页面渲染和 JavaScript 的执行是在同一个线程中完成的，这就导致了渲染和 JavaScript 执行互相影响的问题。

小程序引入双线程技术的原因也正因可以解决这个问题，简要来讲就是让小程序将渲染和逻辑分离到不同的线程中，去提高渲染的速度和效率。

再来看看双线程技术具体包括的渲染线程和逻辑线程。

渲染线程

渲染线程顾名思义就是负责页面的渲染和绘制，具体的原理是通过解析和编译小程序的代码构建页面树和组件树，并将其渲染到屏幕上。渲染线程与底层的图形系统是紧密配合的，我们会利用硬件加速等技术快速绘制页面。

这里还要说明下，界面渲染相关的任务全都在 WebView 线程里执行的，再通过逻辑层代码去控制渲染哪些界面。 另外需要提醒的是，一个小程序如果存在多个界面，那么渲染层存在多个 WebView 线程。 

逻辑线程

逻辑线程负责处理小程序的逻辑和交互。

会按照小程序的 JavaScript 代码，专门处理用户的输入信息和 even，并更新页面的状态。

这样做的目的是通过将逻辑和渲染分离到不同的线程，逻辑线程能够独立执行，不会阻塞页面的渲染，保证了小程序的快速响应和流畅的交互体验。

2、小程序的通信流程

小程序的通信流程也并不复杂，整个流程可以这样理解：触发的事件首先需要传递给 Native，再传递给逻辑层，逻辑层处理事件，再把处理好的数据传递给 Native，最后 Native 传递给渲染层，由渲染层负责渲染。

小结

H5 和小程序虽然说在 hybrid 应用中都有被应用，但他们之间的体验度和产品的完整性都有一定的差异，究其核心原因是因为他们在架构上有着不同的流程和处理办法，技术的持续发展和创新出现了小程序这种更为完善和先进的技术形态，也让小程序能够快速的发展和增长。