AMP 工作原理

组合以下优化是 AMP 网页快到可以瞬时加载的原因。总共有 7 个原因，但如果您觉得阅读量仍然过大，只需观看说明视频：

异步执行所有 AMP JavaScript

JavaScript 功能强大，几乎可以修改网页的各个方面，不过，它也会阻碍 DOM 的构建，延缓网页呈现（另请参见使用 JavaScript 添加交互）。为了防止 JavaScript 延缓网页呈现，AMP 仅允许异步 JavaScript。

AMP 组件内部可能会有 JavaScript，但这些组件经过精心设计，可以确保不会导致性能下降。

虽然 amp-script 中允许使用自定义 JS，并且 iframe 中允许使用第三方 JS，但这不会阻塞呈现。例如，即使第三方 JS 使用严重影响性能的 document.write API，也不会阻塞主网页呈现。

图片、广告或 iframe 等外部资源必须在 HTML 中声明其大小，以便 AMP 可以在资源下载前确定每个元素的大小和位置。AMP 不必等待所有资源都下载完成就可以直接加载网页布局。

AMP 将文档布局与资源布局脱钩。布局整个文档（包括字体）只需要一个 HTTP 请求。由于 AMP 经过优化，可以在浏览器中避免会消耗大量资源的样式重新计算和布局，因此资源加载时不会存在任何重新布局。

AMP 不会让扩展机制阻塞网页呈现。AMP 支持灯箱、Instagram 嵌入代码、推文等对象的扩展。尽管这些对象需要额外的 HTTP 请求，但这些请求不会阻塞网页布局和呈现。

使用自定义脚本的任何网页都必须告诉 AMP 系统其最终会有自定义标记。例如，amp-iframe 脚本会告诉系统将有一个 amp-iframe 标记。AMP 甚至会在了解 iframe 框将要包含的内容前先行创建此框：

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

第三方 JS 喜欢使用同步 JS 加载，也喜欢 document.write 更多同步脚本。例如，如果网页上有五个广告，每个广告都在 1 秒的延时连接下进行三次同步加载，那么仅仅加载 JS 就需要 15 秒。

AMP 网页允许第三方 JavaScript，不过仅限在沙盒环境下的 iframe 中。将这些 JS 限制在 iframe 中后，它们就不会阻塞主页面的执行。即使第三方 JS 触发了多次样式重新计算，它们微小的 iframe 也只有非常小的 DOM。

样式和布局重新计算所需的时间通常与 DOM 大小相关，因此，与网页的样式和布局重新计算相比，iframe 重新计算非常快。

CSS 会阻塞所有呈现和网页加载，并且往往变得臃肿。在 AMP HTML 网页中，只允许内嵌样式。与大多数网页相比，这一限制可从关键呈现路径中移除 1 个或多个 HTTP 请求。

此外，内嵌样式表的最大大小为 50 KB。虽然此大小足以实现非常复杂的网页，网页作者仍需要践行良好的 CSS 风格。

网络字体非常大，因此网络字体优化对性能至关重要。在一个具有少量同步脚本和外部样式表的典型网页上，浏览器会等待所有资源都加载完成后才开始下载这些大字体。

而 AMP 系统在字体开始下载前不会发出 HTTP 请求。之所以能做到这一点，是因为 AMP 中的所有 JS 都有异步属性，并且仅允许内嵌样式表；不存在会阻碍浏览器下载字体的 HTTP 请求。

每次衡量某些元素时，由于浏览器需要布局整个网页，系统都会触发会消耗大量资源的样式重新计算。在 AMP 网页中，所有 DOM 读取都发生在写入之前。这样可以确保每帧最多只有一次样式重新计算。

详细了解样式和布局重新计算对呈现性能的影响。

快速优化的唯一方式是在 GPU 上运行优化。GPU 了解图层，知道如何在这些图层上展示元素。GPU 可以移动、淡化图层，但无法更新网页布局。它将该任务交给浏览器执行，这并不是一种很好的做法。

动画相关 CSS 的规则确保动画可以进行 GPU 加速。具体而言，AMP 仅允许在变形和不透明度上进行动画处理和变换，因此不需要网页布局。详细了解使用 transform 和 opacity 属性更改来实现动画。

AMP 可以控制所有资源下载：它会设定资源加载的优先级、仅加载需要的内容，以及预提取具有延迟加载特性的资源。

下载资源时，AMP 会优化下载，以便优先下载当前最重要的资源。图片和广告仅在位于首屏、用户可能会查看或者快速滚动到它们时下载。

AMP 还会预提取具有延迟加载特性的资源。资源加载尽可能晚，但预提取则尽可能早。这样一来，加载速度非常快，不过只有在资源实际向用户显示时才会使用 CPU。

大量使用全新的 preconnect API，从而确保 HTTP 请求的速度尽可能快。这样，在用户明确指明想要前往某个网页之前，该网页就可以呈现完成；在用户实际选择网页之前，网页就可能已经准备就绪，进而实现瞬时加载。

虽然预呈现可以应用于所有网络内容，但也会占用大量带宽和 CPU。AMP 经过优化，可以减少这两个因素。预呈现只下载首屏资源，而不会呈现可能会占用大量 CPU 的内容。

在 AMP 文档进行预呈现以实现瞬时加载时，实际上只会下载首屏资源。在 AMP 文档进行预呈现以实现瞬时加载时，不会下载可能要使用大量 CPU 的资源（例如第三方 iframe）。