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 中。通过将它们限制在 iframe 中，它们无法阻止主页面执行。即使它们触发多次样式重新计算，它们微小的 iframe 也几乎没有 DOM。

执行样式重新计算和布局所需的时间受到 DOM 大小的限制，因此与重新计算页面的样式和布局相比，iframe 重新计算非常快。

CSS 会阻止所有渲染，它会阻止页面加载，并且它往往会变得臃肿。在 AMP HTML 页面中，只允许内联样式。与大多数网页相比，这会从关键渲染路径中移除 1 个或更多 HTTP 请求。

此外，内联样式表的最大大小为 50 千字节。虽然此大小对于非常复杂的页面来说足够大，但它仍然要求页面作者养成良好的 CSS 习惯。

网络字体非常大，因此网络字体优化对于性能至关重要。在具有几个同步脚本和几个外部样式表的典型页面上，浏览器会一直等待开始下载这些巨大的字体，直到所有这些都发生。

AMP 系统声明零个 HTTP 请求，直到字体开始下载。这只有可能，因为 AMP 中的所有 JS 都有 async 属性，并且只允许内联样式表；没有 HTTP 请求阻止浏览器下载字体。

每次测量某些内容时，它都会触发样式重新计算，这很昂贵，因为浏览器必须布局整个页面。在 AMP 页面中，所有 DOM 读取都会在所有写入之前首先发生。这确保每帧最多重新计算一次样式。

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

获得快速优化的唯一方法是在 GPU 上运行它们。GPU 了解图层，它知道如何在这些图层上执行某些操作，它可以移动它们，可以淡化它们，但它无法更新页面布局；它会将该任务交给浏览器，而这并不好。

与动画相关的 CSS 的规则确保动画可以 GPU 加速。具体而言，AMP 仅允许对变换和不透明度进行动画和过渡，以便不需要页面布局。了解有关使用变换和不透明度进行动画更改的更多信息。

AMP 控制所有资源下载：它优先加载资源，仅加载所需内容，并预取延迟加载的资源。

当 AMP 下载资源时，它会优化下载，以便当前最重要的资源首先下载。仅在用户可能看到它们、在视窗上方或用户可能快速滚动到它们时，才会下载图像和广告。

AMP 还会预取延迟加载的资源。资源尽可能晚加载，但尽可能早预取。这样，加载速度非常快，但仅在向用户实际显示资源时才使用 CPU。

大量使用新的 preconnect API，以确保在进行 HTTP 请求时尽可能快。有了它，可以在用户明确表示他们希望导航到页面之前渲染页面；当用户实际选择页面时，页面可能已经可用，从而实现即时加载。

虽然预渲染可以应用于所有网络内容，但它也会消耗大量带宽和 CPU。AMP 经过优化，以减少这两个因素。预渲染仅下载视窗上方的资源，并且预渲染不会渲染可能在 CPU 方面很昂贵的资源。

当 AMP 文档为即时加载预渲染时，实际上仅下载视窗上方的资源。当 AMP 文档为即时加载预渲染时，不会下载可能使用大量 CPU 的资源（如第三方 iframe）。