AMP

AMP(Accelerated Mobile Pages),加速移动网络网页

AMP是什么

通过实行一套合理的规则,优化你的网页主体内容。本质是代码减负+缓存预加载,严格控制网页装载内容大小和顺序,达到明显提升用户体验的技术。

示例 - AMP 官网

AMP的组成

AMP包括三个部分:

  1. AMP HTML: 新定义了一套HTML标签,如amp-img, amp-video。使用这些tag可以确保加载的顺滑。同时amp也负责管理资源何时加载,避免不必要的流量。
  2. AMP Runtime: 完全由js实现,实现了所有的AMP性能优化实践。其中最大的优化就是保证外部所有资源都是异步装载,另外还包括Sandbox处理iFrame的模块,资源装载的同时预先计算出每一个元素的位置和大小;禁用慢的CSS样式;
  3. Google AMP Cache: 提供第三方缓存,为了推动AMP,谷歌提供免费的全球CDN服务,可以缓存图片,静态文件等,使用HTTP2.0协议保证缓存的高效率。从Google的搜索结果里进入AMP网页就可以做到预加载甚至预渲染,从来带来极速体验。Google 聲稱 AMP 的頁面在搜索結果里排名會更靠前。

此外, AMP validator 是一个校验器。为了确保网页能够达到所要求的极速,AMP对网页里能使用的东西做了严格的限制。比如不允许使用自己的JS,不允许外部加载CSS。校验器是为了帮助你检查你的网页是否达到了这些要求。

AMP validator校验示例:
通过: https://www.ampproject.org/docs/
有问题(先打开):https://tvvocold.coding.me/amplify/

代码示例

缺点

  1. AMP不支持touch事件,影响交互体验
  2. 只能使用AMP提供的组件,不适合开发复杂的交互。

快速生成AMP

  1. hexo的AMP生成器: https://github.com/tea3/hexo-generator-amp
    例子:https://zhuanlan.zhihu.com/p/29312669
  2. amp-generator: https://github.com/mushishi78/amp-generator

相关学习资料

  1. 官网:https://www.ampproject.org/zh_cn/
  2. 官网示例:https://ampbyexample.com/
  3. AMP vs MIP: https://mp.weixin.qq.com/s/zMxmqIx0MSBmAyy_6eauPghttps://mp.weixin.qq.com/s/zMxmqIx0MSBmAyy_6eauPg)
  4. PWAMP: https://ampbyexample.com/
分享到:
0%