Accelerated Mobile Pages (AMP) 网页加速
AMP是什么
AMP HTML是一种构建web页面渲染,可靠和快速的性能。我们尝试解决许多认为缓慢页面加载时间——特别是当阅读移动web上的内容。AMP HTML是建立在现有的网络技术;一个AMP页面加载(迅速)在任何现代浏览器。
官网：https://www.ampproject.org/
GITHUB：https://github.com/ampproject/amphtml
AMP从那几个方面提升性能
1.只允许异步加载script
HTML 解析器遇到 script 标签，它会暂停构建 DOM，并移交控制权给 JavaScript 引擎；等 JavaScript 引擎执行完毕，浏览器从中断的地方恢复 DOM 构建。执行内联脚本会阻塞 DOM 构建，也就延缓了首次渲染。为了减少JS对页面渲染的延迟，AMP不允许直接使用内联脚本，只允许异步加载JS。
AMP页面不允许直接包含任何内联JS，页面交互可在AMP组件中处理，AMP组件是经过精心设计的保证不会影响页面性能。第三方JS只允许在 iframe 中使用，这样就不会阻塞主页面的渲染。
2.静态资源指定宽高
扩展资源如图片、iframe等必须在标签中指定他们的宽高，AMP可以在这些资源下载完成以前就决定每一个元素的宽高和位置，AMP在所有资源加载完之前就开始页面布局。
AMP把文档和资源分开布局，避免样式重新计算和布局，资源加载完成后不会重新布局。
3.避免扩展机制影响渲染
AMP支持一些扩展组件如：<amp-lightboxes>,<amp-tweets>,使用这些组件需要加载相应的JS文件，会增加额外的HTTP请求，但是这些请求不会阻塞页面的布局和渲染。
任何页面用原生的script标签，必须要通知AMP系统，即在｀script｀中加 ｀custome-element｀属性。
4.关键路径禁用第三方JS
AMP 只能在 sandboxed iframe 中加载第三方 JS。把他们当做 iframes，因此不会阻塞主页面。如果第三方JS触发多个样式重计算，iframe中也只有很少一部分DOM，重新布局不会消耗很多性能。
5.CSS必须内联，内联样式表最大50kb
CSS会阻塞页面渲染，阻塞页面加载。在AMP页面中，只允许内联样式，这会在关键渲染路径上比一般的页面减少1或多个HTTP请求。
CSS使用内联，内联样式表(inline stylesheet)最大不超过50kb。
6.字体必须有效触发
Web字体非常大,因此Web字体对性能优化是至关重要的。在一个普通的页面中有一些script和样式表，浏览器需要等待这些资源加载完成后开始加载这些大的字体资源。
在AMP中所有的JS都是异步加载而且只允许使用内联样式表，所以没有HTTP请求阻塞浏览器去加载字体资源。
7.减小样式重计算
修改元素样式时，会触发样式重新计算，这是非常高的性能消耗，因为浏览器需要重新布局整个页面。AMP页面在进行DOM写操作之前会先读取DOM，这样能确保样式重计算时一次最精确到每一帧的样式。
8.只运行经GPU加速的动画
AMP网页上的动画只允许变形和透明度调整，从而节省重新布局页面的时间。
9.优化资源加载次序
AMP控制所有的资源加载，优先加载必要的资源（如首屏需要展示的资源），预加载可以延迟加载的资源。
AMP加载资源时，最重要的资源最先被加载，images 和 ads 在他们可能被用户看到的情况下才加载，或者在用户快速滚动到他们的位置时加载。
10.使用 preconnect API
新的preconnect API用来确保HTTP请求尽可能快。页面可以在用户看到之前就渲染完成。通过即时加载，页面可能在用户选择它的时候就已经是可用的了。
虽然预渲染可以让页面更快，但是也会消耗大量的带宽和CPU。AMP对减少这两个因素进行了优化。预渲染只会下载被遮住的部分资源，而且不会渲染很耗CPU的内容。
参考：
http://www.cnblogs.com/qcloud1001/p/7839269.html
https://www.zhihu.com/question/36380698?from=profile_question_card