移动Web加速技术月报第1期
作者 | Brilliant Open Web團隊breezet、JennyL
編輯 | 尾尾
為推進Web技術的發展，Brilliant Open Web 團隊特推出每月一期的《移動Web加速技術月報》，該月報將整理較流行的移動Web加速技術，并跟進各項技術的進展和發展方向，以期幫助開發者了解或選用相關的技術，把握技術發展趨勢。歡迎關注【OpenWeb開發者】公眾號并回復“加群”，一起探討相關技術。
一、前言
移動設備已經成為當下使用頻率最高的電子設備，而移動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加速技術及其最新進展，可以發送郵件到 openweb@baidu.com，也可以關注【OpenWeb開發者】公眾號并回復“加群”，一起來探討相關技術，與我們攜手推進Web技術的發展！
總結
以上是生活随笔為你收集整理的移动Web加速技术月报第1期的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 九个案例简述Web设计原则：简洁清晰
- 下一篇： 【线段树】Segment Tree