傳統(tǒng)流程
通常將html妥曲、js个粱、css等靜態(tài)資源放入cdn上古毛，然后頁面加載后，再通過CGI去拉取最新的 數(shù)據(jù)都许，進行拼接展示稻薇。 這樣可以利用CDN的多低部署和就近接入等優(yōu)勢，同時提高了服務(wù)器的并發(fā)能力
CGI是啥:不是一種語言床绪，也不是一種技術(shù)断凶，而是一種模式尔许，Common Gateway Interface，簡稱CGI案狠。在物理上是一段程序蹬敲，運行在服務(wù)器上，提供同客戶端 HTML頁面的接口莺戒，“通用網(wǎng)關(guān)接口”伴嗡，這就是CGI的中文意思。
換句話从铲，只要是提供HTML的服務(wù)器端程序都可以叫CGI瘪校，APS、PHP名段、JSP這些都是阱扬，你用C語言寫一個可以提供HTML的服務(wù)器端EXE文件，也叫CGI伸辟。
- 用戶點擊后麻惶，經(jīng)過終端一系列初始化流程 ，比如進程啟動信夫、Runtime初始化窃蹋、創(chuàng)建webview等等；
- 完成webview初始化后静稻，開始去CDN上請求html加載頁面警没；
- 頁面發(fā)起CGI請求對應(yīng)的數(shù)據(jù)或者通過localStorage獲取數(shù)據(jù)，數(shù)據(jù)回來后再對dom進行操作更新振湾。
概括：
初始化 webview -> 請求頁面 -> 下載數(shù)據(jù) -> 解析HTML -> 請求 js/css 資源 -> dom 渲染 -> 解析 JS 執(zhí)行 -> JS 請求數(shù)據(jù) -> 解析渲染 -> 下載渲染圖片
可以看出上述流程存在著幾個問題：
- 從外網(wǎng)統(tǒng)計數(shù)據(jù)來看杀迹，用戶的終端耗時在1s以上，這意味著在這1s多的時間內(nèi)押搪，網(wǎng)絡(luò)是完全空閑等待的树酪，非常浪費；
- 頁面的資源和數(shù)據(jù)完全依賴于網(wǎng)絡(luò)大州，特別是用戶在弱網(wǎng)絡(luò)場景下续语，頁面會出現(xiàn)很長時間的白屏，體驗非常差摧茴；
- 因為頁面的數(shù)據(jù)依賴于動態(tài)拉取绵载，加載完頁面后，往往看到的是一些模塊先轉(zhuǎn)菊花苛白，再展示娃豹，體驗也是非常不好的。同時這里涉及到較多數(shù)據(jù)更新购裙，經(jīng)常要更新DOM 懂版，性能上也有不少開銷。
優(yōu)化方案
終端優(yōu)化
針對終端耗時1s以上的情況躏率，做以下優(yōu)化
- webview 池：可以用兩個或多個 webview 重復(fù)使用躯畴，而不是每次打開 H5 都新建 webview民鼓。不過這種方式要解決頁面跳轉(zhuǎn)時清空上一個頁面，另外若一個 H5 頁面上 JS 出現(xiàn)內(nèi)存泄漏蓬抄，就影響到其他頁面丰嘉，在 APP 運行期間都無法釋放了
- 預(yù)加載：在一個進程內(nèi)首次初始化 webview 與第二次初始化不同，首次會比第二次慢很多嚷缭。原因預(yù)計是 webview 首次初始化后饮亏，即使 webview 已經(jīng)釋放，但一些多 webview 共用的全局服務(wù)或資源對象仍沒有釋放阅爽，第二次初始化時不需要再生成這些對象從而變快路幸。我們可以在 APP 啟動時預(yù)先初始化一個 webview 然后釋放，這樣等用戶真正走到 H5 模塊去加載 webview時就變快了付翁。
服務(wù)端渲染-靜態(tài)直出
服務(wù)器端拉取首屏數(shù)據(jù)通過Nodejs進行渲染简肴。然后生成一個包含了首屏數(shù)據(jù)的html文件，這樣展示首屏的時候百侧，就可以解決內(nèi)容轉(zhuǎn)菊花的問題了砰识。
缺點是：服務(wù)器端處理耗時增加。不過現(xiàn)在html都會發(fā)布到cdn上移层，webview直接從cdn上面獲取仍翰，這塊耗時對用戶沒有造成影響。
客戶端優(yōu)化
- 降低請求量： 合并資源观话、減少HTTP請求。minify/gzip壓縮越平、webp频蛔、lazyload。
- 加快請求速度： 預(yù)解析dns秦叛，減少域名數(shù)晦溪、并行加載、cdn分發(fā)
- 緩存： http協(xié)議緩存請求挣跋、離線緩存mainfest三圆、離線數(shù)據(jù)緩存localStorage
- 渲染： js/css優(yōu)化，加載順序
離線預(yù)推
頁面發(fā)布到cdn上后避咆，webview需要發(fā)起網(wǎng)絡(luò)請求去拉取舟肉，當(dāng)用戶在弱網(wǎng)情況下，這個加載時間就很長查库。于是我們通過離線預(yù)推的方式路媚，把頁面的資源提前拉取到本地。當(dāng)用戶加載資源的時候樊销，相當(dāng)于從本地加載整慎，即使沒有網(wǎng)絡(luò)脏款，也能展示首屏頁面，這個也就是大家熟悉的離線包裤园。
預(yù)加載
用戶收到push的時候撤师，可以利用后臺來提前獲取數(shù)據(jù)
總結(jié)優(yōu)化思路：
從終端優(yōu)化、客戶端優(yōu)化拧揽、服務(wù)端渲染丈氓、離線預(yù)推、預(yù)加載等方面優(yōu)化强法，思路從
緩存万俗、預(yù)加載、并行方面出發(fā)考慮饮怯。緩存一切網(wǎng)絡(luò)請求闰歪、盡量在用戶打開之前就加載好所有內(nèi)容，能并行做的事情不串行做蓖墅。
