转载

AMP HTML助力移动Web提速

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读者交流群 AMP HTML助力移动Web提速）。