AMP 如何工作
以下结合的优化是 AMP 页面速度如此之快以至于它们看起来可以立即加载的原因。总共有 7 个原因 - 但如果这仍然太多而无法阅读，只需观看解释视频
异步执行所有 AMP JavaScript
JavaScript 功能强大，它可以修改页面的几乎所有方面，但它也可能会阻止 DOM 构建并延迟页面渲染（另请参阅 使用 JavaScript 添加交互性）。为了防止 JavaScript 延迟页面渲染，AMP 仅允许异步 JavaScript。
AMP 组件可能在底层使用 JavaScript，但它们经过精心设计，以确保它们不会导致性能下降。
虽然自定义 JS 允许在 amp-script 中使用，并且第三方 JS 允许在 iframe 中使用，但它不能阻止渲染。例如，如果第三方 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>
将所有第三方 JavaScript 保留在关键路径之外
第三方 JS 喜欢使用同步 JS 加载。他们也喜欢 document.write 更多同步脚本。例如，如果您的页面上有五个广告，并且每个广告都会导致三个同步加载，每个加载的延迟连接为 1 秒，那么您仅用于 JS 加载的加载时间为 15 秒。
AMP 页面允许第三方 JavaScript，但仅限于沙盒 iframe 中。通过将它们限制在 iframe 中，它们无法阻止主页面的执行。即使它们触发多个样式重新计算，它们的小 iframe 也只有非常少的 DOM。
执行样式重新计算和布局所需的时间受 DOM 大小的限制，因此与重新计算页面样式和布局相比，iframe 重新计算非常快。
所有 CSS 必须内联且大小有界
CSS 会阻止所有渲染，阻止页面加载，并且往往会变得臃肿。在 AMP HTML 页面中，仅允许内联样式。与大多数网页相比，这从关键渲染路径中删除了 1 个或多个 HTTP 请求。
此外，内联样式表的最大大小为 50 KB。虽然此大小对于非常复杂的页面来说已经足够大，但它仍然要求页面作者实践良好的 CSS 清理。
字体触发必须高效
Web 字体非常大，因此 Web 字体优化 对于性能至关重要。在具有一些同步脚本和一些外部样式表的典型页面上，浏览器会等待并等待开始下载这些巨大的字体，直到所有这些发生。
AMP 系统在字体开始下载之前声明零 HTTP 请求。这之所以可能，只是因为 AMP 中的所有 JS 都具有 async 属性，并且只允许内联样式表；没有 HTTP 请求阻止浏览器下载字体。
最大限度地减少样式重新计算
每次您测量某些内容时，都会触发代价高昂的样式重新计算，因为浏览器必须布局整个页面。在 AMP 页面中，所有 DOM 读取都发生在所有写入之前。这确保每个帧最多只对样式进行一次重新计算。
详细了解样式和布局重新计算对 渲染性能的影响。
仅运行 GPU 加速的动画
进行快速优化的唯一方法是在 GPU 上运行它们。GPU 了解图层，它知道如何在这些图层上执行某些操作，它可以移动它们，可以淡化它们，但它无法更新页面布局；它会将该任务移交给浏览器，这不好。
与动画相关的 CSS 规则确保动画可以进行 GPU 加速。具体来说，AMP 仅允许在 transform 和 opacity 上进行动画和过渡，因此不需要页面布局。详细了解 使用 transform 和 opacity 进行动画更改。
优先加载资源
AMP 控制所有资源下载：它优先加载资源，仅加载所需资源，并预取延迟加载的资源。
当 AMP 下载资源时，它会优化下载，以便首先下载当前最重要的资源。只有当用户可能会看到、在首屏上方或用户可能会快速滚动到它们时，才会下载图像和广告。
AMP 还会预取延迟加载的资源。资源会尽可能晚地加载，但会尽可能早地预取。这样，事情加载速度非常快，但只有在实际向用户显示资源时才会使用 CPU。
立即加载页面
新的 preconnect API 被大量使用，以确保 HTTP 请求在发出时尽可能快。有了这个，可以在用户明确表示他们想要导航到页面之前呈现页面；当用户实际选择它时，该页面可能已经可用，从而实现即时加载。
虽然预渲染可以应用于所有 Web 内容，但它也可能会占用大量带宽和 CPU。AMP 经过优化以减少这两个因素。预渲染仅下载首屏上方的资源，并且预渲染不会渲染在 CPU 方面可能代价高昂的内容。
当 AMP 文档被预渲染以进行即时加载时，实际上只会下载首屏上方的资源。当 AMP 文档被预渲染以进行即时加载时，不会下载可能占用大量 CPU 的资源（如第三方 iframe）。