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 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

在Windows 10 系统上启用Hyper V遇到的错误:0x800f0831

Hyper-V是微软的一款虚拟化技术,是微软第一个采用类似Vmware和Citrix开源Xen一样的基于hypervisor的技术。

1241
来自专栏carven

win7 安装 mac虚拟机

  一周前社团ios方向刚完成招新,图新鲜的我也试装了一下虚拟机。自己装的时候是按教程来的,很轻松就装成了。 ios的经理见我装的那么溜,就把几个需要装虚拟机的...

684
来自专栏我是业余自学C/C++的

Mac部分按键失灵问题解决

2834
来自专栏针针小站

【Phi】斐讯K2P – 从Telnet到刷机

CPU:MEDIATEK MT7621AT 880MHZ RAM:128MB DDR3 SDRAM FLASH:16 MB SPI Flash 2.4G:...

2.7K2
来自专栏张善友的专栏

Windows Phone应用 博客园阅读器

今儿个平安夜,明天圣诞节,聚餐、飙歌、通宵玩,各种欢乐走起来!给WindowsPhone机友发个小应用。 最近学习实际开发WindowsPhone应用程序,第一...

2007
来自专栏FreeBuf

【漏洞预警】Discuz! 任意文件删除漏洞

Crossday Discuz! Board(简称 Discuz!)是北京康盛新创科技有限责任公司推出的一套通用的开源的社区论坛软件系统。采用 PHP 和 My...

2495
来自专栏Jerry的SAP技术分享

SAP产品的Field Extensibility

SAP开发人员的工作职责,除了实现软件的功能性需求外,还会花费相当的精力实现一些非功能性需求,来满足所谓的SAP Product Standard(产品标准)。...

1061
来自专栏WeTest质量开放平台团队的专栏

QUIC协议的分析,性能测试以及在QQ会员实践

原文链接:http://wetest.qq.com/lab/view/384.html

5043
来自专栏简书专栏

基于bs4+requests的蓝房网爬虫

1.代码可以直接运行,请下载anaconda并安装,用spyder方便查看变量 或者可以查看生成的excel文件 2.依赖库,命令行运行(WIN10打开命令...

781
来自专栏腾讯Bugly的专栏

全系统栈崩溃是什么鬼?手机管家高级工程师 jaylin,教你如何抓鬼!

Jaylin 腾讯手机管家团队,高级研发工程师,5年以上Android开发经验,擅长终端架构设计、性能和稳定性优化。 前言 Android的严重碎片化,通常会给...

3464

扫码关注云+社区