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）不会被下载