以Google AMP為例的網(wǎng)頁加速技術(shù)研究*

陳貴豪，葉 進(jìn)，李 琳

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

0 引言

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

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

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

現(xiàn)有研究還包括客戶端優(yōu)化、基于代理的加速等。客戶端優(yōu)化從內(nèi)容預(yù)取、預(yù)渲染和推測加載來降低網(wǎng)絡(luò)高延遲對用戶體驗的影響，Netravali等[9]通過在Web服務(wù)器預(yù)先計算頁面的JavaScript堆和DOM樹降低頁面加載時間。基于代理的加速則是從劃分客戶端和遠(yuǎn)程代理服務(wù)器之間的負(fù)載過程來提高網(wǎng)絡(luò)性能。Amazon[10]建立了客戶端與Amazon云之間的處理架構(gòu)，以提供用戶更快速的移動瀏覽體驗。Shaghayegh等[11]針對App-like類的網(wǎng)頁，提出代理服務(wù)器通過分析網(wǎng)頁結(jié)構(gòu)布局靜態(tài)資源的相似性，提取并預(yù)先傳輸相對固定的靜態(tài)資源，客戶端僅需使用較少的流量和帶寬即可填充動態(tài)數(shù)據(jù)資源，提升加載效率。

1 AMP設(shè)計與分析

AMP是Google公司于2016年發(fā)起的一項開源代碼庫計劃，目的是改進(jìn)以Google全球搜索為中心的內(nèi)容生態(tài)系統(tǒng)[12]。

Google全球搜索對符合AMP開發(fā)標(biāo)準(zhǔn)的網(wǎng)頁進(jìn)行自動抓取，并將其緩存在Google的CDN。AMP網(wǎng)頁在移動設(shè)備上的瀏覽器上以60幀的速度平穩(wěn)加載，用戶通過Google搜索到對應(yīng)網(wǎng)站的AMP網(wǎng)頁，就可以體驗網(wǎng)頁的極速加載。AMP的生態(tài)系統(tǒng)包括超過2 500萬個網(wǎng)站、100多個技術(shù)提供商以及各大主流平臺，涵蓋出版、廣告、電子商務(wù)及小型企業(yè)等領(lǐng)域[13]。

1.1 AMP設(shè)計

AMP由以下3個核心部件構(gòu)成[14]，分別承擔(dān)網(wǎng)頁構(gòu)建、資源調(diào)度和內(nèi)容緩存的任務(wù)。

①AMP HTML。這是使用AMP技術(shù)進(jìn)行改造過的網(wǎng)頁，其本質(zhì)上是在原始HTML的基礎(chǔ)上，使用自定義AMP組件拓展而成的HTML文件。經(jīng)過改造后的AMP網(wǎng)頁，移除了大部分的外部網(wǎng)絡(luò)資源依賴。

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

③AMP Cache。一種基于代理的內(nèi)容分發(fā)網(wǎng)絡(luò)，基于Google CDN服務(wù)器集群，用于緩存符合AMP標(biāo)準(zhǔn)的HTML網(wǎng)頁，搜索引擎會自動抓取、緩存和傳輸AMP HTML網(wǎng)頁。

財政部相繼出臺的兩個關(guān)于鄉(xiāng)鎮(zhèn)財政管理改革的指導(dǎo)性的文件：《關(guān)于發(fā)揮鄉(xiāng)鎮(zhèn)財政職能作用加強(qiáng)財政預(yù)算管理的意見》和《關(guān)于切實加強(qiáng)鄉(xiāng)鎮(zhèn)財政資金監(jiān)管工作的指導(dǎo)意見》。明確了鄉(xiāng)鎮(zhèn)財政干什么的問題，即職能問題，在界定鄉(xiāng)鎮(zhèn)財政職能中明確了資金監(jiān)管的職責(zé)，突出了鄉(xiāng)鎮(zhèn)財政管理層級，全面具體的明確了鄉(xiāng)鎮(zhèn)財政的工作職責(zé)、工作目標(biāo)、工作任務(wù)和措施，彌補(bǔ)了鄉(xiāng)鎮(zhèn)財政在涉農(nóng)資金監(jiān)管工作中無位置、無職責(zé)的制度缺陷，要求將鄉(xiāng)鎮(zhèn)財政資金監(jiān)管工作，作為新形勢下鄉(xiāng)鎮(zhèn)財政的工作方向、工作重點來大力推進(jìn)。

AMP技術(shù)的優(yōu)勢在于，不需要對用戶客戶端的操作系統(tǒng)和瀏覽器內(nèi)核進(jìn)行修改，服務(wù)器端也無需改造，需要修改的只有前端開發(fā)者的網(wǎng)頁源碼，同時結(jié)合并兼容了已有的CDN服務(wù)，從網(wǎng)頁資源調(diào)度和網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)兩方面降低網(wǎng)頁加載時間。

1.2 基于AMP的PLT分析

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

(1)

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

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

(2)

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

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

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

(3)

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

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

(B/C)+T。

(4)

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

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

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

2 驗證實驗

2.1 測試環(huán)境的網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)

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

圖2 測試環(huán)境網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)圖

2.2 交叉對比實驗

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

表1 測試環(huán)境參數(shù)配置

2.3 自動化性能測試

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

表2 同一頁面的AMP網(wǎng)頁和原版網(wǎng)頁的URL

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

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

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

設(shè)計并實現(xiàn)自動化測試腳本，用于自動獲取網(wǎng)頁資源地址，使用Selenium Driver提供的系統(tǒng)接口，調(diào)用Firefox官方提供的驅(qū)動程序Geckodriver，遠(yuǎn)程控制Firefox瀏覽器加載指定網(wǎng)頁，并通過控制臺模塊執(zhí)行JavaScript腳本，讀取JavaScript運行環(huán)境的堆棧信息。

Firefox瀏覽器的設(shè)計嚴(yán)格遵循W3C提出的相關(guān)標(biāo)準(zhǔn)。Firefox提供了在JavaScript運行環(huán)境內(nèi)調(diào)取網(wǎng)頁加載時間點的接口window.Performance.timing[23]。本文定義的網(wǎng)頁加載時間可根據(jù)計算domContentLoadedEventEnd時間點和navigationStart時間點之差得到。

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

3 驗證結(jié)果

3.1 不同網(wǎng)絡(luò)環(huán)境下AMP網(wǎng)頁加載時間變化

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

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

圖4 不同網(wǎng)絡(luò)環(huán)境下AMP網(wǎng)頁加載時間降低比例

3.2 使用與不使用網(wǎng)頁流行度緩存機(jī)制下，AMP網(wǎng)頁加載時間變化

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

圖5 流行度緩存機(jī)制下AMP網(wǎng)頁加載時間的累積分布曲線

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

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

②在資源調(diào)度機(jī)制方面。AMP JS在網(wǎng)頁渲染加載期間，阻止瀏覽器按照資源在頁面內(nèi)的順序排布次序進(jìn)行加載，優(yōu)先對CSS結(jié)構(gòu)樹進(jìn)行渲染，優(yōu)先構(gòu)建DOM結(jié)構(gòu)樹，阻斷任何將要阻塞DOM結(jié)構(gòu)樹構(gòu)建的JavaScript腳本的解析。3種新聞網(wǎng)站原版頁面內(nèi)的資源排布比較雜亂，除騰訊新聞的原版網(wǎng)頁在資源排布上比較接近AMP網(wǎng)頁之外，內(nèi)聯(lián)的JavaScript腳本可以隨時阻塞DOM的構(gòu)建。相比之下，AMP網(wǎng)頁的資源調(diào)度機(jī)制更優(yōu)。

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

4 結(jié)論

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