AMP是如何提升性能？

<a href="http://www.infoq.com/cn/news/2015/10/google-amp" target="_blank">google推出移動網頁加速項目amp</a>

<a href="https://imququ.com/post/amp-project.html" target="_blank">amp介紹</a>

以下的優化點是amp頁面能被快速加載的原因：

隻允許異步腳本

靜态計算資源尺寸大小

不讓 外部插件阻塞渲染

讓所有第三方javascript離開關鍵路徑

所有css必須内聯

字型觸發必須高效

最小化樣式重計算

隻運作gpu加速動畫

加載資源的優先級政策

瞬間加載頁面

下面這個視訊是apm引擎的lead ,malte ubl對amp的介紹，内容跟下面的段落差不多。

amp頁面不能包括自己寫的javascript，相反，頁面的互動特性用自定義的amp元素處理。自定義的amp元素的背後可能有javascript代碼，但是它們都是經過精心設計而不會導緻性能下降。

外部資源，比如圖檔、廣告、内聯架構&lt;iframe&gt;必須在html裡聲明他們的尺寸，是以在資源下載下傳之前，amp就能決定元素的大小和位置。amp可以不用等待資源下載下傳完成就直接加載頁面布局。

amp從資源布局中解耦文檔布局。整個文檔布局隻需要一次html請求。因為amp避免了代價昂貴的重計算樣式和布局。是以當資源加載的時候，不會有任何的重布局。

第三方js喜歡用同步js加載，還喜歡用document.write。比如，如果你有5個廣告，每個廣告有3個同步加載。每次連結有1秒延時，光是js加載就需要18秒。

amp頁面隻在内聯架構iframe沙盒中有第三方javascript。把第三方js代碼限制在iframe中，它們就不會阻塞首頁面的運作。即使它們觸發多次樣式重計算，但iframes中幾乎沒有dom，而樣式重計算和布局通常是針對dmo尺寸。是以相比對頁面的樣式重計算和布局，對iframes的重計算是非常快速的。

css阻塞所有的渲染、頁面加載，同時它很臃腫。在amp html頁面中，隻用内聯風格的css允許使用。比起大多web頁面，這個限制會從渲染關鍵路徑去除1個或多個http請求。

同時，内置樣式塊（sheet）最大可以有50kb大小。但是對大多複雜的頁面來說，這些大小已經足夠大了，當然這仍然需要頁面作者維護良好的css風格。

amp頁面在字型開始下載下傳之前都不會發出http請求。這是因為amp的js是異步的，而且允許線上的内置樣式塊；在下載下傳字型時，沒有http請求阻塞浏覽器。

當你測量某些元素時，它會觸發昂貴的樣式重計算，因為浏覽器需要布局整個頁面。在amp頁面，所有dom在寫之前會先全部讀完。這確定了每幀最多隻有一次樣式重計算。

動畫加速的唯一方式是将它們運作在gpu上。gpu知道圖層，它知道如何在圖層上展示元素，它會移動圖層、淡入淡出圖層，但是它不會更新頁面布局；不過它會把任務抛給浏覽器，這并不是很好。

amp控制所有資源下載下傳。它給資源下載下傳分優先級，隻在需要時加載，并預取懶加載資源。

當amp加載資源，它會優化下載下傳政策，目前最重要的資源會最先被下載下傳。圖檔和廣告隻會在它們需要可視的時候、在上半版面或者使用者快速滾動的時候被下載下傳。

amp會預取懶加載的資源。資源盡量晚加載，預取盡量早。這種方式，加載會很快，但是隻有在資源展示給使用者的時候cpu才會被使用。

雖然頁面内容可以被預渲染，但是預渲染也會消耗大量的cpu資源。amp會在兩者中優化取平衡。預渲染隻下載下傳上半版面的資源，而且不會渲染非常消耗cpu資源的元素。

當amp為瞬間加載頁面的效果做預渲染時，隻有上半版面的資源會被下載下傳。當amp文檔做預渲染時，一些可能很耗cpu的資源（比如第三方iframes）不會被下載下傳