本文作者是360奇舞团的前端工程师

#AMP (Accelerated Mobile Pages)是一个开源的框架来帮助提升整个移动端页面的加载速度，使用户体验更好，本身是 google 开发设计的。

背景

15，16 年左右的时候，移动端正是飞速发展的时候，而当时从前 PC 的站点流量正在被大量的移动端页面所吞噬。大概 16 年左右，相关统计表明就已经有超过 6 成的流量来自移动端了。而现在来看用户的流量移动端应该不止 6 成了。而当时的 google 肯定也是这么认为的，AMP 就这么诞生了。

google 期望他们能对 web 进行一次再定义，让更多的人能用他们的标准来生产 AMP 的页面。能够成为一个普通网页的降级版本，尤其是在弱网条件下。

介绍

AMP 大致分为 AMP-Html, AMP-Js, AMP-Cache 三个模块。

AMP-html

是为了优化整体的页面加载性能，单独部署的一套 html 方案。整体上与 html 没啥区别，写法上也基本一致。doctype 与 h5 的一样，只不过在 html 标签上面，需要单独声明下 amp 页面的特殊表识。

head

也基本相同，里面有一点需要注意的是，字符集 mete 标签必须要放在 head 的第一个位置。

amp 需要定一个一个明确的文档字符集。而放在第一个的原因是为了防止放在下面时，上面已经解释过的文档被重新解释执行。

link

同时需要申明一个 link 标签，这个标签的意思是你需要一个基本的版本页面，让你可以在 amp 文档中查找主版本，也就是主页面(非 amp 版本)。

其实这个就是在 seo 优化中很重要的一个部分，大多数搜索引擎对于重复内容的筛选过滤，一致时 seo 很重要的部分。而 amp 天然有这方面的特点。所以 amp 页面要求你必须要声明一个canonical类型的标签，来做 SEO 优化。

<link rel="canonical" href="/article.html">

对比来说，可能你的amp页面名字叫article.amp.html

viewport

amp同样要求有一个明确的viewport属性。同理，也是为了页面的加载性能，防止页面大小重绘引起的性能问题

css

对于css有强要求，功能上基本都支持，只是一些特殊属性是不允许用的。 !important 和 *号选择器

而在引用上，不允许外链的形式引入css，同时也不支持行内样式。只能使用内嵌的style标签来引入样式表。

当然如果用一些脚手架的话，可以使用工具将开发体验更好的样式在线上打入到线上版本中。

AMP-Js

引用基本库

在amp页面中，需要前置的引入一个amp的库

xml 复制代码

<script async src="https://cdn.ampproject.org/v0.js"></script>

同时需要注意的是，script标签必须是async的，amp对js引入有两个要求：

js必须是异步的 (比如：async标识)
js是amp的库和针对amp页面上的组件的

什么是页面上的组件？

其实amp设计的组件和 web components 差不多，

上面已经提及，就是一些第三方的库或者js文件是没有办法直接引用的，只能通过类似自定义组件的方式引入

xml 复制代码

<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>

而引入后的组件，可以像下面这样使用：

arduino 复制代码

<amp-base-carousel width="600" height="400" layout="responsive">
  <amp-img src="https://cdn.xxx.com" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://cdn.xxx.com" width="600" height="400" layout="responsive"></amp-img>
</amp-base-carousel>

amp提供了一个大量组件的库，可以让页面来引用

amp页面能力检查

类似chrome的pwa检查，它会根据你的项目情况，对你页面进行评分，看看是否符合amp页面的标准。

上面说的一些必要条件，都可以利用这个来检测出来。开启的话，只需要在页面上面加入 #development=1就可以开启(前提的引入了它们的库，里面包含 AMP validator )

下面是一个基本的要求表：

AMP-Cache

这个可以理解为一钟CDN的能力，大致上就是会缓存住你用户曾经访问过的所有AMP页面。而这种能力往往都是搜索引擎提供的。

比如现在主流的两种AMP-Cache的CDN提供者就是Google AMP Cache 和 Bing AMP Cache。对于有AMP标签的页面，AMP-Cache就会缓存住页面内容。

当然，你也可以自己上传到CDN来主动缓存页面，不过目前只有google支持。

问题

复杂应用场景

其实看上面的大致描述，就可以看出，AMP的设计对于复杂的前端页面来说，使用起来太麻烦，设置说根本没法使用。其实它本身的定位就是展示页面的快速产出，类似文章类，新闻类的页面。其能力也是为了部分对标苹果和亚马逊推出的新闻类的网页方案。

它可能更适合与我们的CMS系统相结合，来使移动端的体验更好，而不是处理复杂交互的前端页面。

外部评价

这个也是AMP产生后几年，对这个项目有些人产生了质疑。

就是它的维护成本较高，需要严格按照标准来产生页面，灵活性不够。
它本身标榜的是良好的用户体验，但是似乎它只停留在了性能体验上面，而当前前端页面的用户体验，性能只是一方面。
缓存问题让一些广告更新策略变得很困难
google的意图似乎也让使用者很担心，他们觉得google在控制互联网。大公司的抵触也让推广变得困难。

基于上面的原因，AMP的推广和使用都有很大困难，但是目前来看，他们的github仍然在更新，谁也不知道未来会是什么样的。毕竟技术爆炸这种事会很快的影响每一个人，几年前MVVM的模式在当时的人看来也很奇怪。

引用：

什么是amp页面

背景

介绍