「如何实现流动式软件发布」线上课堂开课啦,快来报名参与课堂抽奖吧~ 了解详情
写点什么

AMP HTML 助力移动 Web 提速

2015 年 10 月 26 日

Google 开源了旨在提升移动 Web 使用体验的受限 HTML(restricted HTML) 规范。

加速移动页面(AMP) 是一个由Google 发起的项目并很快被大约30 家内容出版商支持,该项目的目的是使得普通网页能够在移动设备上实现更快甚至是瞬间的加载。用户可以从这种更加接近无缝加载的体验中获益,而出版商们也从中期待更多的广告收入,原因是页面加载提速后会明显降低网页跳出率,据最近的一项调查显示,如果一个页面的加载时间大于10 秒钟则该页面的跳出率可达58% 之高。

AMP 的目标是使用受限 HTML 以及缓存技术来提高移动网络中静态内容的性能。这个框架并不引入新的 Web 开发语言或相关技术,而是在现有技术的基础上完成。除少数限制外,出版商们仍然可以自由地创建和发布他们的内容。当然,他们也被建议在全世界范围内使用内容缓存来加速网页加载。Google 可以为那些对 AMP 感兴趣的出版商们免费提供缓存服务。

AMP 网页使用一组受限的 HTML 标签,这意味着现有的浏览器无需任何改动就可以渲染 AMP 网页。存储这些网页的服务器可将 AMP 网页与其它 HTML 页面同等对待或者也可以对其使用一些优化措施,例如: 将图像的大小调整为窗口 (viewport) 的大小,内联 (inline) 某些图像或者 CSS,压缩 (minify)HTML 和 CSS,提前加载外部组件等等。

由于性能方面的原因,一些 HTML 标签被禁止使用: applet, base, embed, form, frame, frameset, object, param。除按钮 (Button) 外,输入元素被禁止使用。除了 application/ld+json 类型的脚本以及为加载 AMP 运行时环境和页面头部最后一个元素的必须的脚本标签以外,其余的脚本都被禁止。audio,img 和 video 被替换成了自定义元素: amp-audio, amp-img 和 amp-video。 amp-iframe 取代了 iframe,该 amp-iframe 元素对原有的 iframe 进行了某些限制。此外 Google 还设计了一些其它的自定义元素:amp-anim, amp-ad, amp-pixel, amp-twitter 等。所有这些元素设计的目的都是为了在页面的预加载、加载及渲染等环节强化某些规则以最大限度地提高页面性能。

除了 AMP 脚本以外,个人写的 JavaScript 脚本也在被禁止的行列。AMP 脚本 (本身也是 JavsScript 写的) 用来加载 AMP 运行时环境,该环境实现了 AMP 的自定义元素、调度执行资源加载以及在开发过程中验证页面。AMP 运行时环境决定了是否以及何时来加载一个资源。

第三方内容 (包括第三方 JS),比如内嵌广告或者网页分析脚本等可以借用 AMP 的元素 ( amp-ad , amp-pixel ) 包含进来, 这些元素被强制要求运行在一个 iframe 沙盒中。跟踪像素 ( Tracking pixels ) 是用来做分析用的。

根据规范构建出的AMP 组件也许会包含在首页中执行的JavaScript,不过,优先级会较低。这些组件被用于某些应用提供的服务,这些应用包括Instagram、Twitter 或者YouTube。CSS 也可以被包含,不过也必须遵守某些特定的规则

速度索引(Speed Index) 用来衡量某些经AMP 优化过的网页,据AMP 团队透露,他们注意到经过优化后,网页性能的提升从15% 到85% 不等。为了展示AMP 网页的速度,他们已经建立了一个Google Search 的demo。要运行这个demo,需要使用移动设备访问下面的链接: g.co/ampdemo AMP 规范并不是最终版,仍然在完善之中。

为了使用 AMP 技术发布内容,一些出版商已经加入了这个项目,以下是其中的一些出版商名单, 他们是: BBC、金融时报、经济学人、赫芬顿邮报、纽约时报以及华盛顿邮报。

查看英文原文: Speeding Up the Mobile Web with AMP HTML


感谢张龙对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群)。

2015 年 10 月 26 日 19:006975

评论

发布
暂无评论
发现更多内容

区块链技术破解数字版权保护难题

CECBC区块链专委会

区块链 版权保护 数字技术

Google鼓励的13条代码审查标准 [建议收藏]

简爱W

人生革命由自律发起

胡迪伦

自学编程 拖延症 懒惰 死循环

怎么向女朋友解释什么叫区块链?

艾小仙

比特币 区块链 以太坊 defi

如何将VSCode变成绿色版本

lmymirror

vscode 教程

Python 函数为什么会默认返回 None?

Python猫

Python 编程

商业通识 : 商业到底是什么?

Walker

学习 得到 个人成长 商业

oeasy教您玩转linux010206toilet

o

一个在交流群里讨论过两轮的问题,答案竟然跟一个 PEP 有关

Python猫

Python 编程

Elasticsearch之mapping

北漂码农有话说

SpringBoot 缓存之常用注解

hepingfly

Java 缓存 springboot 注解

首个数字银行卡明年发行,广州出台区块链措施支持大湾区

CECBC区块链专委会

区块链 金融科技 社会

【MySQL】我这样分析MySQL中的事务,面试官对我刮目相看!!

冰河

MySQL 面试 事务 隔离级别 冰河

为什么Java二维数组不用指定列的长度

Rayjun

Java 数组

Python 为什么没有 void 关键字?

Python猫

Python 编程

JavaScript 深拷贝与浅拷贝

梁凤波

Flink从保存点启动应用-18

小知识点

scala 大数据 flink

区块链技术应用于链接智慧医疗

CECBC区块链专委会

区块链 社会保险 智能医疗

智能商业时代的思考(一)从在线化到网络化

刘旭东

拼多多 淘宝 智能商业 网络协同

java安全编码指南之:声明和初始化

程序那些事

安全编码 java安全编码 编码指南 对象初始化

拥抱K8S系列-04-基于docker部署更多应用

张无忌

Docker 标准化 vsftpd

2020-09-03-第十三周作业

路易斯李李李

云原生 go-zero 微服务框架

万俊峰Kevin

go golang microservice go-zero 微服务框架

妈妈,今天您几点下班?

脑极体

职场求生攻略答疑篇之 3 —— 数据是土地

臧萌

数据 职场成长

[翻译]Defer,Panic,and Recover

卓丁

golang defer panic recover

Python 为什么要在 18 年前引入布尔类型?且与 C、C++ 和 Java 都不同?

Python猫

Python 编程

Python 为什么能支持任意的真值判断?

Python猫

Python 编程

宁波新基建之路 基于制造优势破题智慧发展

CECBC区块链专委会

新基建

持续集成有什么好处?快来看鸭

清菡

jenkins

为稳外贸保驾护航 区块链交易平台显身手

CECBC区块链专委会

区块链 银行 福费廷

AMP HTML助力移动Web提速-InfoQ