AMP 初探
本文作者：IMWeb 黎清龙 原文出处：IMWeb社区 未经同意，禁止转载
AMP 初探
1 AMP 简介
1.1 AMP 是什么？
AMP 全称 Accelerated Mobile Pages(官网)顾名思义是为了加速移动网络的网页加载从而提升体验。
感兴趣的可以先看一段实拍视频，感受一下。
从目前官方统计数据看来，速度平均有 4 倍提升
AMP 是一个在 Github 上的开源项目(传送门)
在我看来，它是一套解决方案，我们的移动页面使用了这套解决方案之后，就可以得到提升加载速度的体验。
1.2 AMP 的 3 大核心
AMP 是一套解决方案，它主要由 3 大核心组成：
1.2.1 AMP HTML
AMP HTML 本质上是使用自定义 AMP 标签&属性扩展的 HTML。
通过这些自定义 AMP 标签&属性，可以确保可靠性能。
具体可参见【3 AMP 实战】
1.2.2 AMP JS
AMP JS 库主要做了以下工作：
- 管理资源加载
- 实现 AMP HTML 自定义标签
- 最佳性能优化做法，比如 iframe 沙盒化、预先计算所有元素的布局、禁用性能缓慢的 CSS 选择器等等
另外，AMP 页面不允许使用第三方脚本。
1.2.3 AMP Cache
AMP Cache 是用来缓存所有 AMP 页面相关资源的基于代理的 CDN。
可能说的有点抽象，实际上就是在 CDN 网络加了一层代理，专门用来处理 AMP 页面的缓存。
实际上，AMP Cache 主要做的是：
- 实时处理：接受 AMP 页面的资源加载请求，分析相关路径，获取对应的缓存资源，如果没有缓存，则到真实的服务器获取资源
- 离线处理：处理爬虫爬到的 AMP 页面，分析页面上的资源，进行相应的路径替换以及缓存
具体的可以参考官方文档介绍。
除了这 3 大核心之外，AMP 还有其他的一些工具，比如 AMP 验证器，AMP 调试工具等等
1.3 为什么 AMP 快？
刚刚说的可能会让读者一脸懵逼，这里就通俗地讲解一下，为什么 AMP 可以提升页面的加载速度。
首先可以参考官方文档介绍的 为什么 AMP 快。
实际上，官方文档说的都是我们平常在优化页面加载性能的时候的经验做法，AMP 就是实现了这些做法而已。
那么，AMP 是怎么实现的呢？答案就是 AMP 的 3 大核心。
首先，要提升一个页面的加载性能，我们首先要知道影响页面性能的地方是哪里。
举个栗子，比如说图片，html 在解释一个 img 标签的时候，要去异步加载一个图片资源，在加载图片之前，不能阻塞页面渲染，因此我们首先要渲染一个图片的占位符，比如 alt。
等到图片加载完成，这个时候浏览器知道了图片的大小，这时就要渲染图片，如果图片真实的大小和之前的占位符的大小不一样，就会造成 reflow。
那我们知道图片的这个问题了，那是不是可以想办法一开始就计算好占位符的大小，这样就不会造成 reflow 了。
另外，当图片很多的时候，我们很自然的就能想到 lazyload，于是我们就 balabala 写一个 lazyload 组件用起来。
因此，AMP HTML 就提供了一个自定义标签<amp-img>。
AMP 要求所有的图片资源必须使用<amp-img>，禁止使用<img>。
这个自定义标签<amp-img>就实现了所有我们在加载图片上面所使用到的优化手段。
还有许多场景，比如仅允许异步资源，就是为了防止阻塞页面的渲染，AMP 不允许使用第三方脚本就是如此。
另外一个重要的优化手段是 AMP Cache。
我们知道，优化性能最好的手段就是缓存，因此 AMP Cache 是重中之重。
前面的 AMP Cache 介绍在读者看来可能有点云里雾里，既然有 CDN 了，为什么还要加一层代理？
实际上，AMP Cache 最主要做的事情是离线处理，它把 AMP 页面的所有资源都进行缓存并且替换掉了路径。
举个栗子，我们腾讯课堂有个 AMP 页面，路径是：http://m.ke.qq.com/index.html。
页面里有一张图片，路径是http://9.url.cn/myPic.jpg。
当 AMP Cache 对这个 AMP 页面进行缓存的时候，会扫描页面，对里面的资源进行缓存。
然后把图片的路径替换成http://cdn.google.com/google/amp-cache/m.ke.qq.com/s2/9.url.cn/myPic.jpg，当然这是举例子，真实路径不一定是这样，当页面的所有资源都进行了缓存，路径都替换了之后，那么这个替换了路径之后的 AMP 页面也会进行缓存，同时它的路径可能是http://cdn.google.com/google/amp-cache/m.ke.qq.com/s1/m.ke.qq.com/index.html。
最后最重要的事情就是，在 google 搜【腾讯课堂】的时候，我们的 AMP 页面被搜到了，当用户点击这个搜索结果的时候，打开的并不是http://m.ke.qq.com/index.html，而是http://cdn.google.com/google/amp-cache/m.ke.qq.com/s1/m.ke.qq.com/index.html。
好，说到这里，聪明的读者应该知道了：
- 所有资源都是同一个 host，可以共享 dns，tcp 链接，还有 cdn
- 这还没什么，主要的是 google 搜索结果页会对 AMP 页面进行预加载，预加载，加载，载......
1.4 国内的 AMP
好吧，google 做了一个 AMP，你说百度能不能学着点吗？
于是，百度借鉴 AMP，也做了一个 MIP (Mobile Instant Pages)。
嗯，本质上，它们是一个东西，现在 MIP 也能识别 AMP 页面了，做的事情都差不多
2 AMP 初体验
由于国内网络，鉴于 MIP 和 AMP 是一样的，所以下面我们通过 MIP 直接来真实感受一下
操作步骤异常简单：
- 打开 PC chrome 浏览器
- 按 F12，打开调试控制台
- 切换为移动模拟器
- 地址栏输入：
www.baidu.com - 在百度官网搜索：
MIP - 然后点击 MIP 官网结果就可以看到效果了
下面是操作的录制:
可以看到，MIP 页面的秒开体验，再和非 MIP 页面的一比，简直一个天上一个地下，要注意到，这可是 PC！
聪明的读者应该能观察到，我们打开的 MIP 官网的 url 是：
https://www.baidu.com/mip/c/www.mipengine.org/而不是https://www.mipengine.org/
3 AMP 实战
上面讲的也差不多了，下面我们来个小实战，来让读者体验一下 AMP 页面
首先我们写 HTML，直接从官网上面 copy HTML 的结构，然后我们写一个列表，列了 24 个课程卡片，每个课程卡片包含课程封面图，还有课程名字与价格：
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://m.ke.qq.com/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<style amp-custom>
/* any custom style goes here */
.clist {
padding: 0;
font-size: 0;
}
.clist__item {
display: inline-block;
width: 50%;
/* height: 500px; */
vertical-align: top;
}
.clist__name {
font-size: 18px;
}
.clist__prce {
font-size: 14px;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1 class="tt">欢迎来到<span class="tt__name">腾讯课堂</span></h1>
<ul class="clist">
<li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCibEMMrIGh9o2PgpZ8YvRAImnjS3HHd52m6CzLJQJrMSicqbY9EV77BZXnodAgN6WAE/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">0基础入门-中日教情景语法课【和风日语网校】</h2>
<p class="clist__prce">￥388.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLBxrgvxvOkmibuWybuibKhIYbgtSGngTOFbevxCDAqw5BEPZrnwHZbsvCY2K3ST4nORc/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">新标日入门初级精讲课（上）【和风日语网校】</h2>
<p class="clist__prce">￥140.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLDV0Uw3dwzibvYbFbaE25qpfIp95LTjsCsJpsUuzdM3bRGTCJZglM0VmL4kUJnjOqp4/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">小白专用课程：软件测试从零开始</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCzojp4W1DBG70TgerLQic4XggkPFjVSZF8oMhlOJSDvNl1ARHiaTzwgP2IpVNDEAP8A/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试实战专题课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAEFnG7joWicFS2cKF80NH4knVlgdPRbWCiaJ5DhibVUdYsm4WlMM7Xn1ZBPsibDDu2oCI/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试从基础到高级全栈课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLDujuL444SVibzJTAXicALwnB6UQYVtPYNPuGGHl7FDEUup6XasBCKjzgvVQvB9JeUOw/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">日语初级语法全掌握【知诸学院】</h2>
<p class="clist__prce">￥199.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLA0TKpQmI0Kow2V1RKuUnWyjqJicnMWajurXQHTIib1qG4cnMpom6zzOfJ5RHlTpPZicY/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">备战日语能力考N1N2系列【和风日语网校】</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLDqsclBwEst3Z3jWiaTFx6QGicCniapDbFNPUBzC6x6712f7iaxSALjGyM3icWFYXVgTrB8/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">日语能力考试12月备考策略N1N2大放送【和风日语网校】</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAv1lhMS81mdnZLL7A62KrzKght0oxH5az1BkDUqVNCfjoiaKacJ6ickiagEJHRZPdyKk/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">0基础入门-中日教情景语法课【和风日语网校】</h2>
<p class="clist__prce">￥388.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCSiaTu9icgF5OK1ibtZfbJMYrErGcHDjl8IdXywcUAY6B0N54zZ9tLicalicXTgEj5L3DI/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">新标日入门初级精讲课（上）【和风日语网校】</h2>
<p class="clist__prce">￥140.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCXdVmsp5KyiaxPKic0u1SFeia4vSDMtoKXj4icH74tpVnAiby3IicnmQf2Irc36kEHhGsqI/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">小白专用课程：软件测试从零开始</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAShHftWng9OZ3GwANkoADLMo0ssTMftXLoNm3jzOTLNMVCSGQ5yXak74NbdfX7lLk/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试实战专题课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLBibRsot4mLvCss5RicLAP8udxqraQx4NYARRPNEK1os8mou5kBBvZF71CwfcRGy6CCE/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试从基础到高级全栈课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLB0NSbJLqpmymBBzJSmeHWXbAWkHVc99mNhPtowOt95QjtS4vhaOlbC6bYKL3xce8A/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">日语初级语法全掌握【知诸学院】</h2>
<p class="clist__prce">￥199.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLBcs2iazTdcKfC2RtPk0gVPw65LK3Nurj91nCedstEyPLMrsZacUxCRD5AtuicoicdUOY/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">备战日语能力考N1N2系列【和风日语网校】</h2>
<p class="clist__prce clist__price--free">免费</p>
</l