AMP簡介
Google推出移動網(wǎng)頁加速項目AMP
AMP介紹
AMP是如何提升性能忆谓？
以下的優(yōu)化點是AMP頁面能被快速加載的原因：
- 只允許異步腳本
- 靜態(tài)計算資源尺寸大小
- 不讓 外部插件阻塞渲染
- 讓所有第三方JavaScript離開關(guān)鍵路徑
- 所有CSS必須內(nèi)聯(lián)
- 字體觸發(fā)必須高效
- 最小化樣式重計算
- 只運行GPU加速動畫
- 加載資源的優(yōu)先級策略
- 瞬間加載頁面
下面這個視頻是APM引擎的lead ,Malte Ubl對AMP的介紹斩披，內(nèi)容跟下面的段落差不多棠枉。
只允許異步腳本
JavaScript很強大设褐，它能修改頁面的所有東西颠蕴，但是它也會阻塞DOM的構(gòu)建并延遲頁面的渲染（使用 JavaScript 添加交互)。為了防止JavaScript延遲頁面渲染助析，AMP只允許異步的JavaScript犀被。
AMP頁面不能包括自己寫的JavaScript，相反外冀，頁面的交互特性用自定義的AMP元素處理寡键。自定義的AMP元素的背后可能有JavaScript代碼，但是它們都是經(jīng)過精心設(shè)計而不會導(dǎo)致性能下降雪隧。
雖然在內(nèi)聯(lián)框架中運行第三方JS西轩，但是它不能阻塞渲染。比如脑沿，如果第三方JS用 性能特別差的document.write API 它也不會阻塞主頁面渲染藕畔。
靜態(tài)計算資源尺寸大小
外部資源，比如圖片庄拇、廣告注服、內(nèi)聯(lián)框架<iframe>必須在HTML里聲明他們的尺寸，所以在資源下載之前措近，AMP就能決定元素的大小和位置溶弟。AMP可以不用等待資源下載完成就直接加載頁面布局。
AMP從資源布局中解耦文檔布局熄诡。整個文檔布局只需要一次HTML請求可很。因為AMP避免了代價昂貴的重計算樣式和布局。所以當資源加載的時候凰浮，不會有任何的重布局我抠。
不讓 外部插件阻塞渲染
AMP不會讓外部插件阻塞頁面渲染。AMP支持外部插件包括 lightboxes, instagram embeds, tweets, 等等袜茧。然而菜拓，這些需要增加額外的HTTP請求，這些請求會阻塞頁面布局和渲染笛厦。
所有用到自定義腳本的頁面必須告訴AMP系統(tǒng)一個自定義的標簽纳鼎。比如， amp-iframe 腳本告訴系統(tǒng)這兒有個 amp-iframe 標簽. AMP 在知道里面包含什么前就能生成一個內(nèi)聯(lián)頁框(iframe box)。
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
讓所有第三方JavaScript離開關(guān)鍵路徑
第三方JS喜歡用同步JS加載贱鄙，還喜歡用document.write劝贸。比如，如果你有5個廣告逗宁，每個廣告有3個同步加載映九。每次鏈接有1秒延時，光是JS加載就需要18秒瞎颗。
AMP頁面只在內(nèi)聯(lián)框架iframe沙盒中有第三方JavaScript件甥。把第三方JS代碼限制在iframe中，它們就不會阻塞主頁面的運行哼拔。即使它們觸發(fā)多次樣式重計算引有，但iframes中幾乎沒有DOM，而樣式重計算和布局通常是針對DMO尺寸倦逐。所以相比對頁面的樣式重計算和布局譬正，對iframes的重計算是非常快速的僻孝。
使用有限的 inline CSS 樣式
CSS阻塞所有的渲染导帝、頁面加載，同時它很臃腫穿铆。在AMP HTML頁面中您单，只用內(nèi)聯(lián)風(fēng)格的CSS允許使用。比起大多web頁面荞雏，這個限制會從渲染關(guān)鍵路徑去除1個或多個HTTP請求虐秦。
同時，內(nèi)置樣式塊（sheet）最大可以有50KB大小凤优。但是對大多復(fù)雜的頁面來說悦陋，這些大小已經(jīng)足夠大了，當然這仍然需要頁面作者維護良好的CSS風(fēng)格筑辨。
字體觸發(fā)必須高效
網(wǎng)頁字體很大俺驶，所以字體優(yōu)化 對性能來說非常高效。一個有少量同步腳本或外部樣式塊的傳統(tǒng)頁面棍辕，瀏覽器也需要等待這些大字體下載暮现。
AMP頁面在字體開始下載之前都不會發(fā)出HTTP請求。這是因為AMP的JS是異步的楚昭，而且允許在線的內(nèi)置樣式塊栖袋；在下載字體時，沒有HTTP請求阻塞瀏覽器抚太。
最小化樣式重計算
當你測量某些元素時塘幅，它會觸發(fā)昂貴的樣式重計算昔案，因為瀏覽器需要布局整個頁面。在AMP頁面电媳，所有DOM在寫之前會先全部讀完踏揣。這確保了每幀最多只有一次樣式重計算。
你可以閱讀這篇 渲染性能學(xué)習(xí)更多關(guān)于樣式和布局重計算的影響匆背。
只運行GPU加速動畫
動畫加速的唯一方式是將它們運行在GPU上呼伸。GPU知道圖層，它知道如何在圖層上展示元素钝尸，它會移動圖層、淡入淡出圖層搂根，但是它不會更新頁面布局珍促；不過它會把任務(wù)拋給瀏覽器，這并不是很好剩愧。
關(guān)于動畫相關(guān)的CSS的規(guī)則能保證動畫是GPU加速猪叙。特別是AMP只允許動畫、仿射變換和不透明度仁卷，所以不需要布局穴翩。可以從使用轉(zhuǎn)換和不透明度的動畫修改了解更多知識锦积。
加載資源的優(yōu)先級策略
AMP控制所有資源下載芒帕。它給資源下載分優(yōu)先級，只在需要時加載丰介，并預(yù)取懶加載資源背蟆。
當AMP加載資源，它會優(yōu)化下載策略哮幢，當前最重要的資源會最先被下載带膀。圖片和廣告只會在它們需要可視的時候、在上半版面或者用戶快速滾動的時候被下載橙垢。
AMP會預(yù)取懶加載的資源垛叨。資源盡量晚加載，預(yù)取盡量早柜某。這種方式嗽元，加載會很快，但是只有在資源展示給用戶的時候CPU才會被使用莺琳。
瞬間加載頁面
想確保HTTP請求盡量快速还棱，使用新的 preconnect API 還是比較繁瑣。用AMP惭等，在用戶顯示指明他們想前往的頁面前珍手，該頁面就被渲染了。在用戶選擇前往該頁面前，它就可能已經(jīng)準備好了琳要，所以頁面就像瞬間被加載一樣寡具。
雖然頁面內(nèi)容可以被預(yù)渲染，但是預(yù)渲染也會消耗大量的CPU資源稚补。AMP會在兩者中優(yōu)化取平衡童叠。預(yù)渲染只下載上半版面的資源，而且不會渲染非常消耗CPU資源的元素课幕。
當AMP為瞬間加載頁面的效果做預(yù)渲染時厦坛，只有上半版面的資源會被下載。當AMP文檔做預(yù)渲染時乍惊，一些可能很耗CPU的資源（比如第三方iframes）不會被下載
更多詳情： why AMP HTML doesn’t take full advantage of the preload scanner.
幫忙讓AMP更快
AMP是個開源項目杜秸，我們需要你的幫助來讓它更快。 how to contribute.
