更快、更省流量？Google AMP技術(shù)解讀

周建峰

谷歌近日推出的AMP（Accelerated Mobile Pages）技術(shù)，官方稱這是一種用于提升移動(dòng)網(wǎng)頁裝載速度的技術(shù)，號(hào)稱可以在手機(jī)瀏覽器上提升四倍瀏覽速度，減少裝載1/10或更少的數(shù)據(jù)。AMP為什么會(huì)如此神奇地實(shí)現(xiàn)又快又省流量的？

手機(jī)流量殺手——WAP頁面

雖然現(xiàn)在Wi-Fi已經(jīng)很普及，但是出門在外很多場合大家仍然在使用手機(jī)數(shù)據(jù)進(jìn)行連接。其中最耗費(fèi)手機(jī)流量的是各種WAP頁面（包括手機(jī)瀏覽器打開的新聞、視頻等頁面，也包括在微信中打開的頁面），因傳統(tǒng)HTML頁面包含圖片、視頻、各種代碼，這些富文本元素的加載需要耗費(fèi)大量的數(shù)據(jù)流量。

純文本顯示可以節(jié)約手機(jī)流量，但是這樣的頁面太過單調(diào)，很多朋友在手機(jī)上瀏覽大多是使用默認(rèn)的富文本模式。那么在這種模式下如何節(jié)省流量？一種方法是壓縮數(shù)據(jù)，比如UC瀏覽器就使用類似方法，但是節(jié)約流量的效果并不是很好，因?yàn)檫@些富文本數(shù)據(jù)壓縮率有限。另一種方法則是減少網(wǎng)頁加載組件，同時(shí)加快網(wǎng)頁元素裝載速度。AMP使用的正是后一種方法，它通過一系列特殊協(xié)議和CDN加速來實(shí)現(xiàn)上述目的（圖1）。

又快又省 AMP是這樣做的

如上所述，AMP主要使用減少網(wǎng)頁加載組件和加快網(wǎng)頁元素裝載速度來實(shí)現(xiàn)流量的節(jié)省。那么AMP是怎樣實(shí)現(xiàn)這個(gè)功能的？

對(duì)于減少網(wǎng)頁加載組件，AMP使用一種全新的AMP-HTML格式，它定義了一套HTML標(biāo)簽，如amp-img、amp-video。使用這些tag可以確保加載的順滑，這樣即使是性能較低的手機(jī)也可以比較流暢加載網(wǎng)頁上的圖片、視頻等元素，避免由于加載卡頓導(dǎo)致的流量損失。比如常規(guī)HTML頁面，性能較低的手機(jī)會(huì)由于無法完全加載圖片導(dǎo)致網(wǎng)頁停止響應(yīng)，刷新后需要重新加載圖片而耗費(fèi)流量。另一方面，AMP可以負(fù)責(zé)管理資源何時(shí)加載，避免不必要的流量。比如很多手機(jī)用戶經(jīng)常使用手機(jī)瀏覽器瀏覽百度新聞、網(wǎng)易新聞等以內(nèi)容為主的新聞詳情頁，大部分性能消耗在圖片、視頻等媒體資源以及第三方功能如廣告、社會(huì)化組件的加載上。AMP可以將這些內(nèi)容替換為AMP Components，它可以避免一些不必要的資源默認(rèn)被加載，如gif動(dòng)態(tài)廣告頁面和視頻廣告等耗費(fèi)流量的資源（圖2）。

對(duì)于加快網(wǎng)頁元素裝載速度，谷歌AMP則使用了第三方的緩存。這樣從Google的搜索結(jié)果里進(jìn)入AMP網(wǎng)頁就可以做到預(yù)加載甚至預(yù)渲染，從而帶來極速體驗(yàn)。比如一些圖片、視頻可以直接利用谷歌服務(wù)器上的緩存數(shù)據(jù)，實(shí)現(xiàn)AMP頁面的快速打開。另一方面，為了推動(dòng)AMP，谷歌提供免費(fèi)的全球CDN服務(wù)，CDN可以緩存圖片、靜態(tài)文件等，同時(shí)使用HTTP2.0協(xié)議保證緩存的高效率，對(duì)于使用AMP技術(shù)規(guī)范開發(fā)的頁面都可以無償使用。大家知道CDN是內(nèi)容分發(fā)網(wǎng)絡(luò)，它能夠?qū)崟r(shí)地根據(jù)網(wǎng)絡(luò)流量和各節(jié)點(diǎn)的連接、負(fù)載狀況以及到用戶的距離和響應(yīng)時(shí)間等綜合信息將用戶的請(qǐng)求重新導(dǎo)向離用戶最近的服務(wù)節(jié)點(diǎn)上。這樣借助谷歌遍布全球的CDN服務(wù)器，無論是哪里的用戶，都可以極速訪問AMP頁面（圖3）。

AMP同盟——谷歌不是一個(gè)人在戰(zhàn)斗

正是通過上述優(yōu)化措施，現(xiàn)在手機(jī)訪問AMP頁面可以獲得更順暢、更快的打開速度。其實(shí)這種使用特殊協(xié)議來優(yōu)化用戶瀏覽速度的方法并不是只有谷歌在做，現(xiàn)在很多科技巨頭也通過類似的方法在對(duì)移動(dòng)網(wǎng)頁進(jìn)行優(yōu)化。

比如國外一些大型社交網(wǎng)站應(yīng)用內(nèi)的文章框架，采用基于HTML編碼框架，這個(gè)框架直接對(duì)接了主流的大的新聞網(wǎng)站（NYtimes、國家地理、NBC、BBC等），通過預(yù)先裝載這些大站的內(nèi)容提高訪問速度。它的優(yōu)化措施類似AMP的緩存技術(shù)，通過對(duì)大型新聞網(wǎng)站的緩存來提高社交應(yīng)用內(nèi)的文章打開速度。

國內(nèi)巨頭騰訊則在微信通過公眾號(hào)的內(nèi)容的展現(xiàn)樣式進(jìn)行限制（類似AMP-HTML格式，騰訊自定義了一套HTML標(biāo)簽），通過這些限制保證了用戶在手機(jī)微信上打開頁面時(shí)裝載速度要遠(yuǎn)遠(yuǎn)快于普通的富交互網(wǎng)站（大家在手機(jī)微信公眾號(hào)打開文章的速度明顯比在瀏覽器中快），這樣公眾號(hào)的文章可以在微信的閉環(huán)里實(shí)現(xiàn)高速的裝載和自由的傳播（圖4）。

當(dāng)然作為手機(jī)用戶，我們非常樂于看到各大IT巨頭在移動(dòng)網(wǎng)頁所做的優(yōu)化，這樣一方面可以讓我們的手機(jī)在較短的時(shí)間內(nèi)獲得更多的資訊信息，因?yàn)轭愃艫MP的技術(shù)可以讓手機(jī)更順暢地訪問各種頁面，內(nèi)容提供商也可以為我們提供更豐富的信息；另一方面則可以大大節(jié)約我們寶貴的手機(jī)流量，顯然這是一件雙贏的事情。不過從上面的描述我們也可以看到，AMP之類的技術(shù)需要開發(fā)者重新開發(fā)網(wǎng)頁，比如AMP必須按照AMP HTML規(guī)范重新編寫頁面，微信公眾號(hào)規(guī)范只在微信內(nèi)部適用，這些優(yōu)化技術(shù)的適用范圍仍然有限。我們更期待適用各種網(wǎng)頁的標(biāo)準(zhǔn)化優(yōu)化措施技術(shù)早日普及。

小知識(shí)：什么是AMP Components？

AMP Components是AMP開發(fā)使用瀏覽器自定義元素（Custom Elements）實(shí)現(xiàn)的組件，它用來替換傳統(tǒng)HTML中默認(rèn)的 和