AMP
什么是 AMP
####引言：
对许多人来说，在手机上看页面（webview）是一个很慢的、不靠谱的经历，但它不应该是这样的。加速移动端页面（AMP）项目是一个开源项目，它对移动端的页面进行了大幅的优化，开发人员可以借助它来构造网页。一旦拥有，瞬间加载—无处不在。
AMP （Accelerated Mobile Pages ）是谷歌推动的一项专门针对移动端网页加速的项目。根据官方的测试报告，使用的 AMP 技术的页面在 3G 情况下，首屏显示时间会有 15% ~ 85% 的性能提升。
AMP 技术实现
AMP 主要由三部分构成，AMP HTML、AMP Runtime、AMP Components
AMP HTML
AMP 对应用此技术的页面 DOM 做出一些规定
页面必需的规范
- doctype 必须是
<!doctype html> - 顶层 html 标签必须包含 AMP 属性：
<html ⚡>(<html amp>也可以) - 包含
<head>和<body>标签 - 在 head 中包含一个
<link rel="canonical" href="$SOME_URL" />标签，这个标签指出该页面普通版本的 URL，如果只有一个版本，使用当前的 URL 就可以。（告诉搜索引擎，这是同一个页面的不同版本，否则搜索引擎会认为此页面有两个 URL，会认为是作弊） - 必须将
<meta charset="utf-8">放置在 HEAD 的最上面 - HEAD 中必须包含
<meta name="viewport" content="width=device-width,minimum-scale=1">，也可以在里添入initial-scale=1(1) - 在 HEAD 中引入 AMP 核心 JS 文件 ：
<script async src="https://cdn.ampproject.org/v0.js"></script> - 在 HEAD 中写入以下代码
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
(1) width=device-width,minimum-scale=1 需要打开GPU rasterization
DOM 元素规范
| 原生标签 | AMP HTML 中的标签 |
|---|---|
| script | 除了类型是application/ld+json的 script 标签都被建议禁止使用。当然，AMP Runtime 和 AMP 扩展组件所需要的 JS 还是需要加载的 |
| base | 禁止 |
| img | amp-img |
| video | amp-video |
| audio | amp-audio |
| iframe | amp-iframe |
| frame | 禁止 |
| frameset | 禁止 |
| object | 禁止 |
| param | 禁止 |
| applet | 禁止 |
| embed | 禁止 |
| form | 禁止 |
| input elements | 禁止。 type="button" 的可以被使用 |
| button | 允许 |
| link | rel 为 canonical 的特定标签是可以放置的，stylesheet 则不被允许 |
| meta | http-equiv 属性不允许，其它的可以 |
| a | href 属性不能是 javascript:，如果必须是，那么 target 属性必须是 _blank |
AMP Runtime
在上面的基础上，AMP Runtime（就是 HEAD 中最的引入的那个 JS）负责协调各个 DOM 与资源的加载时机与优先级，以及提供验证器等调试功能。
如果你不知道你的页面是否符合 AMP 的规范，你可以在访问的 URL 中加入 #development=1 来打开开发者模式。这时 AMP 会加载验证器，检测页面，并在控制台显示不符合 AMP 规范的位置信息
AMP Components
AMP 通过自定义元素提供了一些组件，分为两类：内置组件与扩展组件
内置组件
| 组件 | 描述 |
|---|---|
amp-ad |
广告位标签（受限） |
amp-img |
对原生 img 标签的替换 |
amp-pixel |
页面访问追踪标签，（受限） |
amp-video |
对原生 video 标签的替换 |
内置组件是指在 AMP Runtime 中加入的一些自定义标签组件，用来替换 <img> 、<video> 等常用标签，从页优化对资源的加载策略，
扩展标签
| 组件 | 描述 |
|---|---|
amp-anim |
通过 AMP Runtime 管理加载的动图，一般为 gif |
amp-audio |
对原生 audio 标签的替换 |
amp-carousel |
轮播图 |
amp-fit-text |
一个可以自动调整大小的文本框，可以使文本始终充满文本框 |
amp-iframe |
对原生 iframe 标签的替换 |
amp-image-lightbox |
就是 “image lightbox” ，点击图后可以全屏特写 |
amp-lightbox |
同上，不过不特定是 image |
amp-instagram |
引用 instagram 站点内容的自定义标签（受限） |
amp-twitter |
引用 twitter 站点内容的自定义标签（受限） |
amp-youtube |
引用 youtube 站点内容的自定义标签（受限） |
amp-pinterest |
引用 pinterest 站点内容的自定义标签（受限） |
扩展组件并不存在于 AMP Runtime 中，使用时需要引入额外的 JS，如<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>，注意：必须要有 async 和 custom-element=”amp-audio” 属性。
(受限是指，此类标签因中国的法律政策、网络环境、国际通用接口一致性等原因，在中国大陆内部基本没有实用价值)
AMP 的适用场景
定位：解决静态页面的性能问题
也许你会想，AMP 对页面做了这么多的限制，这还怎么让人以此开发页面？？？ 实际上，AMP 只关注于一件事 —— 提高静态页面的性能。
这个「静态」并不是指没有服务端参与的页面，而是指没有复杂交互、以内容展现为主的资源页，典型例子就是新闻详情页。现在的网站类型很多，游戏类、视频类、电商类等等，每一类网站都有着自己的特点，优化策略也各不相同，用一种方案去解决所有问题不切实际。所以 AMP 项目将关注点放在了更容易优化且效果最明显的内容型页面。
实现原理
AMP 对于页面优化的方式主要集中在资源的延迟加载与按需加载。 将图片、视频等标签和第三方功能换成 AMP Components 后，AMP Runtime 可以将此资源延迟到页面彻底渲染之后，确保页面首屏性能。 对于大量图片，AMP 采用由上到下的串行加载，避免了同时加载多张图片时对移动设备带来的压力。 另外，一些资源非常消耗性能，例如 gif 和 video，AMP Runtime 可以在它们处于不可见时销毁元素，释放资源。
总结
AMP 的适用范围很窄，而且具有针对性，无法满足平时业务的需求。 而且在国内的使用环境就更加受限。AMP 要求 Runtime JS 必须从 cdn.ampproject.org 加载，这样做的出发点是为了更可控，以及更好的在各网站之间共享缓存，但是这些域名在国内很难访问甚至直接被墙。其次，从目前 AMP 目前已有的扩展组件来看，instagram、twitter、youtube 这类国外媒体常用的服务在国内都无法使用，内置的 ad 组件也不符合国情。
但是，AMP 项目对我们进行移动 Web 优化仍然很有借鉴意义。实际上，控制资源加载、处理响应式元素避免页面抖动、主动释放资源等策略，我们在项目中都有自己的尝试与经验，但我们的方案要么过分依赖服务端，要么没有抽象成通用模式，导致无法推广到更多产品，这些都是后续可以努力的方向，而 AMP 规范和代码实现，将会是最好的参考资料。
