AMP网页加速的原理(运用amp页面加速有优势吗)

运用amp页面加速有优势,可以让页面更快被加载,跟百度的MIP是同样的道理。

AMP网页加速的原理 (运用amp页面加速有优势吗)

AMP网页加速的原理包括:

异步执行所有 AMP JavaScript

JavaScript 很强大,它几乎可以修改页面的每个方面,但它也可以阻止 DOM 构建和延迟页面呈现(另请参阅添加与 JavaScript 的交互性)。为了防止 JavaScript 延迟页面呈现,AMP 仅允许异步 JavaScript。

AMP 组件的底层可能包含 JavaScript,但它们经过精心设计以确保它们不会导致性能下降。

虽然在 中允许自定义 JS amp-script,并且在 iframe 中允许使用第三方 JS,但它不能阻止渲染。例如,如果第三方 JS 使用super-bad-for-performance document.writeAPI,它不会阻止渲染主页面。

静态调整所有资源的大小

图片、广告或 iframe 等外部资源必须在 HTML 中说明其大小,以便 AMP 在下载资源之前确定每个元素的大小和位置。AMP 无需等待任何资源下载即可加载页面布局。

AMP 将文档布局与资源布局分离。只需要一个 HTTP 请求来布局整个文档 ( +fonts )。由于 AMP 经过优化以避免在浏览器中进行昂贵的样式重新计算和布局,因此在资源加载时不会有任何重新布局。

不要让扩展机制阻塞渲染

AMP 不会让扩展机制阻止页面呈现。AMP 支持诸如灯箱、instagram 嵌入、推文等的扩展。虽然这些需要额外的 HTTP 请求,但这些请求不会阻止页面布局和呈现。

任何使用自定义脚本的页面都必须告诉 AMP 系统它最终会有一个自定义标签。例如,amp-iframe脚本告诉系统会有一个amp-iframe标签。

将所有第三方 JavaScript 排除在关键路径之外

第三方 JS 喜欢使用同步 JS 加载。他们还喜欢document.write更多地同步脚本。例如,如果您的网页上有五个广告,每个广告都会导致三个同步加载,每个都有 1 秒的延迟连接,那么您在 15 秒的加载时间内仅用于 JS 加载。

AMP 页面允许第三方 JavaScript,但仅限于沙盒 iframe。通过将它们限制为 iframe,它们不能阻止主页面的执行。即使它们触发了多次样式重新计算,它们的小 iframe 也只有很少的 DOM。

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

所有 CSS 都必须是内联的和大小限制的

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

此外,内联样式表的最大大小为 50 KB。虽然这个大小对于非常复杂的页面来说已经足够大了,但它仍然需要页面作者练习良好的 CSS 卫生。

字体触发必须高效

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

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

最小化样式重新计算

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

​仅运行 GPU 加速的动画

进行快速优化的唯一方法是在 GPU 上运行它们。GPU知道层,它知道如何在这些层上执行一些事情,它可以移动它们,它可以淡化它们,但它不能更新页面布局;它会将任务交给浏览器,这不好。

动画相关 CSS 的规则确保动画可以被 GPU 加速。具体来说,AMP 仅允许在变换和不透明度上进行动画和过渡,因此不需要页面布局。

优先加载资源

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

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

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

瞬间加载页面

新的预连接 API被大量使用以确保 HTTP 请求在发出时尽可能快。有了这个,页面可以在用户明确表示他们想要导航到它之前呈现;当用户实际选择它时,该页面可能已经可用,从而导致即时加载。

虽然预渲染可以应用于所有 Web 内容,但它也会占用大量带宽和 CPU。AMP 经过优化以减少这两个因素。预渲染仅下载首屏资源,而预渲染不会渲染在 CPU 方面可能很昂贵的东西。

当 AMP 文档被预渲染以供即时加载时,实际上只会下载首屏资源。当 AMP 文档为即时加载进行预渲染时,可能会占用大量 CPU 的资源(如第三方 iframe)不会被下载。

AMP网页加速的原理(运用amp页面加速有优势吗)

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注