1. 什么是 Hybrid 架構？

Hybrid（混合）架構是指?結合 Web 技術和 Native（原生）技術?的移動應用開發模式，通常由以下部分組成：

• Web 部分：使用 HTML、CSS、JavaScript（或前端框架如 Vue/React）開發的頁面，運行在 WebView（如 Android 的?WebView?或 iOS 的?WKWebView）中。

• Native 部分：使用原生語言（如 Java/Kotlin、Swift/Objective-C）開發的 App 殼，提供底層能力（如攝像頭、GPS、文件系統等）。

典型 Hybrid 架構

┌───────────────────┐
│      Native App   │  ← 提供 WebView 容器 + 原生能力
├───────────────────┤
│       WebView     │  ← 加載 Web 頁面（H5）
└───────────────────┘

Hybrid 的優勢

• 跨平臺：一套 Web 代碼可運行在 iOS/Android。

• 動態更新：Web 頁面可遠程更新，無需發版。

• 開發效率高：前端技術棧開發速度快。

Hybrid 的劣勢

• 性能較低：WebView 渲染性能不如原生。

• 通信成本：Web 和 Native 需要頻繁通信（JS Bridge）。

---

2、Hybrid 通信方式（Native ? H5）

🔁 通信方向

通信方向	描述
H5 → Native	JS 調用 Native 能力（拍照、分享等）
Native → H5	原生通知 JS（登錄成功、跳轉等）

📦 通信方案

一、H5 調 Native：

1. URL Scheme 攔截

原理：H5 通過觸發特定格式的 URL 請求（如?jsbridge://method?params=xxx），Native 攔截后解析并執行對應邏輯。
適用場景：簡單操作（如跳轉頁面、關閉 WebView）。
實現：

// H5 調用
function callNativeByURLScheme(method, params) {const url = `jsbridge://${method}?${JSON.stringify(params)}`;const iframe = document.createElement('iframe');iframe.style.display = 'none';iframe.src = url;document.body.appendChild(iframe);setTimeout(() => iframe.remove(), 100);
}// 調用示例
callNativeByURLScheme('share', { title: 'Hello' });

Native 端攔截：

• Android：重寫?WebViewClient.shouldOverrideUrlLoading()。

• iOS：實現?WKNavigationDelegate.decidePolicyForNavigationAction()。

---

2.? navite 注入：JavaScript Interface（Android） / WKScriptMessageHandler（iOS）

原理：Native 向 WebView 注入全局對象或方法，H5 直接調用。
適用場景：需要返回值或復雜交互。

Android（@JavascriptInterface）

// Native 注入對象
webView.addJavascriptInterface(new Object() {@JavascriptInterfacepublic void showToast(String message) {Toast.makeText(context, message, Toast.LENGTH_SHORT).show();}
}, "NativeBridge");// H5 調用
window.NativeBridge.showToast('Hello from H5');

iOS（WKScriptMessageHandler）

swift

// Native 注入
let userContentController = WKUserContentController()
userContentController.add(self, name: "nativeBridge")
webView.configuration.userContentController = userContentController// 實現回調
func userContentController(_ controller: WKUserContentController, didReceive message: WKScriptMessage) {if message.name == "nativeBridge" {print("收到H5消息:", message.body)}
}// H5 調用
window.webkit.messageHandlers.nativeBridge.postMessage({ action: "share" });

---

二、Native 調用 H5 的常見方案

1. WebView 的?evaluateJavascript?/?stringByEvaluatingJavaScript

原理：Native 直接執行 JS 代碼字符串。

Android

webView.evaluateJavascript("javascript:window.h5Method('" + data + "')", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {// 獲取H5返回值}
});

iOS

// WKWebView
webView.evaluateJavaScript("window.h5Method('\(data)')") { result, error inprint("H5返回值:", result)
}

---

三、完整雙向通信示例

1. 前端封裝

class HybridBridge {// H5 → Nativestatic callNative(method, params) {return new Promise((resolve, reject) => {if (window.NativeBridge?.[method]) { // Androidtry {const result = window.NativeBridge[method](JSON.stringify(params));resolve(JSON.parse(result));} catch (err) {reject(err);}} else if (window.webkit?.messageHandlers?.[method]) { // iOSwindow.webkit.messageHandlers[method].postMessage(params);resolve({ status: 'sent' });} else {reject(new Error('NativeBridge未注入'));}});}// Native → H5 回調注冊static onNativeCall(callback) {window._nativeCallback = callback;}
}// 注冊供Native調用的函數
window.handleNativeEvent = (data) => {if (window._nativeCallback) {window._nativeCallback(data);}
};

2. Native 封裝

Android（Kotlin）

// 注入Bridge
webView.addJavascriptInterface(object {@JavascriptInterfacefun getLocation(): String {return "{\"lat\": 39.9, \"lng\": 116.4}"}
}, "NativeBridge")// 調用H5
webView.evaluateJavascript("window.handleNativeEvent('Native數據')", null)

iOS（Swift）

// 注入Bridge
userContentController.add(self, name: "getLocation")// 調用H5
webView.evaluateJavaScript("window.handleNativeEvent('Native數據')")
window.webkit.messageHandlers.login.postMessage({ userId: 123 });

3. 如何優化 Hybrid 通信方案？

Hybrid 的核心瓶頸是?Web 和 Native 的通信效率，以下是優化方案：

(1) 減少通信次數

• 批量通信：合并多次調用為一次（如 Native 返回 JSON 而非多次回調）。

• 事件訂閱：用?EventEmitter?模式替代頻繁的 JS Bridge 調用。

(2) 優化 JS Bridge

• 使用高性能 Bridge：

  • Android: 用?@JavascriptInterface?替代?prompt/console.log?通信。

  • iOS: 用?WKScriptMessageHandler?替代?UIWebView?的舊方案。

• 預加載 Bridge：在 WebView 初始化時注入 Bridge 代碼，避免運行時延遲。

(3) 數據緩存

• 本地存儲：用?localStorage?或 Native 緩存減少網絡請求。

• 預加載數據：Native 提前加載數據并通過 Bridge 注入到 WebView。

(4) 并行化通信

// 傳統串行通信（慢）
const result1 = await Native.method1();
const result2 = await Native.method2();// 優化：并行通信（快）
const [result1, result2] = await Promise.all([Native.method1(),Native.method2()
]);

(5) 使用 WebAssembly

• 將計算密集型任務（如加密、圖像處理）交給 WebAssembly，減少 Bridge 調用。

---

4. 如何提升 Hybrid 頁面性能？

(1) WebView 優化

• 復用 WebView：避免重復創建 WebView，使用池化技術。

• 預加載 WebView：在后臺提前初始化 WebView。

(2) 前端優化

• SSR/SSG：用服務端渲染（Next.js/Nuxt.js）提升首屏速度。

• 代碼分割：按需加載 JS/CSS（如 Webpack 的?splitChunks）。

• 圖片優化：使用 WebP 格式、懶加載、CDN 加速。

(3) 通信協議優化

• 二進制協議：用 Protocol Buffers 替代 JSON 減少數據傳輸量。

• 長連接：用 WebSocket 替代 HTTP 短連接。