Canvas 粒子动效掉帧：先看绘制成本，再做质量降级

Canvas 粒子动效掉帧先看绘制成本再做质量降级粒子动效在开发机上轻盈不代表低性能设备也能跟上。把脚本、样式和绘制时间分开看再决定降低粒子数、像素比还是效果层级。先看渲染路径当动画每帧修改大量元素的样式浏览器可能反复计算样式和绘制。Performance 面板能帮助区分问题来自脚本、样式计算还是绘制不要只盯着帧率数字。// 每帧只更新一个画布而不是逐个更新粒子的 DOM 样式。 ctx.clearRect(0, 0, canvas.width, canvas.height); for (const particle of particles) { ctx.drawImage(sprite, particle.x, particle.y, particle.size, particle.size); }预先画好一个光晕精灵再用drawImage复用通常比每帧创建渐变和滤镜更省。Canvas 也不是自动更快粒子数量、画布尺寸和设备像素比仍需要一起控制。让质量可以下降质量档位不该藏在某个设备判断里。根据连续一段时间的帧耗时降低粒子数或关闭昂贵效果性能恢复后再缓慢加回避免在阈值附近来回跳动。function nextQuality(frameMs, quality) { if (frameMs 24) return Math.max(0, quality - 1); if (frameMs 18) return Math.min(2, quality 1); return quality; }验证方式至少用不同尺寸、不同像素比的设备真机看一遍并在性能面板里确认样式计算和绘制没有随着动画持续上涨。若效果只是背景宁可少一些粒子也别抢走点击和滚动的时间。这次取舍没有那么戏剧化视觉效果是一层气氛交互才是页面的主旋律。