BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Google推出移动网页加速项目AMP

| 作者 张天雷 关注 4 他的粉丝 发布于 2015年10月12日. 估计阅读时间: 4 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

网页性能一直是网站、用户以及相关团体所关心的问题。近些年来,如何提升网页性能吸引了很多工程人员和研究人员的关注。每年,甚至都会有专门的会议来讨论该问题。然而,广大用户,尤其是移动客户端的用户,仍然会经常遇到网页加载速度过慢的情况。为了解决该问题,Google近期联合数十家技术机构和企业等推出移动网页加速项目(Accelerated Mobile Pages, AMP)

在几个月之前,Google就发起了关于如何改进移动网页内容生态系统的讨论。当前情况下,很多网页的加载速度都与复杂的JavaScript库、工具和插件等密切相关。一旦网页中插入了复杂的JavaScript脚本,网页的加载速度就很难保证。因此,即使网页中的文字内容能及时接收,也会因为网页中的图片、动画等耗时的传输和渲染过程而无法正常显示。于是,AMP项目选择避开动态显示的部分,把目标集中到了静态内容。为了大大提高网页性能,AMP项目严格限制了HTML中所能够使用的内容。在现有网页技术的基础上,该项目只使用了HTML中的一部分子集,使得AMP HTML文档(也就是网页)可以速度很快的运行在所有的现代浏览器中。

目前,AMP项目仍然处于起步阶段。Google在GitHub分享了项目的代码和文档,并在项目的官方网站讲解了其工作原理。首先,为了保证网页性能,AMP的HTML文档不能包含任何作者自编的JavaScript或者第三方的脚本。为了提供与之前类似的用户感受,AMP利用了网页组件自定义元素。通过提供统一的接口,AMP的HTML文档能够在性能和展示内容上得以保证。

其次,AMP针对广告和分析进行了专门处理。作为网站收入的主要来源,广告和分析是网页中不可避免的元素。但是,现在的广告和分析通常会插入复杂的内容,大大影响了网页加载的速度。针对网页分析,AMP HTML允许不使用JavaScript的tracking pixel嵌入到到网页中。其基本思路为,通过一个统一、高性能、开源的分析库来为各种各样的分析供应商提供数据。这样,既可以保证分析工作照常进行,又保证了网页的性能。在广告方面,AMP项目仍然在探索。由于AMP HTML不允许JavaScript运行,直接的广告嵌入就无法正常进行。项目团队提出利用沙盒化的i-帧的方法。此外,AMP HTML还会在加载过程中降低广告的优先级,优先显示其他部分。

最后,AMP文档采用了预渲染技术来加速显示。其实,浏览器一直支持通过<link rel=prerender>标签进行的预渲染工作。但是,对整个网页进行预渲染需要消耗大量时间。AMP文档采用只预渲染第一屏及非计算密集型的内容的方法。这样,在很多情况下,AMP文档都可以及时显示出第一屏的内容,为更多内容的显示争取机会和时间。

为了证明AMP HTML文档的性能,Google以早期合作伙伴创建的页面为对象进行了测试。测试采用了模拟的Nexus 5设备和模拟的3G网络连接。结果表明,AMP HTML文档能够取得15%-85%的速度提升。Guardian News&Media的首席战略执行官Tony Danker表示,该项目同时追求用户体验和发布者及广告商的利益,具有非常长远的眼光。他迫切希望看到项目取得成功。Vox.com、Hearst、Twitter、The New York Times、FAZ.NET、Chartbeat以及La Stampa等的相关人士也纷纷表示非常喜欢并密切关注该项目。未来,该团队将会继续优化,进一步提升AMP文档的性能。Google也希望相关领域的个人、公司和机构能够积极参与到项目中。


感谢郭蕾对本文的审校。

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT