CSS 动画，JS 动画和 Three.js 动画有什么区别？｜美团前端面经解析

60 秒回答模板

CSS 动画适合按钮状态、过渡、简单关键帧和可声明的 UI 动效，写法简单，浏览器能优化 transform 和 opacity。JS 动画适合复杂时间线、交互驱动、物理效果、中断和精细控制，通常用 requestAnimationFrame 对齐刷新节奏，但要注意主线程长任务。Three.js 是基于 WebGL 的 3D 渲染方案，适合 3D 场景、相机、光照、模型和粒子效果，表达能力强，同时资源加载、GPU、内存和适配成本也更高。面试回答要落到选型：能用 CSS 完成的 UI 动效不要上重方案，复杂交互用 JS，3D 场景才考虑 Three.js。

考点 核心机制与工程取舍

难度 中高频面试题

回答目标 按定义、机制、场景讲清楚

深入解析

CSS 动画的定位

CSS transition 和 animation 是声明式的，适合状态切换、hover、loading、淡入淡出、位移和缩放。transform、opacity 通常可由合成线程处理，性能更稳定，但流程控制、条件分支和物理模拟能力有限。

JS 动画的定位

JS 动画用 requestAnimationFrame 在每帧计算状态并更新样式或 Canvas，适合拖拽跟手、滚动联动、复杂缓动、可暂停恢复、时间线编排和数据驱动动画。缺点是更依赖主线程健康，计算重会造成掉帧。

Three.js 的定位

Three.js 封装 WebGL，关注 scene、camera、renderer、mesh、material、light 和动画循环。它不是普通 DOM 动效工具，而是 3D 渲染引擎，适合模型展示、空间交互、粒子和沉浸式视觉。

渲染路径和性能

CSS 操作布局属性可能触发布局和绘制，操作 transform/opacity 更容易走合成。JS 如果频繁读写布局会造成强制同步布局。Three.js 主要消耗 GPU、纹理内存和渲染循环，需要控制模型面数、材质、光照和 draw call。

交互控制差异

CSS 适合较固定的开始、结束和关键帧；JS 更适合运行中根据用户输入调整轨迹；Three.js 需要维护每帧渲染循环、相机控制、射线拾取和资源释放。

面试选型表达

答题时可以按成本递进：简单 UI 动效优先 CSS，复杂交互和状态驱动用 JS，真正需要 3D 空间表达才用 Three.js。选型要兼顾可维护性、性能预算和团队熟悉度。

易错点

把 Three.js 说成更高级的 CSS 动画，忽略它是 WebGL 3D 渲染方案。
只按语法区分 CSS 和 JS，不讲控制能力、主线程和渲染路径。
认为 CSS 动画一定高性能，不区分 transform/opacity 和布局属性。
复杂动画只追求效果，不提资源释放、掉帧、内存和可维护性。

面试官追问

为什么推荐 transform 和 opacity 做动画？

它们通常不改变文档流几何，容易跳过布局阶段并交给合成处理，减少主线程布局和绘制压力。

JS 动画为什么要用 requestAnimationFrame？

requestAnimationFrame 会在浏览器下一次绘制前回调，节奏和刷新率对齐，页面不可见时也能被降频，比 setInterval 更适合动画。

Three.js 动画要注意哪些资源问题？

要释放 geometry、material、texture，控制模型面数、纹理尺寸、光照和后处理，避免每帧创建对象导致内存和 GC 压力。

CSS 动画是不是一定不卡？

不是。动画布局属性、大面积阴影、滤镜、频繁触发绘制或层数过多都可能卡顿。CSS 只是更容易让浏览器优化，并不等于无成本。