渲染与可视化库

共 62 题
#

1. Plotly.js、Highcharts、ApexCharts 在商业 BI 仪表盘的工程取舍

A 商业授权(闭源付费)合规,免费仅限非商业场景 ✓ 正确答案
B 性能上限
C 图表类型少
D 无法导出图片
#

2. D3.js(select/enter/exit、scale、轴、力导向图、tree)

A 图表的主题配置
B 数据变化时 DOM 的创建/更新/移除(数据驱动视图) ✓ 正确答案
C 动画缓动
D 坐标轴刻度格式
#

3. Vega-Lite/Vega 声明式语法

A Vega-Lite 是高层声明语法,编译为低层 Vega 规格 ✓ 正确答案
B 两个独立无关的库
C Vega 是 Vega-Lite 的插件
D 二者都是预制图表库
#

4. AntV(G2/G6/L7/S2)的可视化分层

A G2
B G6(图可视化与图分析) ✓ 正确答案
C L7
D S2
#

5. ECharts 5.x/6.x 的能力与配置

A 只用于大数据
B 强制使用 JSON 数据
C 替代 series
D 数据与视觉配置分离,便于数据驱动更新与多系列复用同一数据 ✓ 正确答案
#

6. 地图可视化(Mapbox GL/Leaflet/AMap/OpenLayers)

A AMap 高德(国内合规坐标与 POI/路径服务) ✓ 正确答案
B Mapbox GL(需自托管)
C Leaflet 自绘瓦片
D OpenLayers 仅用于科研
#

7. Apache ECharts Canvas/SVG 渲染器性能切换的工程价值

A Canvas 渲染(批量绘制性能好) ✓ 正确答案
B SVG 渲染
C 两者都不可用
D 禁用渲染
#

8. Deck.gl 与 WebGL 大数据点线渲染的工程价值

A 数据编译为 GPU 属性经实例化批量绘制,视口聚合降低绘制量 ✓ 正确答案
B SVG 逐点绘制
C 使用 DOM 元素
D 每点独立图层
#

9. WebXR Device API 在 AR/VR 网页(immersive-vr/immersive-ar)

A 键盘事件
B 蓝牙手柄
C 屏幕截图
D hit-test(光线求交现实表面) ✓ 正确答案
#

10. Three.js 渲染管线 / ShaderMaterial / 后处理(EffectComposer)

A 完全自定义 GLSL 但需自行处理光照/阴影等系统能力 ✓ 正确答案
B 自动包含全部光照
C 无法使用 uniform
D 只能渲染线框
#

11. ECharts/Chart.js/Recharts/D3 在大数据可视化的工程取舍

A Recharts 直接渲染(SVG 受限)
B Chart.js 默认即可
C ECharts(progressive + sampling 内置)或 D3 + canvas 自建 ✓ 正确答案
D 禁用大数据
#

12. SVG vs Canvas vs WebGL 在仪表盘/地图渲染的工程取舍

A WebGL
B 静态图片
C Canvas 像素拾取
D SVG(元素级事件与样式、无障碍支持) ✓ 正确答案
#

13. Canvas 2D 在实时图表(仪表盘)的脏矩形重绘策略

A 只重绘变化区域,配合 clip 裁剪与静态层缓存,但全图大范围变化时收益有限 ✓ 正确答案
B 每帧都需要清空整个画布并全部重绘
C 只适用于 WebGL 渲染
D 它无法与离屏 canvas 配合使用
#

14. Canvas 2D Path、Transform、Compositing 与 OffscreenCanvas

A Path2D 只能使用一次,无法复用
B Path2D 可缓存复杂路径并重复绘制,OffscreenCanvas 可将渲染迁移到 Worker 避免阻塞主线程 ✓ 正确答案
C OffscreenCanvas 只能在主线程使用
D transform 与 Path2D 无法同时使用
#

15. SVG 在响应式图表与可访问性的天然优势

A 大数据量下渲染性能优于 Canvas
B 矢量无损缩放与 DOM 语义化(可被辅助技术读取、元素级事件) ✓ 正确答案
C 只支持静态图片无法交互
D 无法适配不同屏幕尺寸
#

16. SVG(Path、Symbol、滤镜)与 CSS 集成的复用

A 每个 <use> 都必须重新定义完整路径
B <symbol> 定义一次后可通过 <use> 多处引用,并能用 CSS 统一或按实例定制样式 ✓ 正确答案
C <symbol> 只能用于动画不能用于静态图形
D <use> 无法引用外部 SVG 文件
#

17. Recharts vs visx(Low-level D3 包装)

A 二者完全相同,只是 API 命名不同
B Recharts 不支持 React 18
C visx 只能用于 3D 渲染
D Recharts 是高层声明式组件,visx 是低层可组合的 D3 封装组件,灵活度与开发效率取舍不同 ✓ 正确答案
#

18. Canvas 图表的命中检测/拾取实现,离屏色键 canvas(color key)与空间索引(R-tree/四叉树)的工程取舍

A 需要为每个图元分配唯一颜色并在离屏 canvas 上绘制,再按像素颜色反查图元 ✓ 正确答案
B 它不需要任何额外内存
C 它只能用于曲线图
D 它无法处理鼠标事件
#

19. D3.js 力导向图(Force Simulation)/TreeMap/Sankey 的工程价值

A 展示网络节点间的连接关系
B 渲染 3D 场景
C 展示能量或资金的流向带宽
D 用嵌套矩形面积同时表达层级与数值占比 ✓ 正确答案
#

20. SVG 与 Canvas 在数据可视化(散点图、柱状图)的渲染性能取舍

A SVG(每个点是一个 DOM 节点,节点过多会卡顿)
B HTML <table>
C 静态 PNG 图片
D Canvas(立即模式批量绘制,无 DOM 节点开销) ✓ 正确答案
#

21. D3.js 在声明式数据可视化中的现代应用与边界

A 它是开箱即用的高层图表库,配置即可出图
B 它是底层数据驱动可视化工具,灵活可控但需自行组装组件,常被高层库封装 ✓ 正确答案
C 它只能渲染 SVG 无法渲染 Canvas
D 它不支持数据绑定
#

22. Apache ECharts 在企业级图表的工程价值

A Canvas 渲染结合 progressive 渐进渲染与 sampling 降采样 ✓ 正确答案
B 仅靠 CSS 动画
C 每帧重建整个 DOM
D 服务端渲染所有交互
#

23. Chart.js 在简单图表组件的工程应用与边界

A 复杂定制、高自由度的大数据可视化
B 标准简单图表(折线/柱状/饼图)的快速落地 ✓ 正确答案
C 3D 场景渲染
D 地图与拓扑关系图
#

24. Recharts(基于 React + D3)的现代工程应用

A 强制使用非 React 渲染
B 完全不支持响应式
C 以 JSX 声明图表结构、组合与复用自然,便于 React 生态集成 ✓ 正确答案
D 无法自定义 tooltip
#

25. Observable Plot 在数据探索的现代应用

A 需要手写大量 scale 与坐标轴代码
B 用极简的 marks 声明式 API 快速生成图表,适合数据探索 ✓ 正确答案
C 只能用于 3D 可视化
D 不支持时间序列
#

26. Plotly.js 在科学计算可视化场景的工程价值

A 只支持基础折线图
B 体积最小、性能最差
C 科学图表类型(等高线/3D/流场)与 WebGL 大数据渲染、数据生态联动 ✓ 正确答案
D 无法交互
#

27. ECharts 的 GL 模式在 3D 散点与地理的工程价值

A 无法实现大屏三维效果
B 只支持 2D 折线图
C 需要完全重写渲染管线
D 基于 WebGL 提供 3D 散点/柱状/地图/飞线等能力,复用 ECharts 配置体系 ✓ 正确答案
#

28. Recharts 的自定义组件(Custom Components)

A 重置整个图表库
B 禁用所有交互
C 只能改颜色
D 在图表内部注入自定义渲染,访问内部状态做额外绘制 ✓ 正确答案
#

29. Visx 的 Headless 设计哲学在自定义可视化的工程价值

A 强制预设一种渲染样式
B 无法与 D3 共存
C 只支持 React Native
D 提供可复用计算逻辑并解耦渲染,让开发者完全控制最终渲染 ✓ 正确答案
#

30. 图表库的颜色无障碍与色盲友好的工程实践与现代应用

A 只用红绿区分数据
B 不只依赖颜色,辅以形状、图案、线型、标签等第二通道 ✓ 正确答案
C 颜色越鲜艳越好
D 禁止使用任何颜色
#

31. 时序图表的降采样算法(LTTB、M4)在大数据可视化中的实现与视觉保真度权衡

A 随机丢弃大部分数据点
B 每桶选择一个与趋势线构成最大三角形面积的点,以保留峰值与拐点 ✓ 正确答案
C 只保留每桶的第一个点
D 不进行任何数据压缩
#

32. SVG 的 <foreignObject> 与 HTML Canvas 在富文本(公式、表格)渲染的边界

A Canvas fillText 自动排版
B 无法渲染任何富文本
C 用多个 <text> 手动拼接
D 使用 <foreignObject> 内嵌 HTML 内容 ✓ 正确答案
#

33. WebGPU 的管线状态对象(Pipeline State Object)

A 状态随时可变、更灵活
B 不支持着色器
C 状态在创建时固化并预编译,减少运行时状态切换与编译开销 ✓ 正确答案
D 只能用于 2D 渲染
#

34. WebGPU 的 Compute Shader 在浏览器内的 GPGPU 任务(图像处理、AI 推理)

A 仅用于绘制 3D 网格
B 图像处理(卷积/滤波)与 AI 推理等大规模并行计算 ✓ 正确答案
C 只做 DOM 布局
D 替换所有 CSS 动画
#

35. SVG Path 数据的简化(Douglas-Peucker)

A 在保持形状特征的前提下减少路径点数量,用阈值控制误差 ✓ 正确答案
B 随机删除路径点
C 增加路径点数量
D 只处理闭合曲线
#

36. WebGPU 的 Buffer 内存对齐与 Buffer.usage 在现代 GPU 工程的边界

A 1 字节
B 无需对齐
C 1024 字节
D 16 字节 ✓ 正确答案
#

37. OffscreenCanvas 在 Worker 渲染主线程零阻塞的现代工程价值与 MessageChannel 通信边界

A 让主线程继续绘制该画布
B 把画布控制权转交给 Worker 线程,由 Worker 渲染并合成帧 ✓ 正确答案
C 删除画布
D 只能用于 WebGL 不能用于 2D
#

38. WebGL 的 gl.drawArrays 与 gl.drawElements 在静态几何与索引化几何的渲染性能

A gl.drawArrays 重复存储每个三角形顶点
B gl.drawElements 配合索引缓冲,利用顶点复用节省带宽与着色器开销 ✓ 正确答案
C 完全不使用缓冲区
D 用 CSS 绘制
#

39. WebGPU 在 Chrome/Edge 的 Stable 支持与 WebGL 2.0 的兼容性边界

A 直接报错
B 强制所有浏览器支持 WebGPU
C 通过特性检测降级到 WebGL 2.0(或 WebGL 1/Canvas 2D) ✓ 正确答案
D 无法渲染任何图形
#

40. SVG <symbol> 与 <use> 的图标 Sprite 方案在工程实践的现代价值

A 每个图标都需内联重复定义
B 只能渲染静态图片
C 图标定义一次、多处引用,配合 CSS 实现样式化与主题化,利于打包与缓存 ✓ 正确答案
D 无法控制图标颜色
#

41. Three.js 的 InstancedMesh 与 FrustumCulled 在大量 3D 标记的优化

A 用一次 draw call 绘制大量共享几何与材质的实例,降低 draw call 数量 ✓ 正确答案
B 为每个实例创建独立 Mesh
C 只能绘制单个物体
D 只用于 2D 场景
#

42. Three.js 核心(Scene、Camera、Mesh、Light、Material、Loader)

A Scene 与 Camera
B Light 与 Loader
C 几何体(Geometry)与材质(Material) ✓ 正确答案
D 上色器与纹理
#

43. glTF Draco 压缩与 KTX2 纹理在大型模型的加载优化

A 纹理颜色的亮度
B 光照计算
C 网格几何数据(顶点/索引/法线/UV)的体积与传输 ✓ 正确答案
D 动画帧率
#

44. WebGL 着色器(GLSL)与 Three.js 的 ShaderMaterial 在自定义效果的应用

A 通过 vertexShader/fragmentShader/uniforms 编写自定义着色器实现任意效果 ✓ 正确答案
B 只能使用内置标准材质
C 替代 WebGL 渲染器
D 只用于加载模型
#

45. Regl(函数式 WebGL 包装)、PixiJS(2D WebGL 渲染器)

A 2D 游戏与富交互 2D 场景(场景图、精灵、动画、滤镜) ✓ 正确答案
B 底层函数式 WebGL 数据可视化
C 3D 大型场景渲染
D 服务端渲染
#

46. Babylon.js 的现代 3D 引擎

A 内置物理引擎、GUI、动画、WebXR 与调试工具等完整引擎能力 ✓ 正确答案
B 只提供底层渲染能力
C 不支持 WebXR
D 无法加载 glTF
#

47. @react-three/fiber 与 Three.js 集成的工程价值

A 完全替代 Three.js 的渲染引擎
B 用 React 声明式组件构建 Three.js 场景,接入 React 状态与生命周期 ✓ 正确答案
C 只能渲染 2D
D 不支持动画
#

48. Babylon.js 与 PlayCanvas 在 3D 引擎的工程取舍

A 纯代码驱动、无编辑器
B 不支持 WebGL
C 提供全托管可视化编辑器与低代码工作流,适合快速内容制作 ✓ 正确答案
D 无法多人协作
#

49. Three.js 的 Raycaster 与 OrbitControls 在交互式 3D 图表的应用

A 控制相机旋转
B 从相机发射射线检测与物体的相交,用于点击/悬停拾取 ✓ 正确答案
C 渲染阴影
D 加载纹理
#

50. WebGPU 与 WGSL 在数据可视化的性能边界

A 仅绘制几十个静态柱状图
B 简单 tooltip 交互
C 百万级数据点的实时渲染与 GPU 并行计算 ✓ 正确答案
D 纯 DOM 布局
#

51. GLTF/GLB 模型加载与 PBR 材质

A 纯 lambert 光照
B 仅逐像素平面
C 无光照
D PBR(基于物理的渲染,metallic-roughness 工作流) ✓ 正确答案
#

52. SVG 的 <animateMotion> 沿路径动画与现代 Motion Path CSS 在性能与可控性的取舍

A SVG <animateMotion>(SMIL)
B 图片序列
C 手动逐帧移动
D CSS Motion Path(offset-path/offset-distance),性能与可读性更好 ✓ 正确答案
#

53. WebGPU 的 Bind Group 在着色器资源绑定的现代工程价值

A 每次绑定一个 uniform 变量
B 只能绑定纹理
C 按更新频率分组绑定资源,切换高效、布局显式可预测 ✓ 正确答案
D 与性能无关
#

54. Three.js 的 EffectComposer 在后期处理(Bloom、SSAO)

A 直接修改材质
B 加载音频
C 修改相机
D EffectComposer 配合 UnrealBloomPass 等后期处理 pass ✓ 正确答案
#

55. WebGPU 的 Render Bundle 在录制与回放的工程应用

A 每帧变化的动态数据
B 静态/半静态可复用场景的渲染,减少每帧 CPU 命令编码开销 ✓ 正确答案
C 音频处理
D 网络请求
#

56. Three.js 的 WebGLRenderer 与 WebGPURenderer 的现代取舍

A 兼容所有旧浏览器
B 利用 WebGPU 的计算着色器、更高性能与资源控制 ✓ 正确答案
C 不支持任何着色器
D 只能用于 2D
#

57. WebGPU 在 iOS Safari(iOS 26 起默认支持,iOS 18.2 仅实验性)与 macOS Safari 17+ 的兼容现状

A 默认完全禁用且无法启用
B 仅作为实验性功能(需开启 Experimental Features),iOS 26 起默认支持 ✓ 正确答案
C 与桌面端完全一致
D 永不支持
#

58. 3D 场景的 LOD(Level of Detail)在性能优化的工程应用

A 按距离/视口选择不同细节等级模型,平衡质量与性能 ✓ 正确答案
B 提高所有模型的顶点数
C 只影响纹理颜色
D 增加过绘制
#

59. 3D 可视化的 Shadow Mapping 在真实阴影的工程实践

A 设置 shadow.bias 深度偏移 ✓ 正确答案
B 提高光线亮度
C 删除阴影
D 增加网格顶点
#

60. WebGPU 在 ML 推理(与 ONNX Runtime Web)

A 仅渲染 3D 模型
B 替代所有 DOM 操作
C 处理网络请求
D 用 GPU 加速浏览器内的神经网络推理 ✓ 正确答案
#

61. 3D 场景的 Raycasting 在点击交互(拾取)的工程应用

A Raycaster 从相机发射射线检测与物体的相交 ✓ 正确答案
B 检查屏幕像素颜色
C 遍历所有 CSS 规则
D 监听 DOM dragover
#

62. WebGPU 的 WGSL 着色器在跨平台(Web、Native)

A 每种平台单独写一套语言
B WebGPU 规范统一、WGSL 经后端翻译为各平台 GPU 语言,配合抽象层复用 ✓ 正确答案
C 只能运行在浏览器
D 无法编译