网页加速特技之 AMP_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 11:15:11

1340人浏览过

来源于php中文网

原创

据统计，40%的人会放弃使用加载时间超过3秒的网站。对于加载慢的页面我也是没耐心等待的，同类型网站那么多，为什么不选择加载速度更快体验更好的呢。为了解决网页加载慢的问题，Google联合数十家技术机构和企业等推出了移动网页加速项目（Accelerated Mobile Pages， AMP）。

据 AMP官网统计目前已有很多新闻类网站和科技类网站开始使用AMP，包括Wordpress、YouTube、Twitter、LinkedIn、BBC等。

不明觉厉，接下来让我们一起来揭开AMP神秘的面纱吧。

立即学习“前端免费学习笔记（深入）”；

一、什么是AMP?

Accelerated Mobile Pages (AMP)直译过来就是在移动设备上快速加载的网页。它是由 Google 发起的一个开源项目,主要目的是缩短静态内容的渲染时间从而有效提升网站的加载速度。

那么问题来了，AMP的加载速度到底有多快？

根据 Google 官方说明，AMP 在模拟 Nexus 5 并模拟 3G 网络的测试情况下，首屏展现速度有 15% ~ 85% 的提升。

这么NB，让我们来看看AMP到底什么鬼。。。

AMP主要由三个部分组成：

1.AMP HTML

1）.AMP HTML 规范

AMP HTML 在 HTML 的基础上加了一些使用限制，并且添加了AMP自定义的组件。

AMP 禁用部分 HTML 标签如、

、等。

部分 HTML 标签必须使用 AMP 自定义的组件来替换如网页加速特技之 AMP_html/css_WEB-ITnose 、

AMP在HTML基础上也提供一些扩展组件，如、、等，但是使用扩展组件时必须引入相应的JS文件。

一个简单的 AMP HTML 示例：

将上面的代码保存为 .html 文件，在浏览器中就可以正常运行，从这个示例可以看出，AMP HTML 的写法和HTML差不多，但是又有自己的规范要求：

DTD 必须是：；
顶层标签必须包含 AMP 属性如：，方便其他程序识别 AMP HTML；
必须在 HEAD 区域中放置标签，指定该页面普通版本的 URL；如果只有一个版本，则使用当前 URL；
必须将放置在 HEAD 区域最开始的位置；
必须在 HEAD 区域包含这个 ViewPort：
必须将 <script async src="https://cdn.ampproject.org/v0.js"></script> 作为 HEAD 区域最后的元素；
必须在 HEAD 区域包含上面示例所示的

更多 AMP HTML 相关说明，可移步 AMP HTML官方文档

2）AMP HTML 组件

自定义组件

AMP HTML 自定义5个组件： amp-ad 、 amp-embed 、 amp-img 、 amp-pixel 、 amp-video

组件直接以标签的形式进行使用，如页面中需要加载video、img 使用相应的组件即可，如下：

amp-video amp-img 组件实际是使用HTML原生

amp-ad 、 amp-embed 组件主要用于引入广告类信息，使用 iframe 的方式来实现。

扩展组件

AMP HTML的一个重要特性就是可扩展性，它提供扩展组件来实现丰富的功能。

官网目前提供的扩展有youtube视频组件、twitter组件、轮播、滚动、instagramd等等。

使用扩展组件需要在页面头部引入依赖的JS文件，如使用twitter组件：

twitter组件的显示效果如图：

扩展组件使用iframe来实现，定义扩展组件必须严格遵循AMP的 3p contribution guidelines （为了保证性能，定义扩展组件的要求非常多）。

2.AMP JS

AMP JS 是 AMP 技术的核心。

AMP JS 负责协调资源的加载时机和优先级，让外部资源按不同顺序加载使得页面的主要内容优先加载；AMP JS 的resources模块根据元素优先级（amp-img的优先级高于amp-ad的优先级）、操作优先级、可视优先级给资源评分，根据评分调整资源加载优先级。

它还负责页面的性能优化，例如在资源加载完成前对页面元素布局预处理，禁用慢的CSS选择器，对 iframe 进行沙盒处理，提供对自定义元素的支持。

AMP JS 也负责提供验证器等调试功能，在URL最后加 #development=1 就会开启调试模式，AMP会自动加载验证器，并在控制台显示本页不符合AMP规范的报错信息。

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

下载

3.Google AMP Cache

Google AMP Cache是一个基于代理机制的内容分发网络（CDN），它会分发所有合格的AMP文件，它会抓取AMP页面并进行缓存，自动提升页面的性能。使用Google AMP Cache，页面、JS文件、图片等都是从同一个源获取，并且使用HTTP2.0来优化性能。

这个缓存机制还带有的验证系统，以确保网页不受外部资源的限制，能随时随地正常运行。它能自动验证网页是否符合AMP HTML的规范。

二、AMP HTML 和 HTML 比较

简单了解了 AMP 的相关规范，我们来验证下 AMP 是不是如传说中那么NB。。。

分别用 AMP HTML 和 HTML 写了两个一样的页面，页面中有33个HTTP请求，包含一个video、28张图片等资源。不多说，直接上图：

3G（1Mbps 40ms RTT）网络状态下，HTML页面：

3G（1Mbps 40ms RTT）网络状态下，AMP页面：

从上图对比可看出，3G网络下，AMP页面的 onload 时间比HTML页面快50%以上，当然这是在HTML页面图片没做lazy-load优化的情况下。

3G（1Mbps 40ms RTT）网络状态下，HTML页面：

3G（1Mbps 40ms RTT）网络状态下，AMP页面：

从上面两图对比可看出，3G网络下AMP页面的渲染时间明显快于HTML页面。

AMP页面优化资源加载，自动对资源做延迟加载，首屏完整展现的速度明显快于HTML页面。

上面的测试页面是静态内容页面，不涉及到服务器数据拉取和复杂的页面交互，所以有一定的局限性。要深入了解AMP页面和HTML的差异，还需要更多的测试。

三、AMP如何提升性能？

在静态内容页面测试数据中，AMP页面的加载速度确实更快，那么AMP提升页面加载速度的秘诀是什么捏，我们一起来看看。

1.只允许异步加载script

HTML 解析器遇到 script 标签，它会暂停构建 DOM，并移交控制权给 JavaScript 引擎；等 JavaScript 引擎执行完毕，浏览器从中断的地方恢复 DOM 构建。执行内联脚本会阻塞 DOM 构建，也就延缓了首次渲染。为了减少JS对页面渲染的延迟，AMP不允许直接使用内联脚本，只允许异步加载JS。

AMP页面不允许直接包含任何内联JS，页面交互可在AMP组件中处理，AMP组件是经过精心设计的保证不会影响页面性能。第三方JS只允许在 iframe 中使用，这样就不会阻塞主页面的渲染。