H5 和小程序架构有什么差异

我们知道像是一般我们常用到的 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 应用中都有被应用,但他们之间的体验度和产品的完整性都有一定的差异,究其核心原因是因为他们在架构上有着不同的流程和处理办法,技术的持续发展和创新出现了小程序这种更为完善和先进的技术形态,也让小程序能够快速的发展和增长。

相关推荐
大怪v12 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍12 小时前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲12 小时前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_13 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒14 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
岛风风14 小时前
关于手机的设备信息
前端
ReturnTrue86814 小时前
nginx性能优化之Gzip
前端
葡萄城技术团队14 小时前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
w_y_fan15 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇15 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端