仪表盘·渲染调优
🚀 30 章 · 性能进阶
v2.0
✨ 点击目录
跳转至对应章节 · 友好色系
01
瓶颈
性能瓶颈分析
Chrome DevTools Performance 面板 · 重排与重绘代价
02
管线
渲染管线优化
JavaScript → Style → Layout → Paint → Composite
03
Canvas
Canvas 2D 上下文优化
离屏Canvas · 批量绘制 · requestAnimationFrame
04
WebGL
WebGL 基础与优化
VBO / EBO · 减少 draw call
05
数据
数据驱动渲染
虚拟列表 · Web Worker 数据预处理
06
硬件加速
CSS动画 & 硬件加速
transform / opacity · will-change · 合成层
07
内存
内存管理
对象池 · WeakMap · 避免GC卡顿
08
纹理
纹理与图像优化
KTX / ASTC · Sprite Sheet · ImageBitmap
09
Shader
Shader 优化
分支语句 · 精度限定符 · uniform合并
10
帧同步
帧同步与时间步长
Fixed Time Step · 帧率自适应插值
11
离屏
离屏渲染与缓存
静态背景离屏Canvas · 仅更新动态层
12
多线程
多线程渲染
OffscreenCanvas · Transferable Objects
13
实例化
GPU 实例化
drawArraysInstanced · ANGLE_instanced_arrays
14
LOD
LOD 层次细节
动态切换精细度 · 简化几何体
15
遮挡
遮挡剔除
视锥体剔除 · 遮挡查询
16
图集
纹理图集与动态合图
大纹理打包 · 减少绑定切换
17
批处理
渲染队列与批处理
相同材质合并 · 减少draw call
18
线程分离
UI线程与渲染线程分离
Web Worker 逻辑 · 主线程渲染
19
TypedArray
TypedArray 优化数据传递
Float32Array · 减少JS对象开销
20
预计算
预计算与查找表
三角函数/贝塞尔 LUT
21
流式
异步纹理加载与流式传输
渐进式加载 · 避免卡顿
22
状态管理
渲染状态管理
状态栈 · 状态排序优化
23
Wasm
WebAssembly 加速计算
物理模拟 / 数据插值 · 原生性能
24
自适应
帧率监控与自适应降级
动态降低渲染质量 · 阈值控制
25
GPU粒子
GPU 粒子系统
Transform Feedback · Compute Shader
26
MRT
渲染目标与多重渲染
FBO · MRT 一次输出多张纹理
27
SDF
SDF 有符号距离场文本
避免Canvas 2D文本性能问题
28
缓动
动画曲线优化
缓动函数 · 避免高次贝塞尔
29
加载策略
资源预加载与懒加载
IndexedDB缓存 · 核心优先
30
Profiling
性能监控 & Profiling 工具
Stats.js · Spector.js · WebGL Inspector