黎清龙

6 天前

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 页面的秒开体验,再和非 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>
        </li><li class="clist__item">
            <amp-img 
                src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLBibbP6ePic0IyEzncn7R2mP05kL0bJfP6tvd0MzxHGk8KRYmfCZBIjwEyQscL6cvO8A/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/ajNVdqHZLLCAIneH0Tq36nVxduhps8U1Z050Mf4M2ic9Ik1KkwtXOFg5wqFARsWakpIltWdYnKHU/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/ajNVdqHZLLCiaTibjHZP5DSjoEqibTYWSSWNe9GNfEJI3uYSszhNAnLDzfMRGAd2koRMzWSNDM0ITE/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/ajNVdqHZLLCzHEECs6RlyDSg7JU1I9EHA0PP97pyGPxicj23J1shtYWR51uyFibYO54HJhsnYUibDs/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/ajNVdqHZLLCpicRiayM5FTLfwkWgiaIuw3FgegKtvgltpFJn2ibA6Ubf5xCpRXiciaczQ5EZFMMWnJoUc/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/ajNVdqHZLLBROfeZkt9Xz7NOAkicyZxI1uB7T5atHITRIHDr6S75YY2bV9VZxxhB9VFRnl57bd2Y/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/ajNVdqHZLLB3icdDk4Vs3xOq8ytNiauslNczwyNXiaCgU9dXxbjoPkaibrpqLmO5yLRTwo9CibcucHibA/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/ajNVdqHZLLAmQOhfTwpkTzicRiaJ1ibMlYxkJwJUCibrFNictfcbWjaTnybt9HAVfP8ShhdBA7obB5X4/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/ajNVdqHZLLA1FgDkiaVOZjbBdjvqNPCTaRWSII9eOXCeJ6s2xg3eoKTib2QibUPRtebC99kngysa5M/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>
    </ul>
  </body>
</html>

上面最主要就是用到了<amp-img>

然后我们通过代理,在 chrome 中打开,在 url 末尾加上 #development=1,chrome dev tools 就会帮助我们进行 AMP 页面的验证:

amp1

再看下 network 界面:

amp2

可以看到,页面总共 24 张图片,首屏加载了 18 张,大概 6s 之后加载 4 张,再过 6s 之后再加载剩下的 2 张。

如果在 6s 之内滑动下去的话就会发现图片是有进行 layzload 处理的

可以看到,仅仅通过 <amp-img> 标签,AMP 就帮我们把所有与图片相关的优化都处理了,只要我们遵循 AMP 的规范来编码就可以了

4 小结

到此,读者应该对 AMP 有个初步的认识了,AMP 页面真的很快,再搭配相应的 Cache 策略,在恶劣的移动网络下,秒开不在是梦!

当然,也需要认识到 AMP 页面的不足的地方:

目前 AMP 页面只适用于静态页面,因为它不允许第三方脚本;另外,页面的链接被替换了呀!

因此,AMP 页面一般适用的地方是:站点官网、广告页。

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。