Skip to main content

概览

前端跨端技术经历了从 WebView (H5) -> 逻辑跨端 (React Native / Weex) -> 渲染跨端 (Flutter) 的演进。高级前端需要理解它们在渲染机制、性能瓶颈以及动态化能力上的本质区别。

跨端技术演进路线​

1. Web 技术跨端 (WebView / Hybrid App)​

代表：Cordova, Ionic, 各类 App 内嵌 H5。

  • 原理：App 内嵌一个浏览器控件（WebView），所有的 UI 和逻辑都在这个浏览器里用 HTML/CSS/JS 运行。
  • 优点：开发成本极低，动态化能力最强（随时发版更新）。
  • 缺点：性能最差。复杂的动画、长列表容易卡顿；无法完全调用原生底层能力（需借助 JSBridge）。

2. 逻辑跨端 (原生渲染)​

代表：React Native (RN), Weex。

  • 原理：用 JS 写业务逻辑，但在渲染时，不使用 HTML/DOM，而是将 JS 指令翻译成对应平台的原生控件（如 iOS 的 UIView，安卓的 ViewGroup）进行渲染。
  • 核心特点：
    • 逻辑跨端是基于 JS 引擎（如 Hermes/JSC），通过 Bridge 或 JSI 注入设备能力的 API。
    • 渲染跨端则是使用 Android、iOS 实现 React 的 Virtual DOM 的渲染。
  • 优点：性能远超 H5，接近原生体验；保留了较好的动态化能力（支持热更新）。
  • 缺点：存在 JS 和 Native 之间的通信损耗（老架构的 Bridge 瓶颈）；两端原生控件的差异可能导致 UI 表现不完全一致。

3. 自绘引擎跨端​

代表：Flutter。

  • 原理：彻底抛弃了原生控件，自带一个高性能的 2D 渲染引擎（Skia / Impeller）。不仅逻辑跨端，连 UI 渲染都跨端了，直接调用底层图形 API (OpenGL/Metal) 画图。
  • 优点：性能天花板，丝滑顺畅；真正做到双端 UI 的像素级一致。
  • 缺点：动态化能力极差（iOS 政策限制执行动态下发的机器码）；学习成本高（需学习 Dart 语言）。

4. 小程序跨端​

代表：Taro, uni-app。

  • 原理：基于编译时转换（AST）或运行时适配，将一套 React/Vue 代码编译成微信、支付宝、抖音等不同平台的小程序代码，或者编译成 H5 / RN。
  • 适用场景：国内特有的生态产物，适合需要一套代码通吃国内各大流量平台（微信、字节、阿里系）的业务。