📘 低代码性能优化
实战调优
🎯 30章 · 从入门到精通
v2.0
01
性能全景
TTFB
FCP
LCP
TTI
瓶颈类型·核心指标·二八原则·木桶效应
02
前端渲染优化
虚拟列表
懒加载
无限滚动
固定/动态高度·表单/表格应用
03
组件渲染性能
Virtual DOM
React.memo
useMemo
Diff算法·避免重渲染·组件拆分
04
状态管理优化
Context
Zustand
防抖节流
全局/局部状态·批量处理·性能陷阱
05
数据请求优化
请求合并
预加载
IndexedDB
批量接口·缓存策略·竞态处理
06
大数据量表格
react-window
ag-Grid
冻结列
虚拟化·列宽自适应·排序筛选
07
表单性能优化
按需渲染
异步校验
防抖
字段渲染·校验·大数据提交
08
代码分割与懒加载
React.lazy
异步组件
按需引入
路由级别·组件级别·lodash/antd
09
构建与打包优化
Tree Shaking
CDN
分包策略
Webpack/Vite·压缩·SourceMap
10
网络传输优化
HTTP/2
Gzip
WebP
Protobuf
多路复用·图片优化·数据压缩
11
缓存策略深度
强缓存
协商缓存
Service Worker
浏览器缓存·离线缓存方案
12
渲染性能监控
Performance API
Lighthouse
性能埋点·上报·自定义监控
13
低代码引擎架构
渲染引擎
Schema解析
组件注册
设计时/运行时分离·JSON优化
14
设计器性能优化
拖拽优化
离屏渲染
虚拟滚动
transform·Canvas·组件面板
15
代码生成优化
缓存策略
增量编译
Tree Shaking
热更新·生成代码优化
16
微前端架构优化
预加载
EventBus
共享依赖
微应用加载·通信·隔离
17
数据库查询优化
索引优化
N+1查询
游标分页
慢查询·读写分离·缓存
18
服务端渲染优化
SSR/CSR
页面缓存
流式渲染
选型·组件缓存·渐进式
19
API网关与BFF
BFF
GraphQL
限流降级
数据聚合·裁剪·低代码应用
20
静态资源优化
CSS/JS合并
font-display
雪碧图
字体子集·SVG优化
21
内存泄漏排查
闭包
定时器
Chrome DevTools
常见场景·内存分析·案例
22
性能监控与告警
RUM
性能采集
告警阈值
真实用户监控·自动化处理
23
启动优化
骨架屏
预渲染
Web Worker
首屏加载·并行初始化·延迟
24
动画与交互优化
CSS动画
requestAnimationFrame
避免强制回流/重绘·选择
25
国际化与多语言
按需加载
ICU MessageFormat
语言切换·渲染优化
26
权限与安全性能
RBAC
ABAC
缓存策略
权限校验·安全扫描影响
27
移动端适配优化
GPU加速
触摸事件
弱网优化
DOM节点·防抖节流
28
可观测性
日志采集
OpenTelemetry
分布式追踪·瓶颈定位
29
案例实战
表单渲染
表格滚动
拖拽卡顿
5秒→500ms·大数据量优化
30
最佳实践
PDCA
性能预算
团队文化
持续改进·性能文化