Web开发动画与性能优化

帧率说明

帧率(Frames Per Second, FPS)指的是每秒钟渲染的帧数。通常情况下,60FPS【每秒60帧】被认为是流畅动画的标准。这意味着每帧的渲染时间需要控制在16.67毫秒以内。帧率越高,动画越流畅;反之,帧率越低,动画就越卡顿。

动画性能问题和优化技巧

常见性能问题

大量DOM操作 】频繁的DOM操作导致重排和重绘增加浏览器的渲染负担。

未优化的动画属性 】CSS属性某些(widthheighttopleft)会触发布局重排,影响性能。

不当的JS逻辑】在动画中使用复杂的JavaScript计算逻辑,会占用大量的CPU时间,导致动画卡顿。

优化动画性能技巧

1、使用硬件加速

硬件加速 是通过GPU是图形处理器 (Graphics Processing Unit)来渲染某些特定的CSS属性 (如**transform** 、opacity ),从而减轻CPU的渲染负担。要启用硬件加速,可以使用以下方法:

复制代码
.element {
    transform: translateZ(0);
    will-change: transform, opacity;
}

通过添加transform: translateZ(0)或**will-change** ,可以让浏览器提前优化这些属性的渲染过程。

2、优化CSS动画属性

在进行CSS动画时,尽量使用transformopacity属性 ,而不是 topleftwidthheight等属性。后者会触发布局重排(reflow),严重影响性能。

推荐的动画属性:

复制代码
.element {
    animation: move 2s infinite;
}

@keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

不推荐的动画属性:

复制代码
.element {
    animation: move 2s infinite;
}

@keyframes move {
    from { left: 0; }
    to { left: 100px; }
}

3. 减少DOM操作

尽量减少对DOM的直接操作,尤其是导致重排的操作。可以将需要改变的属性 放在**transform** 中操作,或者通过requestAnimationFrame优化JS动画的执行

4. 使用轻量级的动画库 并控制动画复杂度

  • 当动画涉及大量的JS逻辑,选择一个轻量级且高效的动画库,如GSAP、Anime.js等,这些库通常会对性能进行深度优化,可以帮助你更好地管理动画。
  • 在复杂的动画场景中,适当减少动画的复杂度和元素数量是保持高帧率的关键。对于一些细微的动画效果,尽量简化,以确保整体流畅性。

实战案例说明

优化一个卡顿的动画

优化后的动画帧率显著提升,能够在各种设备上保持流畅。通过简化动画属性并启用硬件加速,我们成功地减少了CPU的负担,确保了动画的高效执行。

原始代码:一个简单的滑动动画,但由于使用了left属性,导致动画卡顿

复制代码
<div class="box"></div>

<style>
.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    left: 0;
    animation: slide 5s infinite;
}

@keyframes slide {
    0% { left: 0; }
    100% { left: 90%; }
}
</style>

优化代码:将left属性替换为transform属性,启用硬件加速,使得动画更加流畅。

复制代码
<div class="box"></div>

<style>
.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    transform: translateX(0);
    animation: slide 5s infinite;
    will-change: transform;
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(90vw); }
}
</style>

此文章借鉴了下面博主的优秀文章,万分感谢

网站链接

相关推荐
tianyuanwo8 分钟前
Rust语言组件RPM包编译原理与Cargo工具详解
开发语言·网络·rust·rpm
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
Tim风声(网络工程师)3 小时前
不同射频对应不同mac地址(查找无线用户连接AP信息)
服务器·网络·tcp/ip·智能路由器·无线ap
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go7 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠7 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习