快速了解 AMP (Accelerated Mobile Pages)

快速了解AMP

在 Google I/O 2018 活动中，有几个议程提到了 AMP，The Accelerated Mobile Pages，从字面意思看感觉是一种移动端页面的加速技术。了解过以后个人感觉是把平常一些性能优化手段变成强制要求，通过组件使用来限制和指引开发的方式。

下面是官网给的AMP定义：

AMP is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.

划重点: AMP 网页采用 3 大核心组件构建而成

• AMP HTML
  AMP HTML 是为确保可靠性能而具有某些限制的 HTML。

• AMP JS
  AMP JS 库可确保快速渲染 AMP HTML 网页。

• AMP Cache
  Google AMP Cache 可用于提供缓存的 AMP HTML 网页。

划重点: AMP 网页的7大设计原则

设计原则可以指导开发人员设计和开发一致的AMP网页，怕翻译不准确，附上原文

• 用户体验 > 开发者体检 > 实现难度

  User Experience > Developer Experience > Ease of Implementation.

• 不为未来可能会更会快的浏览器去设计（应该为当代的浏览器去设计）

  Don’t design for a hypothetical faster future browser.

• 不会中断网页访问：当AMP出现意外问题，不影响网页访问。如AMP缓存出现问题，可以优雅降级到原始网页。

  Don’t break the web.

• 在正确的层次解决问题：例如，在客户端和服务端里选择最合适的一端来集成

  Solve problems on the right layer.

• 只做真正可以加速的事情

  Only do things if they can be made fast.

• 优先考虑改善用户体验的事情 - 但在需要的时候妥协

  Prioritise things that improve the user experience – but compromise when needed.

• 没有白名单：不会为了安全或性能去对指定域名做特殊处理

  No whitelists.

MIP

MIP是国内类似AMP的技术，可以在百度看到效果

在移动端百度搜索MIP，并点击mip官网链接，切换时很快，伴有动画效果，重点是页面有没发生跳转，网址也不是原始网站的URL，而是百度的缓存地址URL。网页被缓存到CDN。看开发者工具里Network里的变化。整个操作体验很好，很流畅，这也就是AMP的优点。

AMP 官网：https://www.ampproject.org/zh_cn/
Google I/O: https://events.google.com/io/
MIP 官网： https://www.mipengine.org/