页面性能优化是一个老生常谈的话题，许多的博主都在尽力去优化页面打开的速度，给访客最优质的体验，Google 某个团队推出了一项名为 Accelerated Mobile Pages（AMP）的技术，号称能大大加快移动端页面呈现速度，提高整体体验。本文就带大家认识一下这项新技术。
AMP介绍
Accelerated Mobile Pages（官网、GitHub），中文的意思是：加速的移动页面。根据官方说明，AMP 在 Speed Index（首屏展现时间平均值）测试中，性能有 15% ~ 85% 的提升，测试是在模拟 3G 网络环境并模拟 Nexus 5 的条件下完成（详情）。
AMP 如何让页面性能大幅提升暂且搁置一边，先来看看它是什么。根据官网文档得知，AMP 主要由 AMP HTML、AMP Runtime 以及 AMP Components 三部分组成。
AMP HTML
AMP HTML 是 HTML 的子集，在 AMP HTML 中只允许使用有限的标签。例如 body、article 这些标签可以直接使用，没有任何限制；有些标签允许有限制的使用，例如 meta 标签不能使用 http-equiv 属性；而像 img、audio 这样的标签需要替换为 amp-img、amp-audio 等 AMP Components；更多的标签如 frame、form 不允许使用。
以下是该文档中的 AMP HTML 示例：
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>可以看出，AMP HTML 与普通 HTML 并没有什么太大区别，将上面这段代码保存为 .html 文件，在浏览器中可以正常运行。下面简单列举一些格式上的要求：
- DTD 必须是：
<!doctype html>； 顶层标签必须包含 AMP 属性，如：<html amp>（让其他程序能方便地识别出这是
AMP HTML）； 必须在 HEAD 区域中放置<link rel="canonical" href="$SOME_URL" />
标签，用来指定该文档普通版本的 URL；如果只有一个版本，使用当前 URL
即可（告诉搜索引擎，这是同一个页面不同的版本，否则可能会被判作弊）； 必须将<meta charset="utf-8">放置在
HEAD 区域最开始的位置（实际上，普通 HTML 也应该这么做）； 必须在 HEAD 区域包含这个 ViewPort：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">；
AMP Runtime
在上面的 AMP HTML 代码中，HEAD 区域最后外链引入的 JS 就是 AMP Runtime。AMP Runtime 提供对自定义元素（Custom Elements）的支持，负责协调资源的加载时机和优先级，以及提供验证器等调试功能。
访问 AMP HTML 时，在 URL 最后追加 #development=1 会开启开发者模式。这时 AMP Runtime 会自动加载验证器，并在控制台显示本页不符合 AMP 规范的位置信息。
AMP Components
AMP Components 是使用浏览器自定义元素（Custom Elements）实现的组件，用来替换 HTML 中默认的 和
<video> 等标签，用来实现对资源的自定义加载策略；它也用于实现一些复杂的交互效果，如图片轮播。AMP Components 分为两类：
1）内置组件，包括：amp-img、amp-audio、amp-anim、amp-ad、amp-pixel、amp-video，在 AMP HTML 引入了 AMP Runtime 之后，这些内置组件就可以直接使用。
2）扩展组件，包括：amp-carousel、amp-lightbox、amp-iframe、amp-instagram、amp-twitter、amp-youtube。要使用扩展组件，需要在 AMP HTML 中引入该组件对应的文件。例如要使用 amp-carousel 就必须引入以下文件（必须要有 async 和 custom-element 属性）：
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
这里有一个按照 AMP HTML 规范编写的页面，大家可以直接用浏览器打开查看：AMP 示例（注：为了保证国内打开速度，我把 AMP JS 托管在了本地，实际上这么做并不符合规范）。
