新技能Get：如何提升移動網頁的載入速度

在過去，Web 開發者都是基於改善硬體或者提高帶寬速度來優化用戶體驗。但是在近幾年，爆炸式的移動 Web 瀏覽器的使用打破了這個途徑。低帶寬，高延遲，小內存，低處理器性能的移動設備環境，迫使開發者不得不想辦法通過優化前端頁面的性能來滿足用戶的性能預期。

上一篇我們講解了，移動網路加速可以借鑒 PC 端的經驗和使用更新的 HTTP2 協議來進行優化，這篇文章，主要介紹如何通過優化蜂窩網路以及更智能的載入方案，實現移動網頁響應速度的蛻變！

具有實力的內容服務商可以把資源配置在離用戶地理位置更近的地方，縮短最後一公里。

與移動網路服務商合作共同開發演算法，實現實時自動調整互聯網路由，避免網路擁堵、丟包與離線問題。

還可以採用優化 TCP 協議的方法，通過藉助主流的 Cubic、Bic 以及 Westwood 演算法，可以有效的避免網路擁堵。

此外，還可以研究演算法改善 NAT 嵌套導致的網路延時，也可以直接通過 IPV6 的連接協議規避 NAT 的延遲問題。

設計更加智能的載入方案

採用分段載入和隱藏載入

分段載入又稱懶載入，它能夠在用戶滾動頁面的時候自動獲取更多的數據，從而可以很大程度上減少伺服器端的資源耗用。諸如 Lazyload.js 或 Belazy.js 都是非常成熟易用的開發包。

隱藏載入是在頁面顯示後再載入用戶暫時看不到的信息，諸如圖片展示窗里除了第一張圖片，其他圖片都可以採用隱藏載入的技術。

採用預載入技術

1、資源預載入目的是讓瀏覽器在空閑時間下載或預讀取一些文檔資源，用戶在將來將會訪問這些資源時瀏覽器能快速的從緩存里提取給用戶。

2、預載入技術不僅支持 PC，也已經支持 Android 系統，可惜的是目前尚不支持 iOS Safari。

3、事實上，Prefetch 是網頁優化里 Prebrowing 的一部分，開發者還可以通過 DNS-Prefetch , Subresource，Preconnect，Prerender 等技術來實現預先解析 DNS 與提前渲染等優化。

通過機器學習的手段智能載入

1、通過機器學習的方法，網站可以自動收集並分析用戶的瀏覽習慣與訪問信息，然後通過預載入的手段將最有可能訪問的信息提前載入完成。

智能調整圖片解析度

圖片通常佔用了 Web 頁面載入的大部分網路資源，也佔據了頁面緩存的主要空間。 根據統計，一個站點平均 62% 的內容都是由圖片組成。管理這些圖片除了需要考慮到圖片的大小、格式、旋轉、藝術處理、增加水印、存儲空間等，還要顧及海量的設備的屏幕尺寸，以及適應終端上運行的瀏覽器。

我們可以通過圖像質量處理以及終端適配智能化的方法，實時動態的根據移動終端的屏幕裁剪調整圖片，保證用戶在載入頁面時就獲得所需的圖片渲染，避免向網頁發送大於可視區域的圖片時導致的資源浪費。

福利放送

以上所講的這些頁面快速載入的技術手段，希望幫助讀者了解更有效的實現途徑，當然，如果你認為這些文字內容還不夠的話，可以參加下面提到的深度技術在線課堂培訓。

阿卡邁推出的 HTTP 在線課堂第二期，以圖像質量處理與終端適配的智能化為主線，為讀者免費放送海量圖片的創建、存儲與管理技術。課堂主講內容：

感知質量演算法；

如何基於設備屏幕自動調整圖片大小；

根據不同瀏覽器選擇最合適的圖片。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！