以Google AMP為例的網頁加速技術研究*

陳貴豪，葉 進，李 琳

(廣西大學計算機與電子信息學院，廣西南寧 530004)

0 引言

當前，移動互聯網進入高速發展的階段。研究報告指出[1]，截至2018年12月，中國PC互聯網月度覆蓋人數達5.09億人，同比下降3.9%；而移動互聯網月獨立設備數達到13.47億臺，同比增長12.8%，移動端網民單日使用時長已達到186 min，超過PC端的2倍。移動互聯網用戶在享受高帶寬、無上限數據流量帶來便利的同時，對低延遲、高響應的需求日益增長。對于移動互聯網開發人員而言，產品的加載性能將決定著用戶的去留，并且已經成為與同類產品競爭的焦點。

降低網頁加載時間(Page Load Time，PLT)，尤其是用戶可感知的網頁加載時間，是眾多網頁加速技術研究的關鍵問題。Galletta等[2]研究網頁延遲對用戶體驗的影響，認為當網頁的顯示時間越長，用戶對網站的興趣逐漸降低甚至可能會放棄該網頁。

現有網頁加速技術研究主要從網絡傳輸協議、網絡拓撲結構和網頁資源調度機制3個層面進行優化。①網絡傳輸協議方面：對傳統HTTP協議改進和開發SPDY[3]、HTTP/2[4]和QUIC[5]協議等，以降低網絡傳輸的時延，難點在于需要對瀏覽器內核的資源調度機制進行重新更改和編譯，對于普通網頁開發者而言，難度極大。②網絡拓撲結構優化方面：采用增加網絡邊緣緩存機制，Vakali等[6]提出在靠近用戶的范圍內部署內容分發網絡(Content Delivery Network,CDN)，對用戶群體密集訪問的網站靜態資源進行緩存，提升資源的命中率，但需要網站的所有者花費巨額資金購置或租用大量服務器。③網頁資源調度優化方面：Wang等[7]提出對頁面資源進行依賴分析，對頁面顯示急需的資源優先加載。Netravali等[8]提出網頁加載時間取決于復雜的網頁資源依賴，要降低網頁加載時間，則需要追蹤網頁資源的深層次依賴關系。例如傳統網頁在加載過程中，需重點解決Document Object Model (DOM)結構樹構建被阻塞的問題，盡可能使非必需資源異步加載。

現有研究還包括客戶端優化、基于代理的加速等?？蛻舳藘灮瘡膬热蓊A取、預渲染和推測加載來降低網絡高延遲對用戶體驗的影響，Netravali等[9]通過在Web服務器預先計算頁面的JavaScript堆和DOM樹降低頁面加載時間。基于代理的加速則是從劃分客戶端和遠程代理服務器之間的負載過程來提高網絡性能。Amazon[10]建立了客戶端與Amazon云之間的處理架構，以提供用戶更快速的移動瀏覽體驗。Shaghayegh等[11]針對App-like類的網頁，提出代理服務器通過分析網頁結構布局靜態資源的相似性，提取并預先傳輸相對固定的靜態資源，客戶端僅需使用較少的流量和帶寬即可填充動態數據資源，提升加載效率。

1 AMP設計與分析

AMP是Google公司于2016年發起的一項開源代碼庫計劃，目的是改進以Google全球搜索為中心的內容生態系統[12]。

Google全球搜索對符合AMP開發標準的網頁進行自動抓取，并將其緩存在Google的CDN。AMP網頁在移動設備上的瀏覽器上以60幀的速度平穩加載，用戶通過Google搜索到對應網站的AMP網頁，就可以體驗網頁的極速加載。AMP的生態系統包括超過2 500萬個網站、100多個技術提供商以及各大主流平臺，涵蓋出版、廣告、電子商務及小型企業等領域[13]。

1.1 AMP設計

AMP由以下3個核心部件構成[14]，分別承擔網頁構建、資源調度和內容緩存的任務。

①AMP HTML。這是使用AMP技術進行改造過的網頁，其本質上是在原始HTML的基礎上，使用自定義AMP組件拓展而成的HTML文件。經過改造后的AMP網頁，移除了大部分的外部網絡資源依賴。

②AMP JS庫。為實現AMP最佳性能的調度工具，它負責資源加載并處理相關的AMP標記，最主要的優化措施是阻塞外部資源的同步加載，僅允許外部資源異步加載。采取了以下措施：一是僅允許異步JavaScript腳本資源執行；二是對外部媒體資源(如圖片、廣告等)必需顯式標定尺寸、位置；三是將所有可執行的異步JavaScript腳本設置在瀏覽器加載的非關鍵路徑下；四是設置資源加載的優先級。

③AMP Cache。一種基于代理的內容分發網絡，基于Google CDN服務器集群，用于緩存符合AMP標準的HTML網頁，搜索引擎會自動抓取、緩存和傳輸AMP HTML網頁。

財政部相繼出臺的兩個關于鄉鎮財政管理改革的指導性的文件：《關于發揮鄉鎮財政職能作用加強財政預算管理的意見》和《關于切實加強鄉鎮財政資金監管工作的指導意見》。明確了鄉鎮財政干什么的問題，即職能問題，在界定鄉鎮財政職能中明確了資金監管的職責，突出了鄉鎮財政管理層級，全面具體的明確了鄉鎮財政的工作職責、工作目標、工作任務和措施，彌補了鄉鎮財政在涉農資金監管工作中無位置、無職責的制度缺陷，要求將鄉鎮財政資金監管工作，作為新形勢下鄉鎮財政的工作方向、工作重點來大力推進。

AMP技術的優勢在于，不需要對用戶客戶端的操作系統和瀏覽器內核進行修改，服務器端也無需改造，需要修改的只有前端開發者的網頁源碼，同時結合并兼容了已有的CDN服務，從網頁資源調度和網絡拓撲結構兩方面降低網頁加載時間。

1.2 基于AMP的PLT分析

網頁加載時間PLT是衡量網頁加載性能的重要指標。影響網頁加載時間的網絡環境因素一般有最小往返時間(Minimum Round Trip Time,min_RTT，以下簡稱最小RTT)、丟包率和網絡帶寬3個因素[15]。網頁加載時間的計算公式如式(1)所示。

(1)

式中：第1項min_RTT表示從瀏覽器發起請求至接收到第1個HTTP響應的第1個字節的最小RTT(忽略服務器的響應與處理時間)。第2項表示在一個確定帶寬的鏈路上將網頁所有對象回傳所需要的最少時間，其中B為網頁大小，單位為Mbit；C為鏈路帶寬，單位為Mbps。第3項T表示瀏覽器將所有網頁頁面渲染，且所有異步資源完成加載所需的時間，即瀏覽器處理時間。

網頁加載時間與流行度緩存機制的應用相關，本研究將網頁加載時間與網頁流行度進行數學分析。流行度(Popularity)是用于描述確定時間內網站中網頁被訪問的頻數及其訪問排名的關系的概率分布。將網頁作為測試樣本集合P，集合P內的網頁訪問排名和訪問頻數滿足冪率Zipf概率模型[16，17]。該冪律模型能夠精確描述短時間內網頁訪問的流行度，其服從概率質量函數。式(2)給出了基于流行度的概率質量函數。

(2)

式中：N是網頁組數；k是相應網頁的頻數排名；s是網頁訪問的流行度，s越大表征用戶訪問集合中的網頁較為集中，反之，越小則比較平均或分散。在反向代理服務器中設置固定的有限緩存空間和替換算法，以構造具有網頁訪問流行度的測試樣本集合。

訪問網頁存在2種情況：①該網頁在反向代理服務器緩存空間中；②該網頁不在反向代理服務器中，需要到源服務器繼續查找。第1種情況的平均查找時間設置為α，第2種情況的平均查找時間設置為β。網頁在反向代理服務器查找到的概率與該網頁的冪律模型和該網頁的頻數排名有關，因此式(1)中的min_RTT可定義為

min_RTT=f(k)×α+(1-f(k))×β。

(3)

結合式(2)可得出式(4)，即基于流行度的PLT計算式：

PLT=f(k)×α+(1-f(k))×β+

(B/C)+T。

(4)

由式(4)，以N=300為例，圖1給出截取網頁頻數排名前20的網頁，展示網頁加載時間PLT分別關于流行度s、鏈路帶寬C的函數關系分析。

需要特別指出的是，瀏覽器處理時間T與軟硬件性能相關，因此只做鏈路帶寬C與流行度s的定量分析。在此，網頁大小B和瀏覽器處理時間T均取平均值，分別為2.56 Mbit和2 s，網頁在服務器查找時間α、β分別取0.05，0.1 s。圖1a中流行度s=1，圖1b中鏈路帶寬C=100 Mbps。

(a) 鏈路帶寬C;(b) 流行度s

2 驗證實驗

2.1 測試環境的網絡拓撲結構

如圖2所示，使用3臺服務器主機與1臺客戶機在局域網內搭建測試環境，使用一個交換帶寬為300 Mbps的路由器有線連接組網，從任意主機到路由器的平均ping值均小于1 ms，用于模擬真實環境下，用戶通過反向代理服務器訪問網站源服務器的應用場景。其中:源服務器1,2均用于部署抓取到本地的網頁資源，使用Apache作為Web服務器軟件[18]。2臺服務器網頁資源自動同步，且以源服務器1為參照。反向代理服務器使用Nginx作為Web服務器軟件[19]，使用權重相同的輪詢方式依次訪問源服務器1，2?？蛻魴C在局域網內部通過反向代理服務器請求并獲取網頁資源。

圖2 測試環境網絡拓撲結構圖

2.2 交叉對比實驗

設計9組交叉對比實驗，分別測試在不同網絡環境下(表1給出網絡環境參數配置)騰訊新聞、CNBC新聞和VOX新聞3個網站的AMP網頁(AMP Page)和原版網頁(Canonical page)的網頁加載時間差異。每組測試在3個網站中各隨機選取相同的100組網頁(包括AMP網頁和原版網頁)，共300組網頁。

表1 測試環境參數配置

2.3 自動化性能測試

針對上述3個網站結構進行分析，設計并實現了分別針對3個網站的、基于Python語言及pyquery框架的腳本，用于解析和抓取網頁文檔資源。為便于進行自動化性能測試，將同一頁面的AMP網頁和原版網頁通過重命名進行區分。表2為AMP網頁和原版網頁在訪問URL上，通過路徑/canonical/和/amp/進行區分，其中[NEWS]的枚舉值集合為{qqnews,cnbc,vox}。

表2 同一頁面的AMP網頁和原版網頁的URL

使用Selenium自動化測試套件、Mahimahi網絡環境模擬工具、Trickle帶寬控制工具和Firefox瀏覽器進行組合測試。Selenium是為瀏覽器開發者或網頁開發者提供的自動化測試套件[20]。Mahimahi是由MIT的Netravali開發并在USENIX會議上提出的，用于模擬網絡環境并記錄HTTP協議請求過程的工具[15]。Trickle是由Google的Marius開發并在USENIX會議上提出的，用于在Unix/類Unix系統上對網絡帶寬進行控制和整形的工具[21]。Firefox瀏覽器是由Mozilla基金會支持的開源項目[22]。

圖3給出自動化性能測試流程。首先使用Trickle限制系統的網絡帶寬，Mahimahi用于限制系統網絡請求的最小RTT和丟包率;然后自動化腳本將自動讀取并調用Selenium控制瀏覽器批量加載網頁;最后Firefox根據腳本的調用加載指定的AMP網頁和原版網頁。

圖3 自動化性能測試流程圖

設計并實現自動化測試腳本，用于自動獲取網頁資源地址，使用Selenium Driver提供的系統接口，調用Firefox官方提供的驅動程序Geckodriver，遠程控制Firefox瀏覽器加載指定網頁，并通過控制臺模塊執行JavaScript腳本，讀取JavaScript運行環境的堆棧信息。

Firefox瀏覽器的設計嚴格遵循W3C提出的相關標準。Firefox提供了在JavaScript運行環境內調取網頁加載時間點的接口window.Performance.timing[23]。本文定義的網頁加載時間可根據計算domContentLoadedEventEnd時間點和navigationStart時間點之差得到。

自動化測試腳本在每次運行前需要將Firefox瀏覽器的緩存和Cookie徹底清空，同時需要將Firefox設置為“每次關閉Firefox時刪除Cookie與網站數據”。腳本在每次執行打開網頁任務時，均調用browser.delete_all_cookies()，以防瀏覽器再次訪問相同網頁時直接讀取瀏覽器內部緩存，導致網頁加載時間的記錄失真。

3 驗證結果

3.1 不同網絡環境下AMP網頁加載時間變化

在搭建的實驗環境中，本文在表2給出的網絡環境配置參數下，對3個網站的AMP網頁和原版網頁分組(Page Groups)進行網頁加載測試，取中位數值和占總數95%的網頁加載時間值。圖4為AMP網頁加載時間相對于原版網頁的降低比例曲線(Plt reduction ratio)。

圖4中，min_RTT 為50 ms時，PLT降低比例最高的是88.61%；Loss為20%時，PLT降低比例最高的是94.17%；Bandwidth為1 Mbps時，PLT降低比例最高的是92.46%。結果表明，最小RTT的升高或丟包率的升高,都將導致AMP網頁加載時間總體逐步上升，AMP網頁的性能表現好，加載時間可容忍，而網絡帶寬的降低對AMP網頁加載時間總體影響有限。

圖4 不同網絡環境下AMP網頁加載時間降低比例

3.2 使用與不使用網頁流行度緩存機制下，AMP網頁加載時間變化

在min_RTT為200 ms，丟包率為0和帶寬為100 Mbps的網絡環境中，分別設置不使用流行度(w/o s)與使用流行度s={1,0.5,0.25}的緩存機制，進行300組網頁加載測試，并得到AMP網頁加載時間的累積分布曲線(Cumulative Distribution Function,CDF)，如圖5所示。結果表明，在相同網絡環境中，流行度緩存機制可以使AMP網頁加載時間最高降低44%。

圖5 流行度緩存機制下AMP網頁加載時間的累積分布曲線

獲得上述結果主要歸結于以下3個方面：

①在網頁結構方面。AMP HTML內的CSS資源完全內聯于文檔內部，對圖片等媒體資源需要標定尺寸。內聯的JavaScript腳本不可同步執行，對于外部鏈接的JavaScript資源必須使用async屬性顯式標定。從本次實驗的所有網頁的結構上看，渲染和顯示資源大部分內聯于網頁文檔之內，騰訊新聞、CNBC新聞和VOX新聞的AMP網頁相比于原版網頁需要發起的網絡請求更少，因此在min_RTT、丟包率和網絡帶寬方面均占有優勢。

②在資源調度機制方面。AMP JS在網頁渲染加載期間，阻止瀏覽器按照資源在頁面內的順序排布次序進行加載，優先對CSS結構樹進行渲染，優先構建DOM結構樹，阻斷任何將要阻塞DOM結構樹構建的JavaScript腳本的解析。3種新聞網站原版頁面內的資源排布比較雜亂，除騰訊新聞的原版網頁在資源排布上比較接近AMP網頁之外，內聯的JavaScript腳本可以隨時阻塞DOM的構建。相比之下，AMP網頁的資源調度機制更優。

③在流行度緩存機制方面。具有流行度緩存機制的代理服務器通過緩存網頁訪問的相關資源，提高網頁資源在代理緩存中的命中率，從網絡傳輸方面進一步降低傳輸時間。同時也印證了AMP需要依靠Google的CDN服務器集群中運行的AMP Cache，這對于提升網絡資源傳輸效率具有十分重要的作用。

4 結論

本文通過對網頁加載時間和用戶體驗的研究，對Google AMP網頁加速技術進行分析、研究和自主設計實驗。實驗結果表明，AMP相對于原版網頁，最高可降低94.17%;即使在總體網絡環境為最小往返時間和丟包率較高、網絡帶較低的惡劣情況下,網頁加載時間最高仍能降低92.46%，同時在啟用流行度緩存機制的情況下，最高可再降低44%。然而，AMP性能提升的代價和成本要轉移到網頁開發者，開發復雜度的上升和開發周期的延長，意味著AMP在開發架構上仍有改進和提升空間。AMP與Google最新推出的應用層傳輸協議QUIC結合使用，將有助于進一步提升其性能[24]，也是下一步的研究方向。