Web前端學習：移動Web加速技術

移動裝置已經成為當下使用頻率最高的電子裝置，而移動Web依然是移動裝置中使用頻率最高的應用場景。

站點頁面性能提升可以使得使用者浏覽站點時的體驗得到良好改善，作為其中一條技術分支，移動Web加速技術的方法和技術方案在近幾年得到了不斷發展。無論是内容分發平台、浏覽器提供商、網絡提供商還是Web站點，都在通過各種各樣的移動Web加速技術為使用者提供更良好的頁面浏覽體驗。

移動Web加速技術有哪些方向？

開始的前言内容中我們已經提到，參與移動Web生态的幾個重要角色分别是内容分發平台、浏覽器提供商和網絡提供商以及Web站點。每個角色都在自己所擅長的領域通過技術創新來給使用者提供更快速的移動Web體驗。是以，移動Web加速的幾個技術方向也和幾個重要參與者的角色職能密不可分。

比較重要的技術方向分别是：

1. 頁面加載與緩存

移動Web加速的其中一個重要技術方向是針對頁面加載和緩存相關的加速技術。

在此方向中，頁面分發端、浏覽器和移動網絡是主要的影響因素，頁面加載相關的技術解決方案，也是從這三個影響因素為出發點，來進行技術設計和實作的。

頁面加載加速主要聚焦在頁面雲加速（CDN Cache）以及移動端加速、頁面預取/預渲染等相關技術點。

2. 頁面建構

移動Web加速的另一個核心技術方向是通過明确頁面的正确建構方法，來提升頁面在渲染和浏覽時的使用者體驗。

移動頁面的渲染對使用者體驗的影響是非常巨大的，直接關系到使用者在打開頁面時能否很快的看到首先想要浏覽的内容（首屏渲染）。

影響首屏渲染的因素非常多，通過正确的頁面建構方法，可以進一步提升站點頁面的首屏渲染性能并且不傷害使用者的浏覽體驗。

相關技術介紹

在每期的網頁加速技術月報中，我們都會為大家介紹相關的加速技術知識點。本期先為大家介紹頁面雲加速相關的技術知識。

頁面雲加速的主要核心其實就是使用雲端緩存或代理的方案，讓使用者能通過更快的網絡擷取加載頁面。主要的核心技術點有兩部分：基于CDN的頁面Cache或代理、基于端（Web容器或移動浏覽器）與雲端互動的協定機制。

1.基于CDN的頁面Cache或代理

此技術其實在近幾年已經非常成熟，無論是各種雲服務解決方案還是CDN服務提供商都已經有非常成熟的技術能力。此項技術的思路是從Web服務提供者角度來提供更好的網絡環境來進行移動Web加速。在此就不做更多的介紹。

2.基于端與雲端互動的協定機制

最近兩年開始興起的新的雲端加速技術方案，該技術在雲端的Cache機制（主要是CDN）的基礎上，使用端來代理使用者頁面加載行為，調用雲端的Cache頁面傳回給端使用。此項技術的思路與前者不同的是它想解決使用者在該端上（Web容器或移動浏覽器）的所有移動Web站點的通路加速，而不是某一個站點或已經提供了CDN通路的站點。主要作用是可以提升使用者在該端上的Web浏覽體驗，讓使用者體驗優于其他競品。

主要技術 有：Google AMP Cache、Baidu MIP Cache、UC浏覽器雲加速、QQ浏覽器雲加速等。

主要技術進展

1.AMP本月進展

AMP（Accelerated Mobile Pages）是谷歌提供的網頁加速技術，其官方網站是：

https://developers.google.com/amp/

。AMP在本月不僅進行了技術方面的優化，還計劃在全球範圍内進行推廣，具體如下。

（1） AdWords 支援AMP化廣告落地頁：AdWords是廣告提供商，使用AMP落地頁能夠快速加載，提高廣告轉化率。AMP的表單，内容實時更新和統計支援，使AMP适用于廣告落地頁。

（2）CONDÉ NAST是如何使用AMP的： 

CONDÉ NAST擁有多個新聞業務，選擇AMP不是因為原來頁面慢，而是相信Google的服務和CDN； NAST公司将AMP和CMS結合使用，自動将新聞生成為AMP頁面。

（3） AMP技術團隊将要進行全球巡回推廣：包括新加坡、悉尼、倫敦、北京、上海等地，感興趣的讀者可以關注。

2.MIP本月進展

MIP的官方網站是：

https://www.mipengine.org/

，GitHub位址是：

https://github.com/mipengine/

。MIP在本月也更新了諸多新功能，進行了一系列更新，具體如下。

MIP新增功能

（1）增加儲存功能，使用localStorage和fetch實作。儲存功能可用于代替cookie儲存使用者設定，登入狀态，攜帶資訊，與伺服器進行資料通信。

（2）MIP-Cache連結全量上線二級域名，詳細說明及影響見《MIP-Cache域名更新》。

MIP更新功能

（1） mip-video 視訊元件更新。支援source多視訊源播放。

（2）mip-showmore 折疊元件互動更新。支援展開後不再顯示收起按鈕(

https://www.mipengine.org/examples/mip-extensions/mip-showmore.html

)。

（3）mip.js 更新。修複a連結在mip-iframe中不能跳出的問題。

校驗規則更新

在9月初，MIP更新了少量校驗規則，對90%以上的MIP頁無影響，保證MIP校驗的嚴謹性。更新後的規則為：

（1） 對 head 中 base 标簽增加了限制，避免cache改寫後連結指向有問題。

（2）強制要求頁面引用https 的 mip.js，避免腳本被不法劫持。

（3）認定src=” “（引号之間隻有空格）情況等同于src=”“，視内容為空。

（4）更新template src校驗，支援文檔中src={{url}}的寫法。

進行中

mip-bind 元件支援資料雙向綁定。頁面異步更新，可用于電商等複互動頁面。

MIP-Cache 支援傳回webp圖檔。使用壓縮率更高的圖檔，減少圖檔大小。

四、總結

移動Web加速的下一個方向應該是探索頁面加速上的标準政策分級，并影響内容分發平台、搜尋引擎等流量入口使用标準的頁面性能分級來進行更廣泛層面的引導，提升真實使用者接觸到的網際網路站點的頁面體驗。

感謝閱讀 喜歡看小編文章的點個訂閱或者喜歡！小編每天都會跟大家分享文章，也會給大家提供web前端學習資料。