TechRoomage

鵝廠原創 | AMP 初探

0 0

原標題:鵝廠原創 | AMP 初探

新媒體排版

香銷冷雨簾襟落,提階上,空廊迴風,憶艾郎,前日曾共沐,暖手同游,夢驚尤在枕邊,孤影嘆單,冷暖心知。

AMP簡介

1

AMP是什麼

AMP 全稱 Accelerated Mobile Pages(官網)顧名思義是為了加速移動網路的網頁載入從而提升體驗。感興趣的可以先看一段實拍影片,感受一下。

從目前官方統計數據看來,速度平均有 4 倍提升

AMP 是一個在 Github 上的開源項目(傳送門)在我看來,它是一套解決方案,我們的移動頁面使用了這套解決方案之後,就可以得到提升載入速度的體驗。

2

AMP的3大核心

AMP 是一套解決方案,它主要由 3 大核心組成:

1

AMP HTML

AMP HTML 本質上是使用自定義 AMP 標籤&屬性擴展的 HTML。通過這些自定義 AMP 標籤&屬性,可以確保可靠性能。具體可參見【AMP 實戰】

2

AMP JS

AMP JS 庫主要做了以下工作:

  1. 管理資源載入

  2. 實現 AMP HTML 自定義標籤

  3. 最佳性能優化做法,比如 iframe 沙盒化、預先計算所有元素的布局、禁用性能緩慢的 CSS 選擇器等等

另外,AMP 頁面不允許使用第三方腳本。

3

AMP Cache

AMP Cache 是用來緩存所有 AMP 頁面相關資源的基於代理的 CDN。可能說的有點抽象,實際上就是在 CDN 網路加了一層代理,專門用來處理 AMP 頁面的緩存。實際上,AMP Cache 主要做的是:

  1. 實時處理:接受 AMP 頁面的資源載入請求,分析相關路徑,獲取對應的緩存資源,如果沒有緩存,則到真實的伺服器獲取資源

  2. 離線處理:處理爬蟲爬到的 AMP 頁面,分析頁面上的資源,進行相應的路徑替換以及緩存

具體的可以參考官方文檔介紹。

除了這 3 大核心之外,AMP 還有其他的一些工具,比如 AMP 驗證器,AMP 調試工具等等

3

為什麼AMP快?

剛剛說的可能會讓讀者一臉懵逼,這裡就通俗地講解一下,為什麼 AMP 可以提升頁面的載入速度。首先可以參考官方文檔介紹的 為什麼 AMP 快。實際上,官方文檔說的都是我們平常在優化頁面載入性能的時候的經驗做法,AMP 就是實現了這些做法而已。那麼,AMP 是怎麼實現的呢?答案就是 AMP 的 3 大核心。

首先,要提升一個頁面的載入性能,我們首先要知道影響頁面性能的地方是哪裡。舉個栗子,比如說圖片,html 在解釋一個 img 標籤的時候,要去非同步載入一個圖片資源,在載入圖片之前,不能阻塞頁面渲染,因此我們首先要渲染一個圖片的佔位符,比如 alt。等到圖片載入完成,這個時候瀏覽器知道了圖片的大小,這時就要渲染圖片,如果圖片真實的大小和之前的佔位符的大小不一樣,就會造成 reflow。那我們知道圖片的這個問題了,那是不是可以想辦法一開始就計算好佔位符的大小,這樣就不會造成 reflow 了。

另外,當圖片很多的時候,我們很自然的就能想到 lazyload,於是我們就 balabala 寫一個 lazyload 組件用起來。

因此,AMP HTML 就提供了一個自定義標籤<amp-img>。AMP 要求所有的圖片資源必須使用<amp-img>,禁止使用<img>。這個自定義標籤<amp-img>就實現了所有我們在載入圖片上面所使用到的優化手段。

還有許多場景,比如僅允許非同步資源,就是為了防止阻塞頁面的渲染,AMP 不允許使用第三方腳本就是如此。

另外一個重要的優化手段是 AMP Cache。我們知道,優化性能最好的手段就是緩存,因此 AMP Cache 是重中之重。前面的 AMP Cache 介紹在讀者看來可能有點雲里霧裡,既然有 CDN 了,為什麼還要加一層代理?實際上,AMP Cache 最主要做的事情是離線處理,它把 AMP 頁面的所有資源都進行緩存並且替換掉了路徑。

舉個栗子,我們騰訊課堂有個 AMP 頁面,路徑是:http://m.ke.qq.com/index.html。頁面里有一張圖片,路徑是http://9.url.cn/myPic.jpg。當 AMP Cache 對這個 AMP 頁面進行緩存的時候,會掃描頁面,對裡面的資源進行緩存。然後把圖片的路徑替換成http://cdn.google.com/google/amp-cache/m.ke.qq.com/s2/9.url.cn/myPic.jpg,當然這是舉例子,真實路徑不一定是這樣,當頁面的所有資源都進行了緩存,路徑都替換了之後,那麼這個替換了路徑之後的 AMP 頁面也會進行緩存,同時它的路徑可能是http://cdn.google.com/google/amp-cache/m.ke.qq.com/s1/m.ke.qq.com/index.html。

最後最重要的事情就是,在 google 搜【騰訊課堂】的時候,我們的 AMP 頁面被搜到了,當使用者點擊這個搜索結果的時候,打開的並不是http://m.ke.qq.com/index.html,而是http://cdn.google.com/google/amp-cache/m.ke.qq.com/s1/m.ke.qq.com/index.html。

好,說到這裡,聰明的讀者應該知道了:

  1. 所有資源都是同一個 host,可以共享 dns,tcp 鏈接,還有 cdn

  2. 這還沒什麼,主要的是 google 搜索結果頁會對 AMP 頁面進行預載入,預載入,載入,載……

4

國內的AMP

好吧,google 做了一個 AMP,你說百度能不能學著點嗎?於是,百度借鑒 AMP,也做了一個 MIP (Mobile Instant Pages)。嗯,本質上,它們是一個東西,現在 MIP 也能識別 AMP 頁面了,做的事情都差不多。

AMP初體驗

由於國內網路,鑒於 MIP 和 AMP 是一樣的,所以下面我們通過 MIP 直接來真實感受一下

操作步驟異常簡單:

  1. 打開 PC chrome 瀏覽器

  2. 按 F12,打開調試控制台

  3. 切換為移動模擬器

  4. 地址欄輸入:www.baidu.com

  5. 在百度官網搜索:MIP

  6. 然後點擊 MIP 官網結果就可以看到效果了

下面是操作的錄製:

可以看到,MIP 頁面的秒開體驗,再和非 MIP 頁面的一比,簡直一個天上一個地下,要注意到,這可是 PC!

聰明的讀者應該能觀察到,我們打開的 MIP 官網的 url 是:https://www.baidu.com/mip/c/www.mipengine.org/

而不是:https://www.mipengine.org/

AMP實戰

上面講的也差不多了,下面我們來個小實戰,來讓讀者體驗一下 AMP 頁面首先我們寫 HTML,直接從官網上面 copy HTML 的結構,然後我們寫一個列表,列了 24 個課程卡片,每個課程卡片包含課程封面圖,還有課程名字與價格:

<!doctype html><htmlamp><head><metacharset=“utf-8”><title>Hello, AMPs</title><linkrel=“canonical”href=“http://m.ke.qq.com/index.html”><metaname=“viewport”content=“width=device-width,minimum-scale=1,initial-scale=1”><styleamp-boilerplate>body{-webkit-animation: -amp-start8ssteps(1, end) 0s1normalboth;-moz-animation: -amp-start8ssteps(1, end) 0s1normalboth;-ms-animation: -amp-start8ssteps(1, end) 0s1normalboth;animation: -amp-start8ssteps(1, end) 0s1normalboth}@-webkit-keyframes-amp-start{from{visibility: hidden}to{visibility: visible}}@-moz-keyframes-amp-start{from{visibility: hidden}to{visibility: visible}}@-ms-keyframes-amp-start{from{visibility: hidden}to{visibility: visible}}@-o-keyframes-amp-start{from{visibility: hidden}to{visibility: visible}}@keyframes-amp-start{from{visibility: hidden}to{visibility: visible}}</style><no><styleamp-boilerplate>body{-webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none}</style></no><styleamp-custom>/* any custom style goes here */.clist{padding: 0;font-size: 0;}.clist__item{display: inline-block;width: 50%;/* height: 500px; */vertical-align: top;}.clist__name{font-size: 18px;}.clist__prce{font-size: 14px;}</style><asyncsrc=“https://cdn.ampproject.org/v0.js”></></head><body><h1class=“tt”>歡迎來到<spanclass=“tt__name”>騰訊課堂</span></h1><ulclass=“clist”><liclass=“clist__item”><amp-imgsrc=“//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCibEMMrIGh9o2PgpZ8YvRAImnjS3HHd52m6CzLJQJrMSicqbY9EV77BZXnodAgN6WAE/220”height=“124”width=“220”layout=“responsive”></amp-img><h2class=“clist__name”>0基礎入門-中日教情景語法課【和風日語網校】</h2>

<p class=”clist__prce”>¥388.00</p></li><!–省略–></ul></body></html>

上面最主要就是用到了<amp-img>然後我們通過代理,在 chrome 中打開,在 url 末尾加上 #development=1,chrome dev tools 就會幫助我們進行 AMP 頁面的驗證:

鵝廠原創 | AMP 初探

再看下 network 界面:

鵝廠原創 | AMP 初探

可以看到,頁面總共 24 張圖片,首屏載入了 18 張,大概 6s 之後載入 4 張,再過 6s 之後再載入剩下的 2 張。如果在 6s 之內滑動下去的話就會發現圖片是有進行 layzload 處理的可以看到,僅僅通過 <amp-img> 標籤,AMP 就幫我們把所有與圖片相關的優化都處理了,只要我們遵循 AMP 的規範來編碼就可以了。

小結

到此,讀者應該對 AMP 有個初步的認識了,AMP 頁面真的很快,再搭配相應的 Cache 策略,在惡劣的移動網路下,秒開不在是夢!當然,也需要認識到 AMP 頁面的不足的地方:目前 AMP 頁面只適用於靜態頁面,因為它不允許第三方腳本;另外,頁面的鏈接被替換了呀!因此,AMP 頁面一般適用的地方是:站點官網、廣告頁。

怎麼樣,AMP是不是很神奇?很管用?9月16日的IMWebConf大會,來自Google的Michael將為大家帶來《PWA與AMP – 移動Web的現在與未來》的精彩分享,歡迎大家來到現場或通過騰訊課堂觀看直播!

騰訊IMWebConf 2017前端大會門還剩7天開幕

鵝廠原創 | AMP 初探

IMWebConf 2017前端大會的發起方是騰訊公司,組織者是騰訊公司最專業的前端團隊之一IMWeb團隊。作為國內前端圈一年一度的,有一定影響力的專業前端技術交流大會,IMWebConf已經成功舉辦五屆,累計探討的議題超過上百個,線上線下參會者數千人,累計影響前端愛好者超過數十萬人。

今年,IMWebConf 2017 將於2017年9月16日深圳科興國際會議中心召開。會議時間為一天,議題涵蓋前端工程化、性能優化、Node.js、前端框架、安全等前沿方向。大會將設一個主會場和三個分會場(Node.js分會場、框架工具性能分會場、綜合分會場)。

本次大會,除了騰訊內部的前端技術分享,我們還有幸邀請到了W3C、微軟、Facebook、Google、阿里等國內外知名IT行業的前端大咖,用最接地氣的實踐視角,以最高大上的思維方式,為您展現一個立體而豐富的前端體驗之旅。

您殫精竭力想要的技術資料,在演講分享中,就能輕易獲得!

您百思不解的問題,在與技術大神的對話中,就會靈光乍現迎刃而解!

您想要接觸的技術公司,在大會的現場也能輕鬆遇到!

不管你選擇來現場,還是坐在家中看直播、看錄播,你的要求都可以被滿足!更多大會詳情和優惠活動請關注大會官網http://2017.imweb.io/

鵝廠原創 | AMP 初探

感謝本次會議的王者贊助商:騰訊課堂

感謝直播技術提供方:IT大咖說

感謝鑽石贊助商(排名不分先後):100offer、WeTest、軒轅傳奇、圖靈教育、人民郵電出版社

感謝其他所有的合作夥伴(排名不分先後):HTML5夢工廠、開源中國、SegmentFault、前端圈、W3Cplus、前端早讀課、WeX5、掘金、W3Cschool

感謝所有的合作媒體(排名不分先後):Stuq、GitChat、React-China、CSDN、Coding、伯樂在線、V2EX、活動行、騰訊大學、騰訊學院、騰訊研究院、QQ空間,以及所有幫助宣傳的團隊媒體和個人。

七夕中獎名單

小編根據七夕文章中大家的評論情況,篩選出如下中獎粉絲:鉦瀚(38贊),陳卓銳(32贊)、L.h(17贊,第7樓~)、名昕(14贊)、i (11贊)。請中獎者儘快回復公眾號:「七夕」,小編將和大家聯繫,發送IMWebConf線上票~~~

再次祝賀大家,感謝大家的支持!

關注大會詳情、購買線上/現場票

Leave A Reply

Your email address will not be published.