移動設(shè)備的不斷優(yōu)化，無論是操作系統(tǒng)還是硬件系統(tǒng)。使用性能都在不斷增強(qiáng)。網(wǎng)頁的性能體驗逐漸變得更明顯。Web網(wǎng)頁的開發(fā)模式的諸多好處在于跨平臺、動態(tài)更新、減少體積、無限擴(kuò)展等等。APP客戶端里出現(xiàn)了更多的內(nèi)嵌web頁面。有些也就是我們說談到的H5頁面，APP也為了節(jié)省開發(fā)成本，把一些功能模塊改成H5方式來實現(xiàn)。

雖然說H5頁面性能變好了，但如果沒針對性地做一些優(yōu)化，體驗還是很糟糕的，主要兩部分體驗：

1.頁面啟動白屏?xí)r間：打開一個 H5 頁面需要做一系列處理，會有一段白屏?xí)r間，體驗糟糕。

2.響應(yīng)流暢度：由于 webkit 的渲染機(jī)制，單線程，歷史包袱等原因，頁面刷新/交互的性能體驗不如原生。

本文先不討論第二點(diǎn)，只討論第一點(diǎn)，怎樣減少白屏?xí)r間。對 APP 里的一些使用 H5 實現(xiàn)的功能模塊，怎樣加快它們的啟動速度，讓它們啟動的體驗接近原生。

過程

為什么打開一個 H5 頁面會有一長段白屏?xí)r間？因為它做了很多事情，大概是：

初始化 webview -> 請求頁面 -> 下載數(shù)據(jù) -> 解析HTML -> 請求 js/css 資源 -> dom 渲染 -> 解析 JS 執(zhí)行 -> JS 請求數(shù)據(jù) -> 解析渲染 -> 下載渲染圖片

一些簡單的頁面可能沒有《JS 請求數(shù)據(jù)》這一步，但大部分功能模塊應(yīng)該是有的，根據(jù)當(dāng)前用戶信息，JS 向后臺請求相關(guān)數(shù)據(jù)再渲染，是常規(guī)開發(fā)方式。

一般頁面在 dom 渲染后能顯示雛形，在這之前用戶看到的都是白屏，等到下載渲染圖片后整個頁面才完整顯示，首屏秒開優(yōu)化就是要減少這個過程的耗時。這篇文章，我就先給大家介紹一下在前端方面是該如何進(jìn)行優(yōu)化。

一般頁面在 dom 前端優(yōu)化

上述打開一個頁面的過程有很多優(yōu)化點(diǎn)，包括前端和客戶端，常規(guī)的前端和后端的性能優(yōu)化在 PC 時代已經(jīng)有最佳實踐，主要的是：

1.降低請求量：合并資源，減少 HTTP 請求數(shù)，minify / gzip 壓縮，webP，lazyLoad。

2.加快請求速度：預(yù)解析DNS，減少域名數(shù)，并行加載，CDN 分發(fā)。

3.緩存：HTTP 協(xié)議緩存請求，離線緩存 manifest，離線數(shù)據(jù)緩存localStorage。

4.渲染：JS/CSS優(yōu)化，加載順序，服務(wù)端渲染，pipeline。

其中對首屏啟動速度影響最大的就是網(wǎng)絡(luò)請求，所以優(yōu)化的重點(diǎn)就是緩存，這里著重說一下前端對請求的緩存策略。我們再細(xì)分一下，分成 HTML 的緩存，JS/CSS/image 資源的緩存，以及 json 數(shù)據(jù)的緩存。

HTML 和 JS/CSS/image 資源都屬于靜態(tài)文件，HTTP 本身提供了緩存協(xié)議，瀏覽器實現(xiàn)了這些協(xié)議，可以做到靜態(tài)文件的緩存。

總的來說，就是兩種緩存：

1.詢問是否有更新：根據(jù) If-Modified-Since / ETag 等協(xié)議向后端請求詢問是否有更新，沒有更新返回304，瀏覽器使用本地緩存。

2.直接使用本地緩存：根據(jù)協(xié)議里的 Cache-Control / Expires 字段去確定多長時間內(nèi)可以不去發(fā)請求詢問更新，直接使用本地緩存。

前端能做的最大限度的緩存策略是：HTML 文件每次都向服務(wù)器詢問是否有更新，JS/CSS/Image資源文件則不請求更新，直接使用本地緩存。那 JS/CSS 資源文件如何更新？常見做法是在在構(gòu)建過程中給每個資源文件一個版本號或hash值，若資源文件有更新，版本號和 hash 值變化，這個資源請求的 URL 就變化了，同時對應(yīng)的 HTML 頁面更新，變成請求新的資源URL，資源也就更新了。

json 數(shù)據(jù)的緩存可以用 localStorage 緩存請求下來的數(shù)據(jù)，可以在首次顯示時先用本地數(shù)據(jù)，再請求更新，這都由前端 JS 控制。

這些緩存策略可以實現(xiàn) JS/CSS 等資源文件以及用戶數(shù)據(jù)的緩存的全緩存，可以做到每次都直接使用本地緩存數(shù)據(jù)，不用等待網(wǎng)絡(luò)請求。但 HTML 文件的緩存做不到，對于 HTML 文件，如果把 Expires / max-age 時間設(shè)長了，長時間只使用本地緩存，那更新就不及時，如果設(shè)短了，每次打開頁面都要發(fā)網(wǎng)絡(luò)請求詢問是否有更新，再確定是否使用本地資源，一般前端在這里的策略是每次都請求，這在弱網(wǎng)情況下用戶感受到的白屏?xí)r間仍然會很長。所以 HTML 文件的“緩存”和跟“更新”間存在矛盾。

這些只是優(yōu)化H5首屏加載的前端方面的知識，后續(xù)小編講繼續(xù)帶來“阿里技術(shù)分享：H5首屏秒開優(yōu)化方案二、客戶端優(yōu)化”和。