本文作者是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
<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标签来引入样式表。
当然如果用一些脚手架的话，可以使用工具将开发体验更好的样式在线上打入到线上版本中。
标签
对于html的一些标签，需要提换成amp的相关标签。
比如：
<img> ---- <amp-img>
<sidebar> ---- <amp-sidebar>
<img> ---- <amp-img>
像<amp-img>本身支持一些属性，比如layout="responsive" ，就是可以设置图片的布局方式。
这就有点像htmx这种强调用用html来减少js的工具了。而amp本身对事件类的支持也跟htmx很像。
<button on="tap:hello.hide">这段标签表示了当button被触发事件的时候，id为hello这个dom节点会被隐藏。
同时，amp也支持一些自定义的标签：
AMP-Js
引用基本库
在amp页面中，需要前置的引入一个amp的库
<script async src="https://cdn.ampproject.org/v0.js"></script>同时需要注意的是，script标签必须是async的，amp对js引入有两个要求：
js必须是异步的 (比如：async标识)
js是amp的库和针对amp页面上的组件的
什么是页面上的组件？
其实amp设计的组件和 web components 差不多，
上面已经提及，就是一些第三方的库或者js文件是没有办法直接引用的，只能通过类似自定义组件的方式引入
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>而引入后的组件，可以像下面这样使用：
<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的模式在当时的人看来也很奇怪。
引用：
https://www.semrush.com/blog/amp-pages/ https://amp.dev/documentation/guides-and-tutorials/websites/start/create/basic_markup
- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
扫一扫
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
