`AMP`（`Accelerated Mobile Pages`）的`技术`栈：其在`移动端`的`性能`优化原理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

AMP：加速移动网页的技术栈与性能优化原理

大家好！今天我们来深入探讨 AMP (Accelerated Mobile Pages) 技术栈，以及它如何在移动端实现卓越的性能优化。我们将从 AMP 的核心概念入手，逐步剖析其技术构成，并通过具体的代码示例来展示其优化策略。

1. AMP 的核心理念：约束与控制

AMP 的核心理念可以用两个词概括：约束和控制。

约束： AMP 对 HTML、CSS 和 JavaScript 的使用施加了严格的限制。这些限制旨在消除常见的性能瓶颈，比如阻塞渲染的 JavaScript、过大的 CSS 文件以及复杂的布局计算。
控制： AMP 明确控制资源的加载和渲染过程。通过预加载关键资源、延迟加载非关键资源、以及优先渲染首屏内容，AMP 保证了快速的页面加载速度和流畅的用户体验。

2. AMP 的技术栈构成

AMP 的技术栈主要由以下三个关键组件构成：

AMP HTML: 一种受限制的 HTML 子集，遵循特定的规则和约束。
AMP JS: AMP 项目提供的 JavaScript 库，负责管理资源加载、异步渲染以及强制执行 AMP HTML 的规则。
AMP Cache: 一种可选的代理缓存，由 Google 和其他平台提供，用于缓存 AMP 页面，进一步加速页面加载速度。

3. AMP HTML：规则与约束

AMP HTML 并非完全抛弃了标准 HTML，而是对其进行了严格的限制和扩展。主要的约束包括：

强制使用 AMP Boilerplate: 每个 AMP 页面都必须包含一段标准的 HTML 样板代码，用于隐藏页面直到 AMP JS 库加载完成。

<!doctype html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="YOUR_CANONICAL_URL">
    <title>Your AMP Page</title>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
    <h1>Hello, AMP!</h1>
</body>
</html>

仅允许异步加载 JavaScript: 禁止使用自定义的 JavaScript 代码，只允许使用 AMP 提供的组件。所有 JavaScript 必须使用 async 属性异步加载。
限制 CSS 的使用: CSS 必须内联在 <head> 标签中，且总大小不能超过 75KB。禁止使用 !important 规则。
禁止使用 document.write: document.write 会阻塞页面的解析，因此被禁止使用。
强制指定图片尺寸: 所有图片必须通过 width 和 height 属性明确指定尺寸，以避免页面布局的重排。
```
<amp-img src="image.jpg" alt="An example image" width="640" height="480" layout="responsive"></amp-img>
```
使用 AMP 组件: AMP 提供了一系列预构建的组件，例如 amp-img (用于图片)、amp-video (用于视频)、amp-carousel (用于轮播图) 等，这些组件都经过优化，可以高效地渲染和加载内容。

4. AMP JS：核心库与组件管理

AMP JS 库是 AMP 页面的核心，它负责：

强制执行 AMP HTML 规则: AMP JS 验证页面是否符合 AMP HTML 的规范，如果发现错误，会输出到控制台。
管理资源加载: AMP JS 负责预加载关键资源、延迟加载非关键资源，并优化资源的加载顺序，以提高页面加载速度。
提供 AMP 组件: AMP JS 提供了各种 AMP 组件的实现，这些组件都经过优化，可以高效地渲染和加载内容。
处理布局: AMP JS 负责根据 layout 属性计算组件的布局，并确保页面在不同设备上都能正确显示。

5. AMP Cache：CDN 加速

AMP Cache 是一个可选的代理缓存，由 Google 和其他平台提供。当用户通过 Google 搜索等平台访问 AMP 页面时，这些页面通常会从 AMP Cache 中加载。AMP Cache 的优势在于：

CDN 加速: AMP Cache 使用 CDN 技术，将页面缓存在全球各地的服务器上，从而减少了用户与服务器之间的距离，提高了页面加载速度。
自动优化: AMP Cache 会自动优化 AMP 页面，例如压缩图片、删除不必要的空格等，以进一步提高页面加载速度。
HTTPS 支持: AMP Cache 强制使用 HTTPS，保证了页面的安全性。

6. AMP 的性能优化原理：深度剖析

AMP 通过多种技术手段来实现性能优化。以下是一些关键的优化原理：

预渲染： AMP 允许平台（如 Google 搜索）在用户点击链接之前预渲染 AMP 页面。这意味着当用户点击链接时，页面已经准备好显示，从而实现了瞬时加载。
优先级加载： AMP JS 库会根据资源的重要性，对其进行优先级排序。关键资源（例如首屏图片）会被优先加载，而非关键资源（例如隐藏的图片）会被延迟加载。
布局优化： AMP 要求开发者明确指定图片的尺寸，这避免了页面布局的重排，提高了渲染性能。
资源大小限制： AMP 限制了 CSS 的大小，并禁止使用自定义的 JavaScript 代码。这避免了页面因加载过大的资源而变得缓慢。
避免阻塞渲染的 JavaScript： AMP 禁止使用同步 JavaScript 代码，所有 JavaScript 都必须异步加载。这确保了页面可以尽快渲染，而不会被 JavaScript 代码阻塞。
字体优化： AMP 建议使用 Web Fonts，并使用 font-display: swap; 来避免字体加载造成的阻塞。
HTTP/2 支持： AMP Cache 使用 HTTP/2 协议，该协议允许多个资源并行加载，从而提高了页面加载速度。

7. 代码示例：AMP 组件的使用

以下是一些常用的 AMP 组件的代码示例：

amp-img (图片):
```
<amp-img src="image.jpg" alt="An example image" width="640" height="480" layout="responsive"></amp-img>
```
layout="responsive" 表示图片会根据容器的宽度自动缩放，同时保持其原始的宽高比。

amp-video (视频):

<amp-video width="640" height="360" controls loop>
    <source src="video.mp4" type="video/mp4">
    <p>Your browser doesn't support HTML5 video.</p>
</amp-video>

controls 属性表示显示视频播放控件，loop 属性表示视频循环播放。

amp-carousel (轮播图):

<amp-carousel width="480" height="270" layout="responsive" type="slides">
    <amp-img src="image1.jpg" width="480" height="270" alt="Slide 1"></amp-img>
    <amp-img src="image2.jpg" width="480" height="270" alt="Slide 2"></amp-img>
    <amp-img src="image3.jpg" width="480" height="270" alt="Slide 3"></amp-img>
</amp-carousel>

type="slides" 表示轮播图使用滑动效果。

amp-analytics (分析):

<amp-analytics type="googleanalytics">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
</amp-analytics>

type="googleanalytics" 表示使用 Google Analytics 进行分析。 account 需要替换成你自己的 Google Analytics 账号。

8. AMP 的局限性与适用场景

虽然 AMP 具有很多优点，但也存在一些局限性：

限制性： AMP 对 HTML、CSS 和 JavaScript 的限制较为严格，这可能会限制开发者的灵活性。
学习曲线： 开发者需要学习 AMP HTML 的规范和 AMP 组件的使用方法。
不适用于所有类型的网站： AMP 最适合于静态内容，例如新闻文章、博客文章和产品页面。对于需要大量交互和动态内容的网站，AMP 可能不是最佳选择。

总的来说，AMP 适用于那些追求极致性能和快速加载速度的移动页面，特别是内容驱动型的网站。

9. 使用 AMP 的步骤

创建 AMP HTML 页面： 根据 AMP HTML 的规范，创建一个符合规范的 HTML 页面。
验证 AMP 页面： 使用 AMP 验证器来验证页面是否符合 AMP HTML 的规范。可以使用浏览器的 AMP 验证器插件，或者在线 AMP 验证工具。
链接 AMP 页面： 在非 AMP 页面中，使用 <link rel="amphtml" href="URL_OF_AMP_VERSION"> 标签链接到对应的 AMP 页面。
提交到搜索引擎： 将 AMP 页面提交到搜索引擎，以便搜索引擎可以发现和索引你的 AMP 页面。

10. AMP 的未来发展

AMP 正在不断发展和演进。未来的 AMP 可能会更加灵活，并支持更多的功能。例如，AMP 正在探索如何更好地支持动态内容和交互式体验。

11. 表格总结 AMP 关键点

特性	描述	优势	局限性
AMP HTML	受限制的 HTML 子集，遵循特定的规则和约束。	确保快速加载和渲染，避免性能瓶颈。	限制了 HTML 的灵活性，需要学习新的规范。
AMP JS	AMP 项目提供的 JavaScript 库，负责管理资源加载、异步渲染以及强制执行 AMP HTML 的规则。	优化资源加载，提供 AMP 组件，提高渲染性能。	禁止使用自定义 JavaScript 代码，限制了交互性。
AMP Cache	可选的代理缓存，由 Google 和其他平台提供，用于缓存 AMP 页面，进一步加速页面加载速度。	CDN 加速，自动优化，HTTPS 支持。	需要依赖第三方平台，可能存在隐私问题。
性能优化原理	预渲染，优先级加载，布局优化，资源大小限制，避免阻塞渲染的 JavaScript，字体优化，HTTP/2 支持。	显著提升页面加载速度和用户体验。	需要遵循 AMP 的规范，可能会增加开发成本。
适用场景	静态内容，新闻文章，博客文章，产品页面。	特别适合内容驱动型的网站，可以显著提高移动端的访问速度。	不适用于需要大量交互和动态内容的网站。
学习曲线	需要学习 AMP HTML 的规范和 AMP 组件的使用方法。	提供了详细的文档和示例，可以快速上手。	需要花费时间学习新的技术。

12. 快速加载，流畅体验

AMP 通过约束和控制，实现了移动网页的快速加载和流畅体验。虽然存在一些局限性，但对于追求极致性能的网站来说，AMP 仍然是一个非常有价值的选择。

AMP：加速移动网页的技术栈与性能优化原理

发表回复 取消回复

发表回复取消回复