AMP：全称AcceleratedMobile Pages(加速移动页面)
为什么会出现AMP框架呢！因为Google想做一个快速并且有可靠性能的框架，摆脱HTML里面一些元素的束缚。所以通过自定义元素和web组件来加速移动页面
AMP到底有多快呢！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的要求如下：
- DTD 必须是： <!doctype html>；
- 顶层标签必须包含 AMP 属性，如：<html ⚡> 或 <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">；
- 必须将 <script async src="https://cdn.ampproject.org/v0.js"></script> 作为 HEAD 区域最后的元素；
- 必须在 HEAD 区域包含以下代码：<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>；
AMP Runtime
AMP HTML 代码中，HEAD 区域最后外链引入的 JS 就是 AMP Runtime。AMP Runtime 提供对自定义元素（Custom Elements）的支持，负责协调资源的加载时机和优先级，以及提供验证器等调试功能。
访问 AMP HTML 时，在 URL 最后追加 #development=1 会开启开发者模式。这时 AMP Runtime 会自动加载验证器，并在控制台显示本页不符合 AMP 规范的位置信息。
AMPComponents
AMP Components 是使用浏览器自定义元素（Custom Elements）实现的组件，用来替换 HTML 中默认的 <img> 和 <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 属性）：youtube.amp.html
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> 这里有一个按照 AMP HTML 规范编写的页面
上述讲了AMP的三部分，那AMP的为什么这么快呢？下面说一下它的机制。
APM机制我总结了三点：
1.web组件库（有序的加载页面）
2.创建“阅读”内容，不参与互动（更少的操作DOM事件）
3.缓存第三方框架（CDN）
具体规则如下：
- 仅允许异步脚本
- 静态地调整所有资源
- 不让扩展机制阻止呈现
- 保持所有第三方JavaScript不在关键路径之外
- 所有CSS必须是内联和大小限制
- 字体触发必须有效
- 最小化样式
- 只运行GPU加速动画
- 优先资源加载
- 立即加载页面
综上所述，AMP在内容加载部分还是有优势的，特别是通过谷歌广告位赚钱的友商。
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
