鹅厂原创 | AMP 初探
新媒体排版
香销冷雨帘襟落，提阶上，空廊回风，忆艾郎，前日曾共沐，暖手同游，梦惊尤在枕边，孤影叹单，冷暖心知。
AMP简介
1
AMP是什么
AMP 全称 Accelerated Mobile Pages(官网)顾名思义是为了加速移动网络的网页加载从而提升体验。感兴趣的可以先看一段实拍视频，感受一下。
从目前官方统计数据看来，速度平均有 4 倍提升
AMP 是一个在 Github 上的开源项目(传送门)在我看来，它是一套解决方案，我们的移动页面使用了这套解决方案之后，就可以得到提升加载速度的体验。
2
AMP的3大核心
AMP 是一套解决方案，它主要由 3 大核心组成：
1
AMP HTML
AMP HTML 本质上是使用自定义 AMP 标签&属性扩展的 HTML。通过这些自定义 AMP 标签&属性，可以确保可靠性能。具体可参见【AMP 实战】
2
AMP JS
AMP JS 库主要做了以下工作：
- 管理资源加载
- 实现 AMP HTML 自定义标签
- 最佳性能优化做法，比如 iframe 沙盒化、预先计算所有元素的布局、禁用性能缓慢的 CSS 选择器等等
另外，AMP 页面不允许使用第三方脚本。
3
AMP Cache
AMP Cache 是用来缓存所有 AMP 页面相关资源的基于代理的 CDN。可能说的有点抽象，实际上就是在 CDN 网络加了一层代理，专门用来处理 AMP 页面的缓存。实际上，AMP Cache 主要做的是：
- 实时处理：接受 AMP 页面的资源加载请求，分析相关路径，获取对应的缓存资源，如果没有缓存，则到真实的服务器获取资源
- 离线处理：处理爬虫爬到的 AMP 页面，分析页面上的资源，进行相应的路径替换以及缓存
具体的可以参考官方文档介绍。
除了这 3 大核心之外，AMP 还有其他的一些工具，比如 AMP 验证器，AMP 调试工具等等
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 页面进行预加载，预加载，加载，载......
4
国内的AMP
好吧，google 做了一个 AMP，你说百度能不能学着点吗？于是，百度借鉴 AMP，也做了一个 MIP (Mobile Instant Pages)。嗯，本质上，它们是一个东西，现在 MIP 也能识别 AMP 页面了，做的事情都差不多。
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/
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> <!--省略--> </ul></body></html>上面最主要就是用到了<amp-img>然后我们通过代理，在 chrome 中打开，在 url 末尾加上 #development=1，chrome dev tools 就会帮助我们进行 AMP 页面的验证：
再看下 network 界面：
可以看到，页面总共 24 张图片，首屏加载了 18 张，大概 6s 之后加载 4 张，再过 6s 之后再加载剩下的 2 张。如果在 6s 之内滑动下去的话就会发现图片是有进行 layzload 处理的可以看到，仅仅通过 <amp-img> 标签，AMP 就帮我们把所有与图片相关的优化都处理了，只要我们遵循 AMP 的规范来编码就可以了。
小结
到此，读者应该对 AMP 有个初步的认识了，AMP 页面真的很快，再搭配相应的 Cache 策略，在恶劣的移动网络下，秒开不在是梦！当然，也需要认识到 AMP 页面的不足的地方：目前 AMP 页面只适用于静态页面，因为它不允许第三方脚本；另外，页面的链接被替换了呀！因此，AMP 页面一般适用的地方是：站点官网、广告页。
怎么样，AMP是不是很神奇？很管用？9月16日的IMWebConf大会，来自Google的Michael将为大家带来《PWA与AMP - 移动Web的现在与未来》的精彩分享，欢迎大家来到现场或通过腾讯课堂观看直播！
腾讯IMWebConf 2017前端大会门还剩7天开幕
IMWebConf 2017前端大会的发起方是腾讯公司，组织者是腾讯公司最专业的前端团队之一IMWeb团队。作为国内前端圈一年一度的，有一定影响力的专业前端技术交流大会，IMWebConf已经成功举办五届，累计探讨的议题超过上百个，线上线下参会者数千人，累计影响前端爱好者超过数十万人。
今年，IMWebConf 2017 将于2017年9月16日在深圳科兴国际会议中心召开。会议时间为一天，议题涵盖前端工程化、性能优化、Node.js、前端框架、安全等前沿方向。大会将设一个主会场和三个分会场（Node.js分会场、框架工具性能分会场、综合分会场）。
本次大会，除了腾讯内部的前端技术分享，我们还有幸邀请到了W3C、微软、Facebook、Google、阿里等国内外知名IT行业的前端大咖，用最接地气的实践视角，以最高大上的思维方式，为您展现一个立体而丰富的前端体验之旅。
您殚精竭力想要的技术资料，在演讲分享中，就能轻易获得！
您百思不解的问题，在与技术大神的对话中，就会灵光乍现迎刃而解！
您想要接触的技术公司，在大会的现场也能轻松遇到！
不管你选择来现场，还是坐在家中看直播、看录播，你的要求都可以被满足！更多大会详情和优惠活动请关注大会官网：http://2017.imweb.io/
感谢本次会议的王者赞助商：腾讯课堂
感谢直播技术提供方：IT大咖说
感谢钻石赞助商（排名不分先后）：100offer、WeTest、轩辕传奇、图灵教育、人民邮电出版社
感谢其他所有的合作伙伴（排名不分先后）：HTML5梦工厂、开源中国、SegmentFault、前端圈、W3Cplus、前端早读课、WeX5、掘金、W3Cschool
感谢所有的合作媒体（排名不分先后）：Stuq、GitChat、React-China、CSDN、Coding、伯乐在线、V2EX、活动行、腾讯大学、腾讯学院、腾讯研究院、QQ空间，以及所有帮助宣传的团队媒体和个人。
七夕中奖名单
小编根据七夕文章中大家的评论情况，筛选出如下中奖粉丝：钲瀚（38赞），陳卓銳（32赞）、L.h（17赞，第7楼~）、名昕（14赞）、i😐（11赞）。请中奖者尽快回复公众号：“七夕”，小编将和大家联系，发送IMWebConf线上票~~~
再次祝贺大家，感谢大家的支持！
点击“阅读原文”关注大会详情、购买线上/现场票
腾讯云开发者
