移動Web加速技術月報第1期

做者 | Brilliant Open Web 團隊breezet、JennyL
編輯 | 尾尾

爲推動Web技術的發展，Brilliant Open Web 團隊特推出每個月一期的《移動Web加速技術月報》，該月報將整理較流行的移動Web加速技術，並跟進各項技術的進展和發展方向，以期幫助開發者瞭解或選用相關的技術，把握技術發展趨勢。歡迎關注【OpenWeb開發者】公衆號並回復「加羣」，一塊兒探討相關技術。

1、前言

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

站點頁面性能提高可使得用戶瀏覽站點時的體驗獲得良好改善，做爲其中一條技術分支，移動Web加速技術的方法和技術方案在近幾年獲得了不斷髮展。不管是內容分發平臺、瀏覽器提供商、網絡提供商仍是Web站點，都在經過各類各樣的移動Web加速技術爲用戶提供更良好的頁面瀏覽體驗。

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

開始的前言內容中咱們已經提到，參與移動Web生態的幾個重要角色分別是內容分發平臺、瀏覽器提供商和網絡提供商以及Web站點。每一個角色都在本身所擅長的領域經過技術創新來給用戶提供更快速的移動Web體驗。所以，移動Web加速的幾個技術方向也和幾個重要參與者的角色職能密不可分。

幾個重要的技術方向分別是：

1. 頁面加載與緩存

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

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

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

2. 頁面構建

移動Web加速的另外一個核心技術方向是經過明確頁面的正確構建方法，來提高頁面在渲染和瀏覽時的用戶體驗。

移動頁面的渲染對用戶體驗的影響是很是巨大的，直接關係到用戶在打開頁面時可否很快的看到首先想要瀏覽的內容（首屏渲染）。

影響首屏渲染的因素很是多，經過正確的頁面構建方法，能夠進一步提高站點頁面的首屏渲染性能而且不傷害用戶的瀏覽體驗。

3、相關技術介紹

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

頁面雲加速的主要核心其實就是使用雲端緩存或代理的方案，讓用戶能經過更快的網絡獲取加載頁面。主要的核心技術點有兩部分：基於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）是谷歌提供的網頁加速技術，其官方網站是「developers.google.com/amp/」。AMP在本…

（1） AdWords 支持AMP化廣告落地頁：AdWords是廣告提供商，使用AMP落地頁可以快速加載，提升廣告轉化率。AMP的表單，內容實時更新和統計支持，使AMP適用於廣告落地頁。（相關連接：amphtml.wordpress.com/2017/09/07/…

（2）CONDÉ NAST是如何使用AMP的：
CONDÉ NAST擁有多個新聞業務，選擇AMP不是由於原來頁面慢，而是相信Google的服務和CDN； NAST公司將AMP和CMS結合使用，自動將新聞生成爲AMP頁面。（相關連接：amphtml.wordpress.com/2017/09/08/…

（3） AMP技術團隊將要進行全球巡迴推廣：包括新加坡、悉尼、倫敦、北京、上海等地，感興趣的讀者能夠關注。（相關連接：amphtml.wordpress.com/2017/09/19/…

2.MIP本月進度

MIP的官方網站是：www.mipengine.org/，GitHub地址是：…

MIP新增功能

（1）增長儲存功能，使用localStorage和fetch實現。儲存功能可用於代替cookie保存用戶設置，登陸狀態，攜帶信息，與服務器進行數據通訊。

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

MIP升級功能

（1） mip-video 視頻組件升級。支持source多視頻源播放。

（2）mip-showmore 摺疊組件交互升級。支持展開後再也不顯示收起按鈕(www.mipengine.org/examples/mi…

（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}}的寫法。

進行中

1. mip-bind 組件支持數據雙向綁定。頁面異步更新，可用於電商等復交互頁面。
2. MIP-Cache 支持返回webp圖片。使用壓縮率更高的圖片，減小圖片大小。

4、總結

移動Web加速的下一個方向應該是探索頁面加速上的標準策略分級，並影響內容分發平臺、搜索引擎等流量入口使用標準的頁面性能分級來進行更普遍層面的引導，提高真實用戶接觸到的互聯網站點的頁面體驗。

歡迎各位讀者補充各項移動Web加速技術及其最新進展，能夠發送郵件到 openweb@baidu.com，也能夠關注【OpenWeb開發者】公衆號並回復「加羣」，一塊兒來探討相關技術，與咱們攜手推動Web技術的發展！