摘要
App應用的功能代碼，通常在用戶訪問之前，就已經以安裝包的形式，通過應用市場下載安裝好瞭。而網頁應用的功能代碼（靜態資源），則是在用戶實際點擊訪問時，才實時下載運行。
這一『用時下載』的特點是一把雙刃劍，既帶來瞭實時更新的靈活性，也造成瞭應用啟動的延遲，導致網頁應用啟動速度遠遠落後於App應用，造成交互體驗和用戶轉化短板。
本文提出一種基於靜態資源預加載技術，提升App內網頁啟動速度的新方案。根據線上項目實踐數據，此方案可顯著提升網頁啟動速度（縮短頁面加載時間30%-50%以上）、提高網頁加載成功率。相比於傳統的離線化技術方案，本方案具有差異性優勢，且能規避iOS WKWebview中無法攔截請求的問題。
1 背景和問題
在App應用開發中，網頁應用（又名H5/WebApp/Hybrid等）以其跨平臺/跨App、開發成本低、迭代試錯速度快的特點，始終占有一席之地。
然而，在上述優勢之外，網頁應用啟動速度慢（尤其是用戶首次訪問時）、點擊轉化率低等問題，使其難以進入核心業務技術選型。
下面我們以微信內的一個頁面為例，從一個普通用戶視角，感受一下網頁應用的啟動過程。
圖1：用戶視角的網頁啟動過程
然後從技術視角，分析一下網頁啟動的幾個關鍵耗時階段。
圖2：技術視角的網頁啟動過程
（註：上述數據根據線下測試數據及部分線上項目TP95用戶數據得出，僅用於說明占比趨勢，不同項目會有一定差異）
從圖中可知，靜態資源下載是最大的耗時環節，那麼，如何解決這一耗時瓶頸？
調研發現，針對靜態資源下載慢的問題，業界常規的解決方案是鏈接預取（link prefetching）。
鏈接預取是一種瀏覽器機制，其利用瀏覽器空閑時間來提前下載用戶在不久的將來可能訪問的文檔。其主要實現思路是：
- 網頁向瀏覽器提供一組預取提示，在完成當前頁面加載後，瀏覽器按照預取提示，開始靜默地下載指定的文檔，並將其存儲在瀏覽器緩存中
- 當用戶訪問預取文檔時，便可以快速從瀏覽器緩存中讀取
- 鏈接預取屬於預加載技術，已成為Web事實標準的一部分
<!-- 鏈接預取示例 -->
<link rel="prefetch" href="https://www.companyA.com/projectA/js/index.abcd1234.js">
<link rel="prefetch" href="https://www.companyA.com/projectA/css/index.abcd1234.css">
<link rel="prefetch" href="https://www.companyA.com/projectA/img/index.abcd1234.png">