前端动画性能规范书.docVIP

前端动画性能规范书

一、动画性能的核心指标

（一）帧率（FPS）

帧率是衡量动画流畅度的核心指标，指每秒显示的画面帧数。人眼通常认为60FPS是动画流畅的基准，此时画面更新间隔约为16.7ms（1000ms/60）。当帧率低于50FPS时，部分用户会感知到卡顿；低于30FPS时，卡顿感会非常明显。

在实际开发中，需通过浏览器开发者工具（如ChromeDevTools的Performance面板）实时监控帧率。例如，在滚动动画、元素切换等场景下，若帧率波动超过10FPS，就需要优化动画实现方式。

（二）主线程阻塞

浏览器的主线程负责处理JavaScript执行、DOM操作、样式计算和布局等任务。当主线程被长时间占用时，动画会出现延迟或卡顿。常见的阻塞场景包括：

执行复杂的JavaScript计算（如大数据量循环、递归）；

频繁的DOM查询与修改（如document.getElementById、element.style）；

同步Ajax请求。

通过Performance面板可以查看主线程的任务执行时间，若单个任务执行时间超过10ms，就可能影响动画流畅度。

（三）重绘与回流

重绘（Repaint）是指元素样式的改变不影响布局时，浏览器重新绘制元素的过程，如修改颜色、透明度。回流（Reflow）则是指元素布局发生改变时，浏览器重新计算元素位置和大小的过程，如修改宽高、添加/删除DO