
动效性能要在真实设备上测量Canvas 背景和 CSS 滤镜可以共存但它们不该抢走输入响应的预算。判断要不要上OffscreenCanvas先看真实页面主线程是否被绘制占住、目标浏览器是否支持、静态替代是否完整。不是每个粒子效果都值得引入 Worker。支持时把画布所有权转给 Worker并明确处理尺寸和销毁const canvas document.querySelector(canvas); if (transferControlToOffscreen in canvas) { const worker new Worker(new URL(./art.worker.js, import.meta.url), { type: module }); const offscreen canvas.transferControlToOffscreen(); worker.postMessage({ type: init, canvas: offscreen, width: canvas.clientWidth }, [offscreen]); }Worker 不会消除所有成本GPU、合成和内存仍在跨线程传输也有代价。用 DevTools 对照交互前后的长任务和绘制记录在不支持的环境中让渐变或静态插画自然接手。效果再复杂滚动和点击也该先响应。