前端可视化与图形架构面试题
模拟真实面试场景，训练对可视化技术的思考与表达。
一、基础题
1. SVG 和 Canvas 的主要区别是什么？基础
2. 什么是 WebGL？前端什么时候需要它？基础
3. 如何解决大数据量可视化性能问题？基础
4. Canvas 2D API 基础：绘制原理与状态管理基础
5. SVG viewBox 与 viewport 机制详解基础
6. D3.js 数据绑定与 Data Join 机制基础
7. requestAnimationFrame 与 setInterval 在动画中的选择基础
二、进阶题
8. 设计一个实时数据可视化大屏，需要关注哪些方面？进阶
9. 如何设计一个可扩展的图表库？进阶
10. 设计一个实时金融交易图表进阶
11. 实现一个力导向图可视化进阶
12. Canvas 命中检测策略进阶
13. ECharts 与 D3.js 架构对比进阶
14. 实现自定义地理地图可视化进阶
15. 数据可视化无障碍访问策略进阶
三、高级题
16. 设计一个支持百万级数据点的地图可视化系统深入
参考答案要点：
- 使用 WebGL 或 Deck.gl 渲染。
- 数据按地理网格聚合。
- 瓦片化加载和渲染。
- 聚合级别随缩放级别变化。
- 交互时查询原始数据局部细节。
评分维度：
- 渲染技术（25%）
- 数据聚合（25%）
- 瓦片化（20%）
- 交互设计（15%）
- 性能优化（15%）
17. WebGL 自定义着色器实现粒子系统深入
18. 浏览器端 3D 模型渲染 (glTF / Draco 压缩)深入
19. GIS 可视化性能调优 (Mapbox / Cesium)深入
20. 可视化平台架构设计 (元数据驱动、多租户)深入
21. 数字孪生前端架构设计深入
22. 协同画板架构设计 (CRDT + WebGL 渲染)深入
23. VR/AR 数据可视化 (WebXR)深入