避免非合成动画问题

您是否曾经点击过某个网站，却发现它在滚动时卡顿和滞后？

令人沮丧，不是吗？

好吧，如果我们告诉您这些障碍背后的秘密在于所谓的非合成动画呢？

这些动画不能被浏览器有效地处理，给计算机的主处理器带来额外的负载并导致性能问题。

但别担心，有办法解决这个问题。

在本博客中，我们将讨论非合成动画以及如何修复它们。 我们将指导您完成简单的步骤来平滑那些不稳定的动画，使您的网站不仅速度更快，而且为访问者带来愉快的导航体验。

让我们开始。

什么是非合成动画？

非合成动画是一种主要由 CPU 而不是 GPU（图形处理单元）处理的网页动画。

这种处理方法通常会导致渲染效率较低，可能会导致帧速率较慢和用户界面滞后等性能问题，尤其是在复杂的网页或功能较弱的设备上。

减少累积布局偏移 (CLS) 有望提高您的 Lighthouse 性能得分。

为什么避免非合成动画对于 Web 性能至关重要？

出于多种原因，避免非合成动画对于 Web 性能至关重要。 首先，由 CPU 处理的非合成动画可能比 GPU 处理的动画效率更低且速度更慢。

这种低效率通常会导致帧速率降低，导致动画出现断断续续或滞后，这可能会对用户体验产生负面影响。 动画更流畅的网页感觉响应更灵敏，通常交互起来也更愉快。

其次，CPU 密集型动画可能会导致系统资源紧张，尤其是在智能手机或旧电脑等功能较弱的设备上。 这种压力不仅会减慢动画本身的速度，还会减慢网页上运行的其他进程的速度。

因此，网站的整体性能可能会受到影响。 不仅如此，网站性能受损还会对数字营销的成功产生负面影响。 查看此博客“网站速度对数字营销成功的影响”以了解具体方法。

注意：这里有一些简单的技巧，可帮助您加快 WordPress 网站的速度，从而获得更好的性能。

非合成动画如何影响页面性能和浏览器渲染？

非合成动画会严重影响页面性能和浏览器渲染。 在性能方面，它们往往会减慢网站的速度。 发生这种情况是因为计算机的主处理器 (CPU) 过度工作，试图在其他任务之上处理复杂的动画。

结果，网站对用户交互（例如单击或滚动）的响应变得不那么敏感。 这在处理能力较低的设备（例如手机）上尤其明显。

关于浏览器渲染，非合成动画通常会导致屏幕上的运动不连贯且不均匀。 由于 CPU 绘制和管理这些动画的效率低于 GPU，因此动画可能会出现断断续续且不流畅的情况。

这会影响视觉吸引力，并可能使网站感觉更慢，因为浏览器很难跟上渲染这些要求较高的动画。 此外，CPU 的负担可能会导致网页加载时间更长，因为处理和显示动画元素需要更多时间。

如何检测非合成动画？

可以使用 Google PageSpeed Insights 和 GTmetrix 等性能分析工具来检测非合成动画。 以下是10 个最佳 WordPress 速度测试工具，可用于检测非合成动画。

这些工具分析网站性能的各个方面，包括动画的渲染方式。

以下是如何使用它们：

谷歌页面速度洞察

• 访问PageSpeed Insights 网站，输入您的网页 URL，然后单击“分析”。 该工具会评估您页面的移动和桌面性能。

• 分析后，PageSpeed Insights 会提供分数和详细报告。 查看报告的“诊断”部分。
• 寻找类似“避免非合成动画”的警告。 这表明您的页面具有可以优化以获得更好性能的动画。

GT矩阵

• 访问GTmetrix网站，输入您站点的 URL，然后开始测试。 GTmetrix 提供对站点加载性能的全面分析。

• 分析完成后，您将获得详细报告。 GTmetrix更关注一般性能指标，因此可能不会像PageSpeed Insights那样直接指出非合成动画。
• 查找渲染时间和 CPU 负载指标，例如“总阻塞时间”或“交互时间”。
• 虽然 GTmetrix 可能没有明确提及非合成动画，但这些区域中的高值可能表明渲染过程效率低下，这可能是由于非合成动画造成的。

此外，您还可以执行压力测试来确定网站的性能。

浏览器如何处理动画？

在处理动画时，浏览器使用计算机的两个主要部分：CPU（中央处理单元）和 GPU（图形处理单元）。 简单的动画（例如更改颜色或文本）通常由 CPU 管理。

然而，对于更复杂的动画，尤其是涉及移动或变换的动画，浏览器会尝试使用 GPU。 GPU 更适合这些任务，因为它设计用于处理图形并可以创建流畅的动画。

但是，如果动画设置不正确，浏览器可能仍会使用 CPU，从而使动画不太流畅并减慢整个网站的速度。 因此，Web 开发人员努力确保他们的动画适合 GPU，以获得最佳性能。

非合成动画的原因

为了解决非合成动画的问题，首先必须了解导致它们的原因。 以下是一些常见原因：

动画非复合属性

对非复合属性进行动画处理通常会导致非复合动画。 当动画中使用“宽度”、“高度”或“边距”等需要浏览器进行大量重新计算和重绘的属性时，就会发生这种情况。

GPU 无法有效处理这些属性，因此会给 CPU 带来更多负载，从而使动画不太流畅。

使用 JavaScript 制作动画

使用 JavaScript 制作动画也会导致问题。 基于 JavaScript 的动画，尤其是在未优化的情况下，可能会对 CPU 提出很高的要求。 虽然 JavaScript 提供了对动画的更多控制，但如果动画复杂或编码不高效，则可能会导致性能问题。

复杂的涂漆区域

动画中复杂的绘制区域可能是另一个罪魁祸首。 当您在动画过程中需要频繁重新绘制大面积区域时，会给系统带来很大的压力。 对于快速变化的复杂图形或高分辨率图像尤其如此。

低效的图形或媒体

动画中图形或媒体使用效率低下是另一个常见原因。 未针对 Web 使用进行优化的高分辨率图像、视频或图形可能会减慢动画速度。 浏览器在渲染这些重元素时会更加困难，尤其是当它们是动画序列的一部分时。

过度使用阴影和滤镜

最后，在 CSS 中过度使用阴影和滤镜可能会导致非合成动画。 这些效果虽然在视觉上很吸引人，但却是资源密集型的。 将它们应用于移动元素会显着影响性能，因为它们需要浏览器进行大量额外的处理。

注意：了解网站缓慢的其他原因。

如何避免非合成动画

非合成动画会显着影响网站的性能，导致用户体验不佳。 解决这个问题的关键在于优化动画的处理方式。

以下是解决此问题的分步方法。 在进行修复之前，我将向您展示出现此错误时网站得分的样子：

• 进行诊断时，我们发现了“避免非合成动画”错误。

以下是解决此问题所需执行的步骤。

• 转到您的 WordPress 仪表板
• 选择外观 > 自定义
• 您可以在“其他 CSS”部分下找到 CSS 代码。 此代码很可能没有使用优化的 css 动画，从而导致发生此错误。

• 如果您是开发人员，您就会知道这段代码没有经过优化。 以下是将为您的网站带来奇迹的更改。

更改 1：添加 Will-Change 属性

此更改是为了通知浏览器即将发生的动画更改，这有助于优化渲染性能。

 .my-动画{

    宽度：100px；

    高度：100px；

    背景颜色：红色；

    位置：绝对；

    will-change：变换、不透明度； /* 添加行 */

    动画：complexMove 5s线性无限；

}

/* 其余关键帧保持不变 */

变化 2：降低动画复杂度

这里，50%的比例变换已从比例(2)修改为比例(1.5)。 这降低了动画的复杂性和强度。

 .my-动画{

    /* ...其他属性... */

    will-change：变换、不透明度； /* 假设更改 1 被保留 */

    动画：complexMove 5s线性无限；

}

@关键帧复杂移动{

    /* ... 0% 和 100% 关键帧 ... */

    50% {

        变换：平移X（300％）旋转（180度）缩放（1.5）； /* 修改后的行 */

        不透明度：0.5；

    }

    /* ... 100% 关键帧 ... */

}

最终代码如下所示：

 .my-动画{

    宽度：100px；

    高度：100px；

    背景颜色：红色；

    位置：绝对；

    will-change：变换、不透明度； /* 通知浏览器即将发生的变化 */

    动画：complexMove 5s线性无限；

}

@关键帧复杂移动{

    0%, 100% {

        变换：translateX(0) 旋转(0) 缩放(1)；

        不透明度：1；

    }

    50% {

        变换：平移X（300％）旋转（180度）缩放（1.5）； /* 简化规模以降低复杂性 */

        不透明度：0.5；

    }

}

• 只需删除以前的代码并将此新代码复制并粘贴到您的附加 css 中即可。 这不会改变动画，但肯定会消除这个错误。

• 您可以看到该错误不再存在。
• 好处是，通过优化代码，您可以提高性能分数。 我们在本节开始时看到性能得分为 77。
• 这是改进后的性能得分：

因此，为了解决此错误，您必须记住一些一般提示：

技巧 1：优化 CSS 动画

不要使用高度、宽度或左侧等可能占用资源的动画属性，而是使用
转换
和
不透明度。 这些属性是 GPU 加速的，并且可以由浏览器更有效地处理。

下面是优化前后的示例代码：

优化前：

 .animate-left {

    位置：相对；

    动画：moveLeft 2s线性无限；

}

@keyframes moveLeft {

    从{左：0； }

    到{左：100px; }

}

优化后：

 .animate-left {

    位置：相对；

    动画：moveLeft 2s线性无限；

}

@keyframes moveLeft {

    来自 { 变换：translateX(0); }

    到 { 变换：translateX(100px); }

}

技巧 2：利用 CSS“Will-Change”属性的力量

使用will-change属性通知浏览器近期将发生变化的元素。 这允许浏览器为更改做好准备和优化。

以下是如何使用 will-change 属性；

• 在您的代码中插入以下行；

 will-change：变换、不透明度； /* 添加行 */

技巧 3：将动画卸载到 GPU

将动画卸载到 GPU（图形处理单元）是一种优化网页动画的技术，使动画更加流畅，并减少 CPU（中央处理单元）的负担。

这种方法在解决非合成动画问题方面特别有效，因为它利用 GPU 更有效地处理图形任务的能力。

您可以使用动画的变换和不透明度属性将动画卸载到 GPU，因为它们比宽度、高度、顶部或左侧等动画属性更有效。

您可以使用变换和不透明度属性来代替左和右。 这是一个例子：

未优化的代码：

 @keyframes moveLeft {

    从{左：0； }

    到{左：100px; }

}

优化代码：

 @keyframes moveLeft {

    来自 { 变换：translateX(0); }

    到 { 变换：translateX(100px); }

}

技巧 4：使用高效的库和工具

结合 GreenSock 动画平台 (GSAP) 或 Velocity.js 等高效库可以非常有效地解决非合成动画错误。

这些库针对性能进行了优化，提供比标准 CSS 或 JavaScript 更流畅、更高效的动画。

要合并 GSAP 库，请按照以下步骤操作；

• 找到 GSAP 的 CDN 链接。
• 打开要在其中使用 GSAP 的 HTML 文件。
• 您需要将 CDN 链接放置在 <script> 标记内。 理想情况下，该标签应放置在 <body> 部分末尾附近。

 <!DOCTYPE html>

<html>

<头>

    <标题>您的网页</标题>

    <!-- 其他头部元素 -->

</头>

<正文>

    <!-- 您的 HTML 内容位于此处 -->

    <!-- 正文末尾的 GSAP CDN 脚本 -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</正文>

</html>

Cloudways 托管如何补充您的优化动画

Cloudways Hosting通过 DigitalOcean、AWS 和 Google Cloud 等顶级云提供商提供的快速速度和较长的正常运行时间，通过优化的动画增强网站。 其先进的缓存解决方案（包括 Memcached、Varnish 和 Redis）可确保动画的快速加载。 该平台的优化堆栈与 Cloudflare 的 Enterprise CDN 一起进一步提高了动画性能，尤其是在高峰流量期间。 加上强大的安全功能，Cloudways 为动画丰富的网站提供了理想的、经济高效的托管环境。

概括

就是这样。 我们探索了避免非合成动画的关键策略，重点关注网络动画的最佳实践。

我们还讨论了非合成动画发生的原因以及它们如何影响 Web 性能和浏览器渲染。

如果您对此主题有任何疑问，请随时与我们联系。