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

為推進Web技術的發展，Brilliant Open Web團隊特推出每月一期的《移動Web加速技術月報》，該月報將整理較流行的移動Web加速技術，并跟進各項技術的進展和發展方向，以期幫助開發者了解或選用相關的技術，把握技術發展趨勢。歡迎關注【OpenWeb開發者】公眾號并回復“加群”，一起探討相關技術。

一、內容回顧

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

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

二、相關技術介紹：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的方式來滿足的，從效果實現來看，能解決上述描述的大部分問題。

但類似更順滑、更有效的預取/預渲染效果，我們希望能讓更多的人享受到。所以從長期來看，推進預取/預渲染在瀏覽器標準實現上的能力增強，是一種更合理的方式。

三、主要技術進展

本月報將收錄移動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個。

四、總結

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

Brilliant Open Web

BOW（Brilliant Open Web）團隊，是一個專門的Web技術建設小組，致力于推動 Open Web 技術的發展，讓Web重新成為開發者的首選。

BOW 關注前端，關注Web；剖析技術、分享實踐；談談學習，也聊聊管理。

關注 OpenWeb開發者，回復“加群”，讓我們一起推動 OpenWeb技術的發展！

總結

以上是生活随笔為你收集整理的移动Web加速技术月报第2期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。