說到 Hybrid App（混合應用）大家都不陌生，因為這種開發模式大行其道發展的這些年取代了很多原生和 Web 應用，為什麼大家對這種「Native + HTML5」的開發模式額外偏愛呢？

因為一方面在一定程度上兼顧了原生應用的優質體驗，另一方面又兼顧到了 HTML5 靈活的開發模式。

這種模式的核心就在於使用了 HTML、CSS 和 JavaScript 語言進行編寫，繼而封裝到原生應用中，這個模式下應用不是在用戶的瀏覽器中顯示，而是在本地應用程式和自己的嵌入式瀏覽器中運行，用戶基本上看不到它。例如，iOS 應用程式將使用 WKWebView 來顯示我們的業務功能，而在 Android 上，它將使用 WebView 元素來實現相同的功能。

不過既然說到 Hybrid App 的核心在於使用 WebView 來實現業務功能的對外展示，那有瀏覽器也必然存在大大小小的毛病，至少說和原生頁面的體驗會有較為明顯的差異。

那是否有方式能夠縮小（或者說一定程度上彌補）和原生的性能差距呢？這也是今天希望進行探討的。

提升載入速度

體驗過 Hybrid App 的都知道，最煩人的就是長時間的白屏載入，背後的原因就是頁面載入速度過慢造成的，所以我第一個關註點就是載入速度。

在 Hybrid App 中，一般是可以通過減少 HTTP 請求、壓縮文件、使用緩存等方法來提升載入速度。

1、減少HTTP數量

我主要想分享兩個辦法，一是可以將多個小的 JavaScript 或 CSS 文件合併為一個文件，從而實現減少請求的數量的目的，但也要註意合併文件時，需要平衡文件的大小和併發請求的數量。第二個辦法是對於多個 icon 或圖片，將它們合併到一個雪碧圖（Sprite Sheets）中，然後使用 CSS 的 background-position 屬性來顯示不同的圖標，這個辦法也可以在一定程度上減少多個圖標的 HTTP 請求。

2、壓縮文件大小

在 Hybrid App 中可以通過使用 ImageOptim、UglifyJS 等壓縮工具減少壓縮文件的大小，當然也可以在伺服器端啟用 Gzip 和 Brotli 進行壓縮，這也能夠將在傳輸過程中的資源文件進行壓縮，從而減少網路傳輸量。

3、設置緩存策略

我們可以設置合理的緩存策略，緩存策略比較多：瀏覽器緩存、服務端緩存、本地緩存、緩存清除、緩存優先順序等都可以作為我們的緩存策略，這裡以瀏覽器的緩存機製為例，我們可以將一些常用的文件存儲在用戶的設備上，從而減少網路請求提升載入速度。

優化 JavaScript 性能

JavaScript 是 Hybrid App 中最主要的執行環境，因此 JavaScript 的性能也直接影響到整個 App 的性能。

對於 JavaScript 的性能優化，我主要想到的是2個點：

1、減少 DOM 操作

應該大家都知道頻繁的 DOM 操作會引起重排 reflow 和重繪 repaint ，自然而然的也會影響 App 的性能，這裡推薦批量更新和離線 DOM 來減少操作次數。

批量更新顧名思義就是將多次 DOM 操作合併為一次，再通過一次性更新多個元素，達到減少重排和重繪的效果。一般可以使用 Fragment 文檔片段 來批量添加多個元素，然後一次性插入到 DOM 中。

另外還可以試試離線 DOM 操作，在 DOM 外部進行修改再將修改的部分一次性添加到 DOM，主要可以通過使用字元串拼接、模板引擎、虛擬 DOM 等方式來實現。

2、避免記憶體泄漏

另外還有一個比較重要且需要註意的是 JavaScript 的記憶體管理，在整個管理環節避免記憶體泄漏的問題出現，我們除了可以使用工具來監控記憶體使用情況，還有一些使用的技巧需要註意。例如減少全局變數的使用、手動解除引用 null 、避免迴圈使用引用等。

寫在後面

當然 Hybrid App 性能優化是一個比較複雜的過程，可以實踐的途徑還有其他的角度，像是 WebView 優化是一個非常重要的部分，也是一個值得後續詳細展開細講的部分，這篇文章就先不對 WebView 優化做過多的介紹了。

另外需要說明一點隨著小程式容器技術的持續推動，新的移動混合應用方式「Native+小程式」也開始受到關註，其實技術原理就是以非入侵性的方式把 FinClip SDK 嵌入到現有的 App，讓App 具備小程式運行能力，從而轉變為「Native+小程式」的混合開發模式，這個模式的使用體驗會明顯的好於「Native + HTML5」。

這個模式也是符合用戶越來越重視各個產品使用體驗的趨勢，「原生+小程式」更優質的混合開發模式也會更多的受到開發者的關註和認可。