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 读者交流群）。