网页加速特技之AMP_html/css

DTD 必须是： ；

顶层标签必须包含 AMP 属性如： ，方便其他程序识别 AMP HTML；

必须在 HEAD 区域中放置 标签，指定该页面普通版本的 URL；如果只有一个版本，则使用当前 URL；

必须将 放置在 HEAD 区域最开始的位置；

必须在 HEAD 区域包含这个 ViewPort：

必须将

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 中使用，这样就不会阻塞主页面的渲染。

2.静态资源指定宽高

扩展资源如图片、iframe等必须在标签中指定他们的宽高，AMP可以在这些资源下载完成以前就决定每一个元素的宽高和位置，AMP在所有资源加载完之前就开始页面布局。

AMP把文档和资源分开布局，避免样式重新计算和布局，资源加载完成后不会重新布局。

3.避免扩展机制影响渲染

AMP支持一些扩展组件如：｀｀,｀｀,使用这些组件需要加载相应的JS文件，会增加额外的HTTP请求，但是这些请求不会阻塞页面的布局和渲染。

任何页面用原生的script标签，必须要通知AMP系统，即在｀script｀中加 ｀custome-element｀属性。

4.关键路径禁用第三方JS

AMP 只能在 sandboxed iframe 中加载第三方 JS。把他们当做 iframes，因此不会阻塞主页面。如果第三方JS触发多个样式重计算，iframe中也只有很少一部分DOM，重新布局不会消耗很多性能。

5.CSS必须内联，内联样式表最大50kb

CSS会阻塞页面渲染，阻塞页面加载。在AMP页面中，只允许内联样式，这会在关键渲染路径上比一般的页面减少1或多个HTTP请求。

CSS使用内联，内联样式表(inline stylesheet)最大不超过50kb。

6.字体必须有效触发

Web字体非常大,因此Web字体对性能优化是至关重要的。在一个普通的页面中有一些script和样式表，浏览器需要等待这些资源加载完成后开始加载这些大的字体资源。

在AMP中所有的JS都是异步加载而且只允许使用内联样式表，所以没有HTTP请求阻塞浏览器去加载字体资源。

7.减小样式重计算

修改元素样式时，会触发样式重新计算，这是非常高的性能消耗，因为浏览器需要重新布局整个页面。AMP页面在进行DOM写操作之前会先读取DOM，这样能确保样式重计算时一次最精确到每一帧的样式。

8.只运行经GPU加速的动画

AMP网页上的动画只允许变形和透明度调整，从而节省重新布局页面的时间。

9.优化资源加载次序

AMP控制所有的资源加载，优先加载必要的资源（如首屏需要展示的资源），预加载可以延迟加载的资源。

AMP加载资源时，最重要的资源最先被加载，images 和 ads 在他们可能被用户看到的情况下才加载，或者在用户快速滚动到他们的位置时加载。

10.使用 preconnect API

新的preconnect API用来确保HTTP请求尽可能快。页面可以在用户看到之前就渲染完成。通过即时加载，页面可能在用户选择它的时候就已经是可用的了。

虽然预渲染可以让页面更快，但是也会消耗大量的带宽和CPU。AMP对减少这两个因素进行了优化。预渲染只会下载被遮住的部分资源，而且不会渲染很耗CPU的内容。

四、总结与思考

AMP亮点：

1. AMP有利于网站SEO，在网站内容差不多的情况下，使用AMP的网站在 Google 搜索中可以获得更靠前的排名。

2. 延迟加载、按需加载使得首屏展现更快。

3. 尤其对内容型页面性能优化明显。

AMP限制：

1. 网络限制，如AMP JS、AMP Components 必须从 cdn.ampproject.org 加载；Web Font 必须从 fonts.googleapis.com 加载，这些源网站在国内访问速度很慢甚至直接被墙。

2. 引入第三方资源受限。

3. 需要遵循严格的代码规范指引。

AMP设计的初衷就是针对静态内容，用来加速新闻类网站，所以对其他交互较多的网站可能并不适用。但是，AMP 控制资源加载、处理响应式元素避免页面抖动、主动释放资源等策略可以作为我们对移动 Web 优化的参考。

参考资料：

1. https://www.ampproject.org/docs/get_started/about-amp.html

2. https://imququ.com/post/amp-project.html

3. https://asknoypi.com/accelerated-mobile-pages-validator/#validator

4.

https://github.com/ampproject