Web 性能优化（Web Performance Optimization，WPO）是一个老生常谈的话题，我也写过很多关于「性能优化」的文章。最近 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 中只允许使用有限的标签。例如 、
完整说明可以查看官网的 创建 AMP HTML 页面。以下是该文档中的 AMP HTML 示例：
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 HTML）；
必须在 HEAD 区域中放置 标签，用来指定该文档普通版本的 URL；如果只有一个版本，使用当前 URL 即可（告诉搜索引擎，这是同一个页面不同的版本，否则可能会被判作弊）；
必须将 放置在 HEAD 区域最开始的位置（实际上，普通 HTML 也应该这么做）；
必须在 HEAD 区域包含这个 ViewPort：；
必须将 作为 HEAD 区域最后的元素；
必须在 HEAD 区域包含以下代码：；
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 中默认的 和 等标签，用来实现对资源的自定义加载策略；它也用于实现一些复杂的交互效果，如图片轮播。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 托管在了本地，实际上这么做并不符合规范）。
AMP 剖析
定位：解决单一问题
经过前面对 AMP 的介绍，你一定会感到奇怪，为什么 AMP HTML 有那么多限制和约束，这样阉割后的 HTML 还有什么适用场景。实际上，AMP 只关注于一件事 —— 提高静态页面的性能。
这个「静态」并不是指没有服务端参与的页面，而是指没有复杂交互、以内容展现为主的资源页，典型例子就是新闻详情页。现在的网站类型很多，游戏类、视频类、电商类等等，每一类网站都有着自己的特点，优化策略也各不相同，用一种方案去解决所有问题不切实际。所以 AMP 项目将关注点放在了更容易优化且效果最明显的内容型页面。
选型：纯 web 技术方案
Web 优化有很多种方案，每种方案都有自己的适用范围。有些收益很高的优化手段，存在这样那样的限制：例如针对具体业务逻辑所做的优化，很难通用化；部署 Google 的 PageSpeed 模块等服务端优化方案，使用成本很高；借助客户端所做的优化，如现在广为流行的移动端 WebView 容器加速方案，优化效果局限在指定 APP 内，甚至还会导致使用通用浏览器访问速度更慢（这个话题很有意思，有机会以后再讨论）。
以内容为主的新闻详情页，大部分性能消耗在图片、视频等媒体资源以及第三方功能如广告、社会化组件的加载上。将这些内容替换为 AMP Components，避免资源默认被加载，再用 AMP Runtime 统一协调和管理，确实是一个通用化、低使用成本且能让所有浏览器受益的折中方案。而且，AMP 方案不依赖任何特定的服务端或客户端，可以将页面直接托管在 CDN，进一步提高用户访问速度。
实现：资源调度与控制
浏览器对不同资源加载和预加载有自己的策略，对于预加载，我们有一些控制权，但总的看来这一块对于开发者来说还是很不可控。例如浏览器默认会并行加载多张图片，但在屏幕小、网速慢、性能差的手机上，串行由上到下加载图片很可能体验更好。
2546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
