当前位置：首页 > news >正文

优化 Web 性能：处理非合成动画（Non-Composited Animations）

news 来源：原创 2025/8/29 8:52:15

在 Web 开发中，动画能够增强用户体验，但低效的动画实现可能导致性能问题。Google 的 Lighthouse 工具在性能审计中特别关注“非合成动画”（Non-Composited Animations），指出这些动画可能增加主线程负担，影响页面流畅性。本文将基于 Chrome 开发者文档，探讨非合成动画的影响、识别方法及优化策略，助你在2025年的 Web 项目中提升性能。

1. 什么是非合成动画？

1.1 定义

非合成动画（Non-Composited Animations）是指浏览器无法通过 GPU 合成（Compositing）直接处理的动画，而是需要主线程参与计算和重绘的动画。合成动画通常只涉及 transform 和 opacity，而非合成动画涉及更多属性（如 width、top）。

1.2 合成 vs 非合成

合成动画：由 GPU 处理，仅更新图层位置或透明度，性能高效。
非合成动画：由主线程计算布局（Layout）和绘制（Paint），开销大。

1.3 Lighthouse 的关注点

Lighthouse 检查页面中的动画，识别非合成属性，警告其可能导致的性能问题，如掉帧或卡顿。

2. 非合成动画的影响

2.1 主线程负担

非合成动画需要主线程重新计算布局和重绘，导致 CPU 使用率升高，尤其在低端设备上可能造成卡顿。

2.2 流畅性下降

动画帧率（FPS）下降，用户感知到不平滑的体验，影响“可交互时间”（TTI）。

2.3 性能得分降低

Lighthouse 的性能评分因非合成动画的低效性而下降，可能影响用户满意度。

3. 如何识别非合成动画？

3.1 使用 Lighthouse

打开 Chrome 开发者工具（F12）。
切换到“Lighthouse”选项卡。
选择“性能”类别，生成报告。
查看“诊断”下的“避免非合成的动画”（Avoid Non-Composited Animations），列出问题属性及动画。

3.2 使用开发者工具

在“性能”面板中录制动画，检查是否有频繁的“Layout”或“Paint”调用。
在“层”（Layers）面板中，确认动画元素是否独立合成。

3.3 检查 CSS

查看动画使用的属性是否超出 transform 和 opacity。

4. 优化非合成动画的策略

4.1 使用合成友好属性

将动画限制在 transform 和 opacity：

.box {animation: move 2s infinite;
}
@keyframes move {from { transform: translateX(0); }to { transform: translateX(100px); }
}

替代：
- left → transform: translateX。
- background-color → opacity（若适用）。

4.2 启用 GPU 加速

添加 will-change 或 transform 触发合成：

.box {will-change: transform;animation: move 2s infinite;
}

注意：避免滥用 will-change，仅用于动画元素。

4.3 检查触发布局的属性

避免在动画中使用以下属性：

width、height、top、left。
margin、padding。

示例优化：

/* 低效 */
@keyframes grow {from { width: 100px; }to { width: 200px; }
}
/* 高效 */
@keyframes grow {from { transform: scaleX(1); }to { transform: scaleX(2); }
}

4.4 使用 JavaScript 优化

通过 requestAnimationFrame 控制动画：

const box = document.querySelector('.box');
let pos = 0;
function animate() {pos += 1;box.style.transform = `translateX(${pos}px)`;requestAnimationFrame(animate);
}
animate();

4.5 测试和验证

使用“渲染”面板中的“帧率”（FPS）工具，确认动画流畅性。
确保优化后视觉效果一致。

5. 示例：优化前后对比

优化前

.box {animation: slide 2s infinite;
}
@keyframes slide {from { left: 0; }to { left: 100px; }
}

主线程调用：Layout + Paint。
FPS：30（卡顿）。

优化后

.box {will-change: transform;animation: slide 2s infinite;
}
@keyframes slide {from { transform: translateX(0); }to { transform: translateX(100px); }
}

主线程调用：仅合成。
FPS：60（流畅）。

效果

主线程阻塞时间从 50ms 降至 0ms。
Lighthouse 性能得分提升 5-10 分。

6. 注意事项

兼容性：transform 和 opacity 在现代浏览器中广泛支持。
过度优化：避免为所有元素添加 will-change，增加 GPU 负担。
测试：在低端设备上验证动画效果。

7. 总结

非合成动画是 Web 性能优化的常见问题，通过使用合成友好属性和 GPU 加速，可以显著降低主线程负担，提升动画流畅性。Lighthouse 的审计为我们提供了优化方向，而本文介绍的策略则是实践指南。

优化 Web 性能：处理非合成动画（Non-Composited Animations）

在 Web 开发中，动画能够增强用户体验，但低效的动画实现可能导致性能问题。Google 的 Lighthouse 工具在性能审计中特别关注“非合成动画”（Non-Composited Animations），指出这些动画可能增加主线程负担，影响…...

编程日记 2025/8/29 8:52:15

房地产之后：探寻可持续扩张的产业与 GDP 新思

在经济发展的长河中，房地产长期占据着支柱产业的重要地位。其之所以能担当此重任，根源在于它深度嵌入了人们的生活与经济体系。住房，作为人类最基本的需求之一，具有不可替代的刚性。与其他现买按需生产的产业不同，房地产有着独特的消费逻辑。人们为了拥有一个稳定的居住之…...

编程日记 2025/8/27 10:52:15

Chapter02_数字图像处理基础

文章目录图像的表示⭐模拟图像→数字图像均匀采样和量化均匀采样均匀量化非均匀采样和量化数字图像的表示二值图像灰度图像彩色图像 ⭐空间分辨率和灰度分辨率空间分辨率灰度分辨率 ⭐图像视觉效果影响因素采样数变化对图像视觉效果的影响空间分辨率变化对图像视觉效果的影响…...

编程日记 2025/8/28 0:09:37

【Android】UI开发：XML布局与Jetpack Compose的全面对比指南

随着Google推出Jetpack Compose这一现代化工具，我们面临一个关键选择：继续使用传统的XML布局，还是转向Compose？ 一、语法对比：两种不同的构建方式 1. XML布局：基于标签的静态结构 XML通过嵌套标签定义UI元…...

编程日记 2025/8/28 21:50:42

浙大：LLM具身推理引擎Embodied-Reasoner

📖标题：Embodied-Reasoner: Synergizing Visual Search, Reasoning, and Action for Embodied Interactive Tasks 🌐来源：arXiv, 2503.21696 🌟摘要 🔸深度思维模型的最新进展已经证明了数学和编码任务的…...

编程日记 2025/8/27 1:26:33

说明： formffmpegopus录音压缩音频效果图： step1:opus格式录音 C:\Users\wangrusheng\RiderProjects\WinFormsApp11\WinFormsApp11\Form1.cs using System; using System.Diagnostics; using System.IO; using System.Windows.Forms;namespace WinFo…...

编程日记 2025/8/28 12:26:35

win10 笔记本电脑安装 pytorch+cuda+gpu 大模型开发环境过程记录

win10 笔记本电脑安装 pytorchcudagpu 大模型开发环境过程记录文章部分内容参考 deepseek。以下使用命令行工具 mingw64。安装 Anaconda 安装位置： /c/DEVPACK/Anaconda3 然后安装 Python 3.10.16 （略） $ conda create -n pytorch_…...

编程日记 2025/8/28 5:37:23

LeetCode 2442：统计反转后的不同整数数量

目录核心思想：数字的“拆分”与“重组” 分步拆解（以输入 123 为例） 关键操作详解为什么能处理中间或末尾的0？ 数学本质总结题目描述解题思路代码实现代码解析复杂度分析示例演示总结核心思想：…...

编程日记 2025/8/27 23:01:51

获取inode的完整路径包含挂载的路径

一、背景在之前的博客缺页异常导致的iowait打印出相关文件的绝对路径-CSDN博客里的 2.2.3 一节和关于inode，dentry结合软链接及硬链接的实验-CSDN博客里，我们讲到了在内核里通过inode获取inode对应的绝对路径的方法。对于根目录下的文件而言&#…...

编程日记 2025/8/27 20:46:11

解决上传PDF、视频、音频等格式文件到FTP站点时报错“将文件复制到FTP服务器时发生错误。请检查是否有权限将文件放到该服务器上”问题

一、问题描述可以将文本文件（.txt格式），图像文件(.jpg、.png等格式)上传到我们的FTP服务器上；但是上传一些PDF文件、视频等文件时就会报错“ 将文件复制到FTP服务器时发生错误。请检查是否有权限将文件放到该服务器上。详细信息： 200 Type set to l. 227 Entering Pas…...

编程日记 2025/8/28 17:44:16

git push

在 git push 命令中，分支名称的顺序和含义非常重要。其基本格式如下： git push <remote> <local_branch>:<remote_branch>各部分解释 <remote>：远程仓库的名称（如 origin）。<local_branc…...

编程日记 2025/8/28 4:06:18

Java中的四大引用类型详解

Java中的四大引用类型详解：强引用、软引用、弱引用、虚引用 1. 引用类型概览 Java提供了四种不同强度的引用类型，用于控制对象的生命周期和垃圾回收行为： 引用类型回收时机典型应用场景是否影响GC强引用永不回收（除非断开引用&…...

编程日记 2025/8/28 21:41:39

MySQL慢查询日志通俗指南

🍀 前言如果你发现自己新写或者重写的接口查询速度变慢，你怎么定位原因呢？可以用explain分析我们的SQL原生代码，又或者可以考虑使用MySQL慢查询日志。这篇文章主要讲述什么是慢查询日志以及开发中可能用到的场景。但是&#x…...

编程日记 2025/8/26 18:03:49

Kafka 如何保证消息可靠性？

Kafka 保证消息可靠性主要通过以下几个机制来实现，从生产者到消费者的整个链路上都设计了相应的保障措施： 1. 生产者（Producer）端的可靠性 ✅ a. acks 参数（确认机制） acks0：生产者不等待任何…...

编程日记 2025/8/28 11:14:19

【嵌入式系统设计师】知识点：第2章嵌入式系统硬件基础知识

提示：“软考通关秘籍” 专栏围绕软考展开，全面涵盖了如嵌入式系统设计师、数据库系统工程师、信息系统管理工程师等多个软考方向的知识点。从计算机体系结构、存储系统等基础知识，到程序语言概述、算法、数据库技术（包括关系数据库、非关系型数据库、SQL 语言、数据仓库等）…...

编程日记 2025/8/26 11:09:51

C++重载运算符的本质

C 中运算符重载的本质就是函数调用，编译器会将运算符表达式转换为对特定函数的直接调用。以下是具体原理和实现细节： 1. 运算符重载的底层实现当重载一个运算符（如、、<<）时，实际上是在定义一个特殊名称的函数…...

编程日记 2025/8/29 7:01:16

Python解决“数字插入”问题

Python解决“数字插入”问题问题描述测试样例解题思路代码问题描述小U手中有两个数字 a 和 b。第一个数字是一个任意的正整数，而第二个数字是一个非负整数。她的任务是将第二个数字 b 插入到第一个数字 a 的某个位置，以形成一个最大的可能数字。你…...

编程日记 2025/8/29 7:25:56

深入讲解：智能合约中的读写方法

前言在探秘区块链开发：智能合约在 DApp 中的地位及与传统开发差异一文中我提到对于智能合约中所有的写入其实都算是交易。而在一个完整的智能合约代码中最大的两个组成部分就是读取和写入。本文将为你深入探讨该两者方法之间的区别。写方法写方法其实就是对区块链这一…...

编程日记 2025/8/28 18:59:51

Java进阶之旅-day05：网络编程

引言在当今数字化的时代，网络编程在软件开发中扮演着至关重要的角色。Java 作为一门广泛应用的编程语言，提供了强大的网络编程能力。今天，我们深入学习了 Java 网络编程的基础知识，包括基本的通信架构、网络编程三要素、IP 地址、…...

编程日记 2025/8/28 16:57:28

Eliet Chat开发日志：信令服务器注册与通信过程

目录 1. 架构设计：信令服务器与客户端 2. 选择技术栈 3. 实现信令服务器 4. 客户端实现 5. 测试 6. 下一步计划日期：2025年4月5日今天的工作重点是实现两个设备通过信令服务器注册并请求对方公网地址信息，以便能够进行点对点通信。我…...

编程日记 2025/8/29 3:17:42

如何设计一个本地缓存

想获取更多高质量的Java技术文章？欢迎访问Java技术小馆官网，持续更新优质内容，助力技术成长 Java技术小馆官网https://www.yuque.com/jtostring 如何设计一个本地缓存随着系统的复杂性和数据量的增加，如何快速响应用户请求、减…...

编程日记 2025/8/27 19:32:40

2024版idea使用Lombok时报找不到符号

今天在springboot项目中使用Lombok的Builder注解，启动时居然报了找不到符号的错，如下图于是开始了漫长的寻找之路，首先去settings->Plugins中看自己的Lombok插件是否启动，发现确实是如此，然后看网上的教程去加上这…...

编程日记 2025/8/27 13:01:53

[Android安卓移动计算]：新建项目和配置环境步骤

文章目录一：AndroidStudio 创建项目1. New Project2. 选择：Empty Activity 二：配置和下载SDK点击SDK 配置按钮选择API32和Android 9.0（Pie）再点击Apply点击接受条款声明进行安装安装完后点击NEXT和OK出现&#xff1a…...

编程日记 2025/8/26 0:57:03

$R^n$平面约束下的向量列

原向量： x → \overset{\rightarrow}{x} x→ 与 x → \overset{\rightarrow}{x} x→法向相同的法向量（与 x → \overset{\rightarrow}{x} x→同向） ( x → ⋅ n → ∣ n → ∣ 2 ) n → (\frac{\overset{\rightarrow}x\cdot\overset{\righta…...

编程日记 2025/8/29 4:19:22

混合编程的架构

在混合使用QML和Qt Widgets的环境中，是否必须严格遵循分层架构需要根据项目规模和复杂度来决定。以下是具体的决策指南和实施建议： 一、分层架构的适用性分析 #mermaid-svg-61Mlp9MrpFOoZPAO {font-family:"trebuchet ms",verdana,arial,sans…...

编程日记 2025/8/28 20:28:10

联网汽车陷入网络安全危机

有人能够入侵并控制汽车这一事实本身就令人恐惧，电影中的场景变成了现实。再加上汽车中的软件会处理和存储我们的个人数据，这种恐惧达到了一个新的高度。一旦发生安全漏洞，我们的驾驶数据、联系人、通话记录、消息甚至位置信息等信息都可能…...

编程日记 2025/8/27 1:06:11

基于Spark的招聘数据预测分析推荐系统

【Spark】基于Spark的招聘数据预测分析推荐系统 （完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介该系统能够高效处理海量招聘数据，利用Spark的强大计算能力实现快速分析和预测。该系…...

编程日记 2025/8/29 8:48:50

基于Spark的酒店数据分析系统

【Spark】基于Spark的酒店数据分析系统 （完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介本项目基于Python语言开发，借助Django进行后台框架的开发，搭建大数据虚拟机集群…...

编程日记 2025/8/28 14:36:19

网络安全L2TP实验

在FW1上，将接口g1/0/0添加进去trust区域 [USG6000V1]firewall zone trust [USG6000V1-zone-trust]add interface GigabitEthernet 1/0/0 在放通安全策略在FW2上配置ip [USG6000V1]int g1/0/1 [USG6000V1-GigabitEthernet1/0/1]ip address 20.1.1.1 24 [USG6000…...

编程日记 2025/8/27 1:26:35

18.1.go连接redis

开发调试 Tiny RDM：跨平台GUI工具windows版本下载 https://download.csdn.net/download/chxii/90562932 支持多种格式查看：内置高级文本代码编辑器，支持语法高亮/代码折叠/错误提示便捷搜索过滤：使用正则匹配搜索键后，仍可进行二级过滤，组合筛选数据更方便调试分析…...

编程日记 2025/8/29 1:56:45

innodb如何实现mvcc的

InnoDB 实现 MVCC（多版本并发控制）的机制主要依赖于 Undo Log（回滚日志）、Read View（读视图） 和隐藏的事务字段。以下是具体实现步骤和原理： 1. 核心数据结构 InnoDB 的每一行数据&#xff08…...

编程日记 2025/8/27 12:43:11

递归实现组合型枚举（DFS）

从 1∼n 这 n 个整数中随机选出 m 个，输出所有可能的选择方案。输入格式两个整数 n,m,在同一行用空格隔开。输出格式按照从小到大的顺序输出所有方案，每行 1 个。首先，同一行内的数升序排列，相邻两个数用一个空格隔开。…...

编程日记 2025/8/28 2:46:28

【Java学习日记18】：三元运算符和运算符的优先级

一、三元运算符 2. 示例代码例题1: 例题2: 二、运算符优先级 1. 优先级规则 Java 运算符的执行顺序由优先级决定，优先级高的先执行。只要记住小括号优先级最大即可,以后就用这玩意四、总结运算符优先级：小括号 () 是最高优先级工具...

编程日记 2025/8/27 17:22:12

基于springboot放松音乐在线播放系统(源码+lw+部署文档+讲解)，源码可白嫖!

摘要本放松音乐在线播放系统采用B/S架构，数据库是MySQL，网站的搭建与开发采用了先进的Java进行编写，使用了Spring Boot框架。该系统从两个对象：由管理员和用户来对系统进行设计构建。前台主要功能包括：用户注册、登录…...

编程日记 2025/8/27 5:08:10

【Scratch编程系列】Scratch编程软件界面

Scratch是一款由麻省理工学院(MIT） 设计开发的少儿编程工具。其特点是：使用者可以不认识英文单词，也可以不使用键盘，就可以进行编程。构成程序的命令和参数通过积木形状的模块来实现。用鼠标拖动指令模块到脚本区就可以了。这个软…...

编程日记 2025/8/29 5:05:45

技术驱动革新，强力巨彩LED软模组助力创意显示

随着LED显示技术的不断突破，LED软模组因其独特的柔性特质和个性化显示效果，正逐渐成为各类应用场景的新宠。强力巨彩软模组R3.0H系列具备独特的可塑造型能力与技术创新，为商业展示、数字艺术、建筑装饰等领域开辟全新视觉表达空间。　　 LED…...

编程日记 2025/8/28 23:21:25

历年跨链合约恶意交易详解（三）——Nomad Bridge20220801

漏洞合约函数 /*** notice Given formatted message, attempts to dispatch* message payload to end recipient.* dev Recipient must implement a handle method (refer to IMessageRecipient.sol)* Reverts if formatted messages destination domain is not the Replicas d…...

编程日记 2025/8/28 8:19:31