AMP 是什么？ – 曾小乱

Accelerated Mobile Pages（简称AMP，意为“加速移动页面”）是Google带领开发的开源项目，目的是为提升移动设备对网站的访问速度。AMP也可指其派生的标准和库等项目成果。AMP在HTML等广泛使用的网络技术基础上进行改良，它的核心称作AMP HTML，是HTML的一种。服务于技术预览期结束后的2016年2月正式发布。

简单一点来说，AMP 就是一种让移动网页访问速度更快的一种页面写法，本质上依然是HTML + CSS + js，只是避免了那些损耗性能的糟粕特性。谷歌爸爸占据着流量的入口优势，说，你们按照我说的来，你们的网站速度就会更快，你爱信不信，反正将页面改写为AMP的人SEO排名已经遥遥领先，率先成为高富帅了。所以，我不得不再切一个AMP的页面。

为什么会有加速的效果？

AMP有着非常多的限制，本质是为了避免HTML、CSS、JavaScript损耗性能的部分特性。
发布的AMP网页会在谷歌的服务器上访问，所以是利用谷歌的cdn资源和缓存资源。
谷歌有着大量的访问流量，可以提前缓存静态资源。
😝以上原因都是我猜的。

amp 能否结合 vue 或者 react 一起使用？

react的自定义组件名是以大写开头的，目前来看现有amp组件都是小写，那么react应该不会接管amp的组件，不过amp对额外的script、style标签是有限制的，所以需要进行后端渲染，在参考链接里有一篇文章可供参考。
目前的认识来看，应该是不能使用 vue 的，vue 会把 amp 组件当成 vue 组件，直接无法通过构建。
当然，对大牛来说上面都不是问题。

如何将现有 HTML 转化为 amp 页面？

PHP 有一些类库利用正则表达式做一些标签替换就行了，对应其它语言类似。
谷歌收购了一款专门将传统网页转化为 amp 页面的工具：Relay Media。

如何快速上手？

在 amp 页面上加上 development=1 的参数就会有页面校验功能，这样把报错一个一个修正过来，免去文档不知道从哪里看起的烦恼。

https://www.dev.591.com.tw/home/news/detail?id=17#development=1

amp 内置标签一些特殊用法

amp-img 必须设置 height 和width 属性，否则无法正常显示，所以如果你使用的是富文本编辑器，那么记得在img标签上设置width 和 height的属性，以便转换为amp-img标签时不会失效。
```
<img src="https://hp1.dev.591.com.tw/house/news/2018/151600946998898006.png" width="388" height="291" layout="responsive">
```