Page 1 of 1

最小化样式重新计算 每次更改影响页面布局的内

Posted: Wed Dec 18, 2024 8:59 am
by tanjitanji0011
为了避免这种情况,AMP 只允许异步加载 JavaScript。

此外,AMP 页面不能包含受版权保护的 JavaScript。

声明外部资源的大小
AMP 加载页面布局无需等待外部资源下载,因为它将文档布局与资源布局分开。

因此,必须在HTML代码中指定外部资源(例如 馬來西亞手機號 图像、视频等)的大小,以便AMP在下载资源之前确定每个元素的大小和位置。

仅使用内联 CSS
CSS 会阻止页面的渲染和加载,通常会增加页面的大小。

因此, AMP 页面上只允许使用内联 CSS,其最大大小不得超过 50 KB。

虽然对于非常复杂的页面来说足够大,但这个大小要求开发人员保持 CSS 代码尽可能干净。

有效加载网页字体
优化网络字体对于提高效率至关重要,因为它们的尺寸非常大。

对于具有同步Javascript文件和外部CSS的普通网页,浏览器等待很长时间才能下载网页字体。

相反,AMP 声明零 HTTP 请求,直到网络字体下载开始。

这是可能的,因为所有 JavaScript 代码都设置了异步加载,并且只允许内联 CSS。

因此,不存在阻止浏览器下载 Web 字体的 HTTP 请求。

容时,都会触发影响加载速度的样式重新计算,因为浏览器必须重新计算整个页面布局。

在 AMP 页面中,所有 DOM 读取操作都发生在所有写入操作之前。

这确保每次渲染最多有一种样式重新计算。

Image 


了解重新计算样式和布局如何影响渲染性能。

仅显示 GPU 加速的动画
仅使用 CSS 动画,因为这可确保动画通过图形处理器 (GPU) 加速。

特别是,AMP 支持的唯一动画是属性:变换和不透明度。