当前位置：Gxlcms > html代码 > 网页加速特技之AMP_html/css_WEB-ITnose

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

时间：2021-07-01 10:21:17 帮助过：20人阅读

据统计，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

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

AMP 禁用部分 HTML 标签如、

、等。

部分 HTML 标签必须使用 AMP 自定义的组件来替换如、

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

一个简单的 AMP HTML 示例：

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