图表性能优化

共 27 题
#

1. 可视化图表的可访问性(高对比度模式、文本替代、键盘导航)

A 只靠颜色区分数据
B 提供 role="img" + aria-label 语义描述,并可配合 <table> 数据替代 ✓ 正确答案
C 隐藏所有文本
D 禁用键盘
#

2. 采样、聚合、虚拟滚动在大数据可视化的应用

A 虚拟滚动 ✓ 正确答案
B 聚合
C 采样
D 颜色映射
#

3. 图表 ARIA(role=img/aria-label)与文本回退(title/desc)

A 让图表可缩放
B 声明其为有语义的图像,配合 aria-label 让辅助技术描述图表内容 ✓ 正确答案
C 提高渲染性能
D 禁用交互
#

4. performance.mark()/measure() 与 User Timing 在图表渲染耗时打点的工程实践

A 绘制图表
B 修改 DOM
C 触发网络请求
D 记录并测量两个 mark 之间的耗时 ✓ 正确答案
#

5. 图表首帧的耗时分解(数据请求、布局计算、Canvas/SVG 绘制)与优化优先级

A 数据请求(网络延迟、请求数量、数据体积) ✓ 正确答案
B 绘制颜色
C 字体加载
D 动画曲线
#

6. 图表数据的渲染优化(Canvas 池化、Path2D 复用)

A 减少网络请求
B 改变颜色
C 复用已构建的路径,避免重复构建路径的 CPU 开销 ✓ 正确答案
D 增加 DOM 节点
#

7. 色彩盲模拟与色彩安全调色板的工程价值

A 让图表更鲜艳
B 减少文件体积
C 提高渲染速度
D 保证色盲用户也能清晰区分数据,避免仅靠红绿等易混淆颜色 ✓ 正确答案
#

8. 大数据渲染(cubejs 聚合查询/数据降采样)与虚拟化图表(react-window)

A 在数据层预聚合,避免前端处理海量明细数据 ✓ 正确答案
B 在渲染层做虚拟滚动
C 改变图表颜色
D 增强动画
#

9. ECharts 的 dataset 与 series 分离在数据驱动可视化的工程价值

A 无法更新数据
B 减少代码行数
C 必须使用 3D 渲染
D 数据与视觉编码解耦、可复用、便于增量更新 ✓ 正确答案
#

10. D3.js(数据驱动 DOM)与 ECharts(声明式配置)

A ECharts 开箱即用配置
B 静态图片
C D3.js 底层数据驱动,可完全控制渲染与交互 ✓ 正确答案
D HTML 表格
#

11. ECharts 在大数据点(10 万+)的渲染性能(progressive/progressiveThreshold)与现代取舍

A 当图元数超过阈值时启用渐进渲染,分帧绘制避免卡顿 ✓ 正确答案
B 改变颜色
C 增加动画
D 关闭所有渲染
#

12. Highcharts 的商业许可 vs ECharts 的 Apache 2.0 商业兼容在大型项目的取舍

A 功能一定比 Highcharts 强
B Apache 2.0 许可允许商业使用且免费,合规成本低 ✓ 正确答案
C 完全没有文档
D 不支持 TypeScript
#

13. Chart.js 的 Canvas 渲染与 decimation 插件在大数据点下的取舍

A 增加图表动画
B 改变图表颜色
C 对大数据折线图降采样,减少绘制量保持流畅 ✓ 正确答案
D 启用 3D 渲染
#

14. ECharts 的 SSR 渲染(ssr 模式)在服务端预生成 SVG 的现代工程价值

A 在客户端强制 WebGL
B 增加动画
C 关闭图表
D 在 Node 服务端无 DOM 预生成 SVG,提升首屏与 SEO ✓ 正确答案
#

15. uPlot(极简 Canvas)在时序数据(10 万点)的极致性能与现代取舍

A 功能最全、开箱即用
B 不支持时序数据
C 完全依赖 DOM
D 极简 Canvas 时序渲染,追求 10 万+ 数据点的极致性能 ✓ 正确答案
#

16. D3.js v7+(observable plot 的现代化)

A 仅支持旧版语法
B 使用 ES module、模块化按需引入、异步与现代 JS 特性 ✓ 正确答案
C 必须使用 CDN 脚本
D 无模块化
#

17. ECharts 主题(registerTheme)与 CSS 变量绑定(colorBy: series/data)在主题切换的现代工程

A 按系列取色
B 只用于折线图
C 关闭颜色
D 按数据项取色(如柱状图每根柱不同颜色) ✓ 正确答案
#

18. 图表无障碍的 aria-roledescription="chart" 与 <table> 数据替代呈现的工程价值

A 提升渲染速度
B 改变配色
C 增加图表动画
D 让读屏用户获取图表完整数据,实现数据替代呈现 ✓ 正确答案
#

19. ECharts 的 markArea/markPoint/markLine 在可视化注释与告警区的现代工程价值

A markLine ✓ 正确答案
B markPoint
C markArea
D graphic
#

20. Canvas 高分屏(DPR)适配,backing store 尺寸与 CSS 尺寸的关系、ctx.scale 缩放与模糊问题的工程解法?

A backing store 像素少于物理像素,浏览器放大产生插值模糊 ✓ 正确答案
B 颜色太浅
C 绘制函数错误
D 动画过快
#

21. Recharts、visx、Apache ECharts 在 React/Vue 生态的生态兼容与现代取舍

A 直接使用 Recharts
B 无法集成
C 使用 visx
D 使用 vue-echarts 封装,通过 ref 自动初始化和销毁 ✓ 正确答案
#

22. Apache ECharts 在 TypeScript 类型(5.x 系列)

A 配置项可编译期类型检查、IDE 补全,减少运行时配置错误 ✓ 正确答案
B 让图表更快
C 只用于服务端
D 无法使用
#

23. VisActor/抖音 VChart 在大数据可视化(金融大屏)

A 只支持最基础的折线图
B 侧重高性能大数据、3D 与金融/监控大屏的可视化 ✓ 正确答案
C 已停止维护
D 无法在浏览器使用
#

24. ECharts 在 Vue 3 组合式 API 包装(vue-echarts)与 ref 自动初始化的边界

A 不处理
B 只清理样式
C 自动 dispose 释放 ECharts 实例 ✓ 正确答案
D 保留实例
#

25. 图表打印/PDF 导出(jsPDF/html2canvas)与 SVG 直接转 Canvas 的工程取舍

A html2canvas 截屏
B 手动截图
C 截屏浏览器
D SVG 直接转 canvas 再导出(矢量清晰) ✓ 正确答案
#

26. ECharts 5 的 universalTransition 在图表间元素迁移的现代工程价值

A 加快渲染
B 关闭动画
C 改变颜色
D 在数据更新或图表切换时让元素平滑迁移过渡,保持视觉连续性 ✓ 正确答案
#

27. OffscreenCanvas 在 Worker 中绘图,如何将图表渲染移到后台线程避免主线程卡顿,以及 transferControlToOffscreen 的工程边界?

A 继续直接绘制正常
B 只能 2D 不能 WebGL
C 画布被删除
D 画布控制权已转移给 Worker,主线程不能再直接绘制该画布 ✓ 正确答案