数据可视化大屏性能调优指南 · 课程目录

大屏性能瓶颈分析 ↗

从数据加载到渲染的全链路诊断

数据源优化 ↗

接口聚合·数据压缩·增量更新

前端渲染引擎选型 ↗

Canvas vs SVG vs WebGL 取舍

虚拟滚动技术 ↗

万级数据点列表与表格

Web Worker 实战 ↗

数据计算与主线程解耦

ECharts 性能调优 ↗

系列合并·采样·渐进式渲染

地图可视化优化 ↗

GeoJSON 轻量化·瓦片加载

CSS 硬件加速 ↗

transform & will-change

动画性能优化 ↗

requestAnimationFrame·帧率

内存泄漏排查 ↗

Chrome DevTools Heap Snapshot

网络请求优化 ↗

HTTP/2 多路复用·资源预加载

WebSocket 实战 ↗

实时数据推送·心跳机制

图表懒加载 ↗

IntersectionObserver 按需渲染

大数据量表格 ↗

Canvas绘制 vs 虚拟DOM

Shader 入门 ↗

WebGL 高性能粒子系统

CPU 与 GPU 平衡 ↗

避免过度绘制·重排重绘

打包优化 ↗

Webpack/Vite 代码分割·Tree Shaking

静态资源分发·边缘计算

服务端渲染 SSR ↗

首屏加载极致优化

数据缓存策略 ↗

IndexedDB vs LocalStorage

监控与告警 ↗

Performance API·Lighthouse

低代码平台性能 ↗

组件渲染隔离·按需加载

移动端适配 ↗

触摸事件优化·分辨率自适应

3D 场景优化 ↗

Three.js LOD·实例化网格

时间序列数据 ↗

降采样 LTTB 工程实现

大屏安全 ↗

XSS 防护·数据脱敏

微前端架构 ↗

子应用性能隔离·通信开销

自动化测试 ↗

Puppeteer 性能回归

案例实战 ↗

城市交通大屏 5s→1s 优化

未来趋势 ↗

WebGPU · 云渲染技术展望