一、背景
由於是平台部門，團隊主要業務是平台基礎件SDK 以及工具化服務。在以往的開發中，涉及到UI的業務 ：隱私協議&用戶協議彈窗、公告、登錄、實名認證、客服等功能都是使用原生開發，在近兩年的版本迭代中，為了android、iOS以及web都能共用以及方便調整、快速迭代，這些涉及到UI界面的功能逐漸web化。從打點日志來分析，國內的業務，web化的頁面表現還算可以，基本很少出現白屏或是加載失敗的問題，android端在一些少數機型上出現了適配問題，也陸續解決；但是從發行全球的業務日志分析，有一定的比例白屏（webview加載web頁面失敗），雖然加了刷新功能，但是還是有一定的用戶受到影響，從數據上看，歐美較好，巴西、越南、泰國、印尼等欠發達地區可能是網絡以及移動設備老舊等因素更容易出現問題。
二、優化
1、常規的優化手段
- 靜態模板資源放在端側
- 數據預加載
- 合理使用cache
- 自動刷新機制
這些手段基本上夠用。
2、特別手段：SSR
關於SSR的優勢就不再列舉，可以自行搜索或是參照文章后文鏈接，此處只分析我們自身業務。
由於我們業務，隱私協議&用戶協議彈窗、強更、公告等要么是在啟動首屏、要么出現在第二屏，對於某個游戲或是應用來講，某個版本的隱私協議&用戶協議彈窗、強更、公告等內容是一致的，若通過CSR，對於每個設備都要處理一次web的加載到渲染的過程。有時候，SDK里的靜態模板資源由於功能迭代較快，可能失效，業務方又來不及更新SDK，勢必會出現老的sdk會加載一個全新的web頁面。在一些安卓低端設備或是網絡差的情況下，出現加載失敗的概率又有所增加。這時候SSR的優勢就體現了出來。具體可以參照阿里去年雙十一SSR優化實踐。
3、組合手段
單純手段並不是絕對的問題解決方式，需要疊加手段：
- html壓縮包預加載+數據預加載
- SSR機制
- 若SSR超時或是失敗
- 使用端側靜態模板資源 + 數據
- 若端側靜態模板資源過期
- 查看cache，若無cache
- 加載全新web頁面
- 若加載失敗，自動刷新機制
當然還有一些UI交互優化，提升用戶體驗。另外，盡可能合理的打點幫助我們分析實踐效果，以及后續的再優化。
三、參照
https://segmentfault.com/a/1190000038224642
https://ssr.vuejs.org/zh/
https://segmentfault.com/a/1190000019462324?utm_source=sf-similar-article