渲染管线
60fps帧预算
性能工具
重排·重绘·合成
transform/opacity
will-change
硬件加速
触发合成层
requestAnimationFrame
setInterval避免
微任务/宏任务
帧循环控制
SMIL vs CSS
减少DOM
viewBox
坐标系统
Chrome Performance
Stats.js
长任务
FPS Meter
GSAP
Framer Motion
Anime.js
轻量方案
Intersection Observer
被动监听
虚拟滚动
滚动监听优化
设备性能降级
prefers-reduced-motion
分辨率适配
媒体查询
OffscreenCanvas
Worker动画
主线程解放
离屏线程
贝塞尔性能
路径压缩
SVG vs Canvas
数据压缩
粒子数量平衡
GPU/CPU粒子
空间哈希
碰撞检测
Web Font加载
字体子集化
Canvas文本
渲染优化
预加载资源
Service Worker
HTTP/2
缓存策略
Chrome Animations
Firefox Profiler
性能标记
自定义标记
DOM/CSSOM
渲染树/布局
图层树
绘制列表
复合线程属性
避免重绘
3D加速
transform加速
防抖/节流
pointer-events
事件委托
事件优化
contain属性
layout/paint/size
内容隔离
隔离优化
prefers-reduced-motion
暂停控制
ARIA属性
可访问性
性能预算
Lighthouse
RUM数据
审计监控
IndexedDB
内存/存储权衡
序列化
缓存数据
Houdini API
WebGPU
硬件加速
Animation Worklet