# 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 二者都是预制图表库
# 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 仅用于科研
# 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 提供可复用计算逻辑并解耦渲染,让开发者完全控制最终渲染 ✓ 正确答案
# 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 只处理闭合曲线
# 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 上色器与纹理
# 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 增加过绘制
# 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 无法编译