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 库主要做了以下工作:

  1. 管理资源加载
  2. 实现 AMP HTML 自定义标签
  3. 最佳性能优化做法,比如 iframe 沙盒化、预先计算所有元素的布局、禁用性能缓慢的 CSS 选择器等等

另外,AMP 页面不允许使用第三方脚本。

1.2.3 AMP Cache

AMP Cache 是用来缓存所有 AMP 页面相关资源的基于代理的 CDN。

可能说的有点抽象,实际上就是在 CDN 网络加了一层代理,专门用来处理 AMP 页面的缓存。

实际上,AMP Cache 主要做的是:

  1. 实时处理:接受 AMP 页面的资源加载请求,分析相关路径,获取对应的缓存资源,如果没有缓存,则到真实的服务器获取资源
  2. 离线处理:处理爬虫爬到的 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

好,说到这里,聪明的读者应该知道了:

  1. 所有资源都是同一个 host,可以共享 dns,tcp 链接,还有 cdn
  2. 这还没什么,主要的是 google 搜索结果页会对 AMP 页面进行预加载,预加载,加载,载......

1.4 国内的 AMP

好吧,google 做了一个 AMP,你说百度能不能学着点吗?

于是,百度借鉴 AMP,也做了一个 MIP (Mobile Instant Pages)

嗯,本质上,它们是一个东西,现在 MIP 也能识别 AMP 页面了,做的事情都差不多

2 AMP 初体验

由于国内网络,鉴于 MIP 和 AMP 是一样的,所以下面我们通过 MIP 直接来真实感受一下

操作步骤异常简单:

  1. 打开 PC chrome 浏览器
  2. 按 F12,打开调试控制台
  3. 切换为移动模拟器
  4. 地址栏输入:www.baidu.com
  5. 在百度官网搜索:MIP
  6. 然后点击 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

使用GitHub搭建个人博客

今年使用GitHub搭建了自己的博客:kaze2017.com 我整理了一下搭建博客的过程,分为购买域名、准备环境、Git和GitHub、搭建博客、绑定域名、感...

22110
来自专栏云计算与大数据

研发:k8s pod 服务生成海报时字体出现乱码

RUN apk --update add fontconfig ttf-dejavu

732
来自专栏小文博客

为你的站点加上“懒加载”——提高用户体验&节省流量

通常来说,一个正常web页面是由图片和文字以及各种CSS,JS构成,而这其中,拖慢网速的罪魁祸首就是图片。懒加载即将页面中的图片分布加载,边浏览边加载,从而减轻...

3629
来自专栏技术记录

版本控制器——Egit使用方法

什么是Git Gitv是目前世界上最先进的分布式版本控制系统。   那我们为什么需要学习Git呢?因为在我们传统的java自学中,所有的项目都是自己独立开发完成...

1846
来自专栏地方网络工作室的专栏

打造前端MAC工作站(八)配置称手的 chrome 和 safari 浏览器

打造前端MAC工作站(八)配置称手的 chrome 和 safari 浏览器 前言 前端工程师绝大部分的工作成果都是需要在浏览器中查看的。当然,浏览器更是我们学...

20710
来自专栏Albert陈凯

2018-10-16 svn迁移到Git svn上r80000个哭

这活不应该是Linux管理员的干的吗?什么时候轮到程序员了,操蛋,想清楚自己是干啥的,是为了工作而工作还是为了目标而工作

821
来自专栏求索之路

让你的Mac成为超高效率的工作工具(Keyboard Maestro 和 Alfred的整合)

用mac已经有了一段时间了,作为一个爱折腾(懒)的程序员,我花费了大概一周的时间将自己的mac打造成了一个超高效率的工作工具,先展示一下其中的一个成果。 ...

55711
来自专栏知晓程序

如何让公众号粉丝使用小程序? | 小程序问答 #41

也许你已经知道,微信提供了「小程序关联公众号」的功能,而且小程序还能关联 50 个公众号。

1202
来自专栏知晓程序

微信小程序接口全解析!从官方 Demo 了解小程序的能力

1173
来自专栏CIT极客

【奇淫巧技】各种冷门的实用技巧成就技术帝!

3848

扫码关注云+社区