未來應用官網的H5優化是怎麼回事？

對於一個H5的產品，功能無疑很重要，但是性能同樣是用戶體驗中不可或缺的一環。原本H5的渲染性能就不及native的app，如果不把性能優化做起來，將極大地影響用戶使用產品的積極性。

用戶感受：

當用戶能夠在1-2秒內打開H5頁面，看到信息的展示，或者能夠開始進行下一步的操作，用戶會感覺速度還好，可以接受；而頁面如果在2-5秒後才進入可用的狀態，用戶的耐心會逐漸喪失；而如果一個界面超過5秒甚至更久才能顯示出來，這對用戶來說基本是無法忍受的，也許有一部分用戶會退出重新進入，但更多的用戶會直接放棄使用。

優化的目標，就是所謂的一秒鐘法則，即達成以下的標準：

2g網路：1秒內完成dns查詢、和後台伺服器建立連接

3g網路：1秒內完成首字顯示（首字時間）

wifi網路：1秒內完成首屏顯示（首屏時間）

優化方案

資源載入

首屏載入

用戶從點擊按鈕開始載入網頁，在他的感知中，什麼時候是「載入完成」？是首屏載入，即在可見的屏幕範圍內，內容展現完全，loading進度條消失。因此在H5性能優化中，一個很重要的目的就是儘可能提升這個「首屏載入」的時間，讓它滿足「一秒鐘法則」。

按需載入

首先要明確，按需載入雖然能提升首屏載入的速度，但是可能帶來更多的界面重繪，影響渲染性能，因此要評估具體的業務場景再做決定。

Lazyload

Lazyload，即延遲載入，這並不是一個新的技術，在PC時代也是非常常用的一種性能優化手段。這個方案的原則是讓屏幕外，或者不影響整體效果顯示的圖片、背景等資源，在界面就緒之後再進行網路載入。

滾屏載入

滾屏載入是一種常見的無刷新動態載入數據的方案，通常用在列表形式數據展示中。一方面，數據不是通過翻頁進行載入，這樣就避免了再一次請求和渲染整個頁面；另一方面，數據顯示的數量是受限的，例如第一次只請求了10條數據，也就只需要渲染這10條數據，下拉滾屏的時候，再去獲得下面10條數據。

Media Query（響應式載入）

響應式設計是現在網站設計的一個流行趨勢，隨著移動互聯網的發展，這項技術也越來越受到重視。通過這項技術，我們能夠方便地控制資源的載入與顯示，例如說在解析度不同的手機上，分別使用不同的css，載入不同大小的圖片資源。

第三方資源非同步載入

第三方資源有的時候不可控，比如說頁面統計、地圖顯示、分享組件等，這些第三方資源使用的時候要慎重選擇，充分考察它們對於性能的影響，使用非同步載入的方式進行，防止第三方資源的使用影響到頁面本身的功能。

Loading進度條

在載入時間較長的時候，務必要讓用戶明確感知到載入完成的提示，通常是在載入過程中顯示Loading的進度條，載入完成的時候隱藏它。從心理上，這會讓用戶有一種「期盼感」，而不至於太過枯燥。

對於一些重量級的H5應用，例如遊戲，開始前需要載入很多資源才能讓後面的遊戲過程更為流暢，一個帶百分比進度顯示的進度條就更加重要。

未來應用官網獨創H5優化技術，如果感興趣可以去了解下。