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

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

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

1、內容回顧

在上一期的月報中，咱們梳理了移動Web加速技術的方向，並介紹了頁面雲加速相關的技術——頁面雲加速的主要核心其實就是使用雲端緩存或代理的方案，讓用戶能經過更快的網絡獲取加載頁面。主要的核心技術點有兩部分：基於CDN的頁面Cache或代理、基於端（Web容器或移動瀏覽器）與雲端交互的協議機制。

本期，咱們將聚焦到Web頁面的預取和預渲染相關的技術上。

2、相關技術介紹：Web頁面的預取和預渲染

頁面快速加載是提高移動Web體驗的一個很是重要因素。頁面自己的渲染性能是很重要，但頁面還有一些關於瀏覽器渲染性能之外的性能體驗瓶頸。

當網站已經按照一些標準（相似AMP/MIP，或者簡單的靜態化基礎HTML頁面）進行構建以後，頁面的渲染性能會被極大改善，若是但願頁面能達到瞬時展示的體驗，還依賴相似搜索結果頁自己的內容分發平臺提供更強大的預取和預渲染能力。

1. 瀏覽器預渲染/預取 API 的一些問題

移動瀏覽器下，點擊搜索結果頁所展現的某一結果，頁面被渲染前有以下環節須要執行： 域名解析、創建鏈接、發起請求、處理請求、網絡傳輸、頁面渲染、資源加載。

對於移動互聯網用戶來講，這些環節太多，會耗費不少的時間，通過百度的實際測試，百度搜索結果中的站點平均首屏時間在3.5s左右。

相似AMP和MIP這類標準已經提供了CDN的緩存和渲染過程的優化，可是對於加載策略，預渲染控制，容器都尚未標準或者基於trick的實現，並無辦法達到瞬時打開的體驗。

主要問題體現以下：

（1）預渲染策略

加載策略一方面考慮的是何時加載頁面和資源，加載多少，從哪裏加載以及加載的優先級。這一塊更多的是業務應用上的考慮，不須要提供標準或瀏覽器的API。

另外一方面考慮的是哪些頁面適合被prefetch/prerender，以及prefetch/prerender對服務的HTTP請求的統計影響。而這一方面是須要有通用的標準（頁面是否適合被prefetch/prerender）的，關於統計上的影響，也須要從瀏覽器發出的HTTP請求上考慮設計新的Policy（Policy Header）供服務端識別。

（2）對預取/預渲染的過程控制

link prefetch/prerender另外一方面的問題是缺少反饋機制，以及對過程的控制。百度對頁面是否進行了prefetch/prerender會有一些產品策略上的需求（提供瞬時展示交互體驗）和過程跟蹤上的需求（幫助決策用戶是否當前環境是否適合prefetch/prerender）。

上述兩個問題都是目前link prefetch/prerender暫未提供的能力。

2. 技術展望

目前在百度搜索中，部分頁面的預取/預渲染能力是經過JS資源請求 API的方式來知足的，從效果實現來看，能解決上述描述的大部分問題。

但相似更順滑、更有效的預取/預渲染效果，咱們但願能讓更多的人享受到。因此從長期來看，推動預取/預渲染在瀏覽器標準實現上的能力加強，是一種更合理的方式。

3、主要技術進展

本月報將收錄移動Web加速技術的主要進展，歡迎讀者一塊兒完善，投稿郵箱：openweb@baidu.com。

1. MIP本月進展

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

MIP新增功能

（1）MIP bind雙向綁定機制和組件上線，提供雙向綁定的特性；可以容許頁面實現數據驅動功能，開發者能夠在任意場景修改數據，並驅動頁面元素變更。

（2）支持頭部async加載JavaScript腳本，腳本能夠和頁面DOM加載同步進行，減小了腳本加載時間的等待，加快了整個頁面的渲染和展示速度。

（3）組件升級：mip-stats-baidu統計組件修復事件追蹤、點出率等BUG；mip-form升級，去掉mip-form中的password和file限制。

MIP校驗升級

（1）mip-vd-baidu組件校驗升級，解決校驗不一致的問題。

（2）script標籤加載腳本校驗，在head加載的JavaScript必須增長async屬性。

2. AMP本月進展

AMP（Accelerated Mobile Pages）是谷歌提供的網頁加速技術，其官方網站是：developers.google.com/amp/。

（1）amp-position-observer動畫組件，使用這個組件來建立一系列的動畫功能，如視差效果，微妙的縮放。

（2）amp-sidebar支持響應式設計。

（3）amp-analytics組件支持mip-video組件的數據統計。

（4）流式廣告支持，可以在不知道廣告尺寸的狀況下加載廣告。

（5）amp bind和amp list組件升級，以加強對新數據的支持。

（6）ampstart模板庫上線，經過ampstart可使用現成的AMP使用和分享AMP模板，模板，快速建立AMP頁面，而不須要從頭構建頁面元素。

（7）AMP 項目啓動兩週年公佈相關數據：AMP頁面已達40億個，AMP站點已達2500W個。

4、總結

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

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