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

相关文章

来自专栏腾讯Bugly的专栏

跨平台 ListView 性能优化

导语 精神哥前阵子去参加了好友小青在北京办的T沙龙,探讨移动端热更新相关的话题。Bugly 曾为大家介绍过不少腾讯内部的热更新的框架,正好这次看到了美团,去哪儿...

37012
来自专栏顶级程序员

Android学习路上会遇到的各种瓶颈总结

前言 对于大多数大三学生来说,这个暑假是人生最后一个暑假。对于IT专业的学生来说,开学后就要面对各大IT企业的秋招,很多人会成为从0开始的An...

4558
来自专栏极乐技术社区

小程序音频API踩坑手册

2123
来自专栏QQ会员技术团队的专栏

一起脱去小程序的外套和内衣:微信小程序架构解析

微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,小程序给开发者带来了很多惊喜。通过这篇文章和大家一起...

5K3
来自专栏BestSDK

从绘制到工具,一套完整的产品经理制图干货

很多人拿到需求就火急火燎的开始画原型,然后画着画着觉得有些地方没有考虑到,又回头去改,如果在画原型之前,你能将自己的业务流程想好,用户的操作流程想好,页面跳转想...

2464
来自专栏iKcamp

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式。那么,为什么大家会觉...

720
来自专栏IMWeb前端团队

2015-2016前端架构体系技术精简版

2015-2016前端架构体系技术精简版 ? 点击查看github高清图 点击查看完整版 一、框架与组件 **bootstrap等UI框架设计与实现 伸缩布局...

1915
来自专栏美团技术团队

大众点评App的短视频耗电量优化实战

前言 美团点评测试团队负责App的质量保证工作,日常除了App的功能测试以外,还会重点关注App的性能测试。现在大家对手机越来越依赖,而上面各App的耗电量,直...

4078
来自专栏Android机动车

分享一个不错的开源项目

年初计划和朋友一起,利用周末和闲暇时间开发一个开源的项目,权当练手。全部使用最新控件、开发框架和设计思路。

722
来自专栏何俊林

kotlin写的音视频app(已开源)

目前项目持续更新重构中(目前项目已经转型到kotlin了) Life is a Multimedia information app based on Mate...

2059

扫码关注云+社区