# 1. Motion One（基于 Web Animations API） A 时间线功能更强 B 基于 Web Animations API，体积小且动画走合成器线程，适合轻量动效 ✓ 正确答案 C 插件生态更丰富 D 必须配合 React
# 2. GSAP 的 gsap.context() 与 React 生命周期清理 A 卸载时不需要清理 B 清理会导致动画报错 C 只能全局 gsap.killAll D 用 gsap.context() 收集动画并在 effect cleanup 中 revert()，兼容严格模式双调用 ✓ 正确答案
# 3. Lottie 在 React Native 的性能边界与替代方案（Skia、Rive） A Rive 或 React Native Skia，按动效复杂度与设计工具链选择，简单动效用 Reanimated ✓ 正确答案 B 一律用 Lottie C 全部用 CSS D 播放视频代替
# 4. Framer Motion（layoutId、AnimatePresence） A CSS 类名切换 B 共享元素的位置/尺寸投影过渡（列表项 ⇆ 详情页） ✓ 正确答案 C 文本打字动画 D 背景渐变
# 6. position: sticky 边界 在现代组件库的工程价值 A 祖先容器 overflow 非 visible 改变了滚动上下文，或父容器高度不足 ✓ 正确答案 B 元素设置了 z-index C 元素是内联元素 D 页面太短
# 7. Canvas 2D Path2D/OffscreenCanvas 在复杂路径复用与 Worker 离屏的工程价值 A 自动抗锯齿 B 路径对象可复用、可做复杂裁剪与点包含命中检测 ✓ 正确答案 C 替代所有 Canvas 绘制 D 只在 WebGL 可用
# 8. WebGPU 在 3D 场景渲染与 Three.js WebGPURenderer 的应用 A 完全重写 Three 的 API B 只支持计算着色器 C 复用场景图/材质体系，材质经 TSL 生成 WGSL 并映射到 WebGPU 管线，场景可平滑迁移 ✓ 正确答案 D 不兼容 GLTF 模型
# 9. requestAnimationFrame 驱动的 Canvas 动画与粒子系统 A 固定每帧移动 1 像素 B 忽略 delta 直接更新 C 提高 setTimeout 频率 D 用两帧时间差 delta 乘速度计算位移，并 clamp 防止跳变 ✓ 正确答案
# 10. 后期处理、阴影、3D 模型加载（GLTF/GLB） A 增加顶点数 B 每个开阴影的光源都要渲染独立的 shadow map，分辨率与数量需权衡 ✓ 正确答案 C 影响模型加载 D 只影响 CPU 不影响 GPU
# 11. RTCPeerConnection 建立连接的完整流程，信令交换、SDP offer/answer 协商与 ICE candidate 收集交换 A 加密媒体数据 B 认证用户身份 C 交换媒体能力与传输描述（编解码、方向、候选占位），双方达成一致后建连 ✓ 正确答案 D 分配服务器资源
# 13. PIXI.js / Babylon.js / Three.js 在 2D/3D 渲染的工程取舍 A PIXI.js B 纯 CSS 3D C Chart.js D Babylon.js（引擎级能力与工具链最全） ✓ 正确答案
# 14. Canvas 2D 全局状态（globalCompositeOperation） A 每个元素独立设置样式 B 按状态分组绘制并减少状态切换，复杂混合用离屏缓存预合成 ✓ 正确答案 C 大量使用 save/restore D 关闭合成
# 15. ICE/STUN/TURN 在 NAT 穿透中的各自作用，以及 P2P 直连与 TURN 中继的成本与延迟取舍 A relay > srflx > host B 全部相同 C host（本机）> srflx（STUN 反射）> relay（TURN 中继），直连优先、中继兜底 ✓ 正确答案 D 随机选择
# 16. RTCDataChannel 的可靠有序与不可靠（unordered、maxRetransmits/maxPacketLifeTime）模式及各自适用场景 A 默认可靠有序 B 有序但无限重传 C unordered + maxPacketLifeTime/maxRetransmits，容忍丢失追求低延迟 ✓ 正确答案 D 禁用 DataChannel
# 17. getUserMedia 的媒体约束（分辨率/帧率/设备 ID）与 enumerateDevices 设备切换、权限拒绝的处理 A 强制精确匹配，不满足时采集失败，用于 deviceId 精确选择 ✓ 正确答案 B 尽力满足即可 C 表示默认值 D 只能用于帧率
# 18. CSS Animations Level 2 提案（@keyframes 的 composite/timeline-scope）的工程价值 A 时间线反向播放 B 滚动/视口驱动的动画以 CSS 声明，替代 JS 滚动监听 ✓ 正确答案 C 动画随机化 D 自动循环次数
# 19. Scroll-driven Animations 的 animation-range-start/end 与视口驱动滚动 A 页面总滚动百分比 B 动画已播放时长 C 元素自身在滚动容器/视口中的可见进度 ✓ 正确答案 D 鼠标位置
# 20. Lightning CSS 在性能预算与首屏渲染的取舍 A Rust 实现的高速转译/压缩/裁剪，构建性能与体积双优 ✓ 正确答案 B 支持更多 CSS 属性 C 替代 JavaScript D 只能在浏览器运行
# 21. Flex min-width: 0 与现代浏览器一致的工程取舍 A 让元素宽度为 0 B 禁用 flex 布局 C 允许弹性项压缩到 0（突破 min-width: auto 的内容最小尺寸），修复长内容溢出 ✓ 正确答案 D 固定元素宽度
# 22. prefers-reduced-motion 在现代组件库的工程价值 A 禁用全部动画包括焦点指示 B 忽略该偏好 C 降级/缩短装饰动画，保留焦点指示等功能必需动画 ✓ 正确答案 D 仅影响视差
# 23. SDP（会话描述协议）的作用与编解码协商（H.264/VP9/AV1/Opus）的工程要点 A 压缩率最高 B 编码质量最好 C 全平台硬件编解码支持广，通过 fmtp（profile-level-id 等）参数协商实现互操作 ✓ 正确答案 D 延迟最低
# 24. Simulcast 与 SVC 在多人视频会议弱网下的应用与带宽分配 A 发送端同时编码多路独立分辨率流，SFU 按接收端带宽转发其中一路 ✓ 正确答案 B 单路流内分层 C 只编码一路固定流 D 接收端自行放大
# 25. addTrack/replaceTrack 与 transceiver 在动态媒体流管理（静音、切换摄像头）中的协作 A 重新创建 RTCPeerConnection B 先 removeTrack 再 addTrack C 新轨道经 sender.replaceTrack 替换，无需重新协商 ✓ 正确答案 D 只能重启浏览器
# 26. WebRTC 拥塞控制（GCC/transport-cc）与带宽估计的观察手段 A 帧率 B qualityLimitationReason（带宽受限/CPU 受限） ✓ 正确答案 C 候选类型 D 信令耗时
# 27. WebRTC 与 WebSocket/WebTransport 在低延迟场景（实时消息 vs 实时音视频）的取舍 A WebSocket 不支持 TCP B WebRTC 提供媒体采集/编解码管线、JitterBuffer 与拥塞控制等实时媒体能力 ✓ 正确答案 C WebTransport 不能传数据 D 只有 WebRTC 支持 HTTPS
# 28. 用 getStats 监控 WebRTC 的丢包率、RTT、码率与候选类型（candidate type）的工程实践 A packetsLost 直接就是百分比 B packetsLost / (packetsReceived + packetsLost) ✓ 正确答案 C jitter 值 D 帧率倒数
# 29. SFU/MCU 媒体服务器拓扑在大规模实时音视频中的架构与容量取舍 A 服务器重编码质量更高 B 端侧解码压力最小 C 服务器只做选流转发（成本低），支持 Simulcast/SVC 分层与端侧自由布局 ✓ 正确答案 D 不需要服务器
# 30. CSS transition-property 的 all/transform 等的工程取舍 A transition-property 白名单化，尺寸/位移用 transform 实现以走合成器 ✓ 正确答案 B 一律 transition: all C 禁用所有过渡 D 只对颜色过渡
# 32. CSS @keyframes 与 WAAPI（Web Animations API）的协作边界 A WAAPI（Element.animate()）命令式控制，CSS 定义可复用的 keyframes ✓ 正确答案 B 纯 CSS @keyframes C 定时修改 style D 禁用动画
# 33. CSS 物理引擎（弹簧、阻尼）在现代框架（Framer Motion） A 决定动画时长 B 与 stiffness 无关 C 决定位移距离 D 阻尼大小：越大振荡衰减越快、越不弹跳 ✓ 正确答案
# 35. Rive（.riv 文件 + 状态机）作为 Lottie 的现代替代 A 完全兼容 AE 导出 B 文件格式为 JSON C 内置状态机与骨骼/网格变形，动效可响应输入交互且跨端一致渲染 ✓ 正确答案 D 只支持 Web
# 36. Lottie（AE 导出 JSON、前端渲染动画）的场景 A 全部用 SVG 渲染 B 提高 JSON 精度 C 复用实例、延迟加载与可见性控制（暂停不可见动画） ✓ 正确答案 D 使用 WebGL 渲染器
# 37. Framer Motion 的 useMotionValue 与弹簧物理动画 A 值更新更慢 B 只能存字符串 C 无法绑定组件 D 高频交互（拖拽/滚动）动画直接驱动合成器，避免每帧 React 渲染开销 ✓ 正确答案
# 39. JS 动画库经历了哪些版本演进，与 Web Animations API、CSS 动画、Skia 等替代方案相比各自定位是什么 A 全部用 jQuery 动画 B 只用 Skia C CSS 优先（简单动效）+ WAAPI 增强（动态控制）+ 复杂编排用 GSAP 等库 ✓ 正确答案 D 全部禁用动画
# 40. OffscreenCanvas 在动画渲染的并行 A 每帧克隆整个画布给 Worker B 分块任务 + transfer 转移所有权/缓冲，结果经 ImageBitmap 提交上屏 ✓ 正确答案 C Worker 无法访问 Canvas D 所有绘制放主线程
# 41. WebGL 性能瓶颈与 GPU 内存优化 A 每个对象单独 draw 一次 B InstancedMesh 实例化一次调用绘制全部 ✓ 正确答案 C 全部合并为一个纹理 D 使用 CPU 渲染
# 42. Canvas 2D 与 WebGL 在动画渲染的性能与适用场景的工程取舍 A Canvas 2D 逐粒子绘制 B CSS 动画 C SVG 动画 D WebGL/WebGPU 实例化与 GPU 并行处理 ✓ 正确答案
# 43. WebGL 的 requestAnimationFrame 与垂直同步（VSync） A 显示器的刷新率（VSync），并自动在后台节流 ✓ 正确答案 B setTimeout 设置 C 网络速度 D 每帧计算量
# 44. WebGL 上下文丢失（context lost）事件的监听与自动恢复的工程实践 A 继续使用旧纹理 B 无需处理 C 刷新页面 D 重建所有 GPU 资源（着色器/缓冲/纹理），因此需持有源数据并集中重建 ✓ 正确答案
# 45. FLIP 技术（First、Last、Invert、Play） A 用 transform 把元素从最终布局位置"移回"初始视觉位置，使后续动画只有 transform ✓ 正确答案 B 反转动画方向 C 翻转元素内容 D 暂停动画
# 46. transform: translateZ(0)/will-change: transform 的图层提升合成与现代取舍 A 没有效果 B 无差别提升消耗 GPU 内存且增加合成成本，应让浏览器自动提升并按需使用 will-change ✓ 正确答案 C 语法错误 D 只影响 IE
# 47. Canvas 动画 requestAnimationFrame 主线程释放到 Worker（OffscreenCanvas + Worker） A 不能再直接获取其渲染上下文绘制，绘制权在 Worker（或经 ImageBitmap 回传合成） ✓ 正确答案 B 继续正常绘制 C 只能清除画布 D 上下文自动失效需重建连接
# 48. CSS Subgrid 在表单/对话框/Popover 的工程价值 A 定义新的网格轨道 B 子网格继承父网格的轨道定义，实现多层嵌套的对齐 ✓ 正确答案 C 子网格独立计算列宽 D 替代 flex 布局
# 49. Shared Element Transition 在 SPA 与跨视图共享元素的工程价值 A 手写 FLIP 计算 B 新旧 DOM 元素标记相同 view-transition-name，浏览器自动补间位置与尺寸 ✓ 正确答案 C 使用 CSS transition D 播放视频遮罩
# 51. CSS Anchor Positioning 与设计系统令牌（Design Token） A 设置锚点名称 B 固定弹层位置 C 定义空间不足时的回退放置位置（自动换边） ✓ 正确答案 D 控制弹层动画
# 52. SVG SMIL 动画、<animate>、路径动画 Morphing A 任意两条路径都可插值 B 只能用于直线 C 必须使用 JS 计算 D 两个路径的 d 命令结构与点数一致，否则插值异常 ✓ 正确答案
# 53. Pointer Events 统一鼠标/触摸/手写笔的工程价值与兼容性，touch-action 与 passive listener 的关系 A touch-action: none（或 manipulation）声明以禁止浏览器默认手势抢占 ✓ 正确答案 B 监听 mouse 事件即可 C 使用 passive: true 的 touchmove 监听 D 禁用 pointercancel
# 54. HTML5 Drag&Drop 与基于 Pointer Events 自实现拖拽的取舍，原生行为 vs 精细控制 A HTML5 Drag&Drop（触摸不支持且样式受限） B 禁用拖拽 C 用 input range D Pointer Events 自实现（或 dnd-kit 库）获得完整控制与触摸支持 ✓ 正确答案
# 55. 捏合缩放/滑动手势识别与 touch-action、passive listener 的关系及手势冲突解决 A 在 touchmove 中 preventDefault B 禁用滚动 C touch-action: pan-y 声明纵向滚动给浏览器，横向手势由应用识别 ✓ 正确答案 D 只用鼠标事件
# 56. 惯性滚动与橡皮筋效果（overscroll-behavior、-webkit-overflow-scrolling）的实现原理与工程边界 A 禁止弹层滚动 B 弹层滚动容器 overscroll-behavior: contain ✓ 正确答案 C 监听 scroll 事件阻止 D 设置 position: fixed
# 57. 拖拽排序在大量列表项下的性能优化，transform 占位、虚拟列表与 FLIP 技术结合 A 每帧 insertBefore B 被拖项 transform 跟随、其余项只在目标索引变化时用 FLIP 批量过渡 ✓ 正确答案 C 拖拽中禁用动画 D 使用表格布局
# 58. Pointer Events 的 pointercancel/pointerleave 在拖拽中断场景的处理与恢复策略 A 取消拖拽并回滚到初始状态，释放捕获并清理样式与监听 ✓ 正确答案 B 忽略继续监听 C 立即触发放置 D 抛出错误
# 59. 手势识别库（hammer.js）与原生 Pointer Events 手势检测的工程取舍 A 现代手势库（如 @use-gesture）或成熟的 hammer.js 适配，自实现成本高 ✓ 正确答案 B 手写全部识别器 C 只用 hammer.js 旧版 D 放弃触摸支持
# 60. WebGL 动画的着色器（GLSL）复杂度与移动端 GPU 性能的工程取舍 A 增加纹理采样 B 提高精度到 highp C 减少每像素指令与采样、避免动态分支，用烘焙/预处理替代逐像素计算 ✓ 正确答案 D 增加 uniform 数量
# 61. WebGL 的 Instanced Rendering 在大量相似物体动画的工程价值 A 减少顶点数 B 简化着色器 C 提高纹理清晰度 D 一次绘制调用渲染大量同几何体对象（每实例属性经 divisor 缓冲传入） ✓ 正确答案
# 62. WebGL 的 Vertex Buffer Object（VBO） A STATIC_DRAW B DYNAMIC_DRAW（配合 bufferSubData 局部更新） ✓ 正确答案 C 不设 usage D STREAM_DRAW 只适合索引
# 63. WebGL 的纹理压缩（DXT、ETC、ASTC）在移动端内存与带宽的工程价值 A JPEG 直传 B WebP C PNG 无损 D KTX2/Basis Universal（体积小，加载时按平台转码为 DXT/ETC/ASTC） ✓ 正确答案
# 64. WebGL 的 Frustum Culling 在大型 3D 场景的渲染优化工程应用 A 对象与相机的距离 B 对象是否遮挡其他对象 C 对象包围体与视锥六平面的相交测试（视锥外即跳过绘制） ✓ 正确答案 D 对象绘制顺序
# 65. Canvas 2D 在 HiDPI 屏幕的清晰渲染与 devicePixelRatio 适配的工程实践 A 增大 CSS 尺寸 B 使用 SVG C canvas 内部尺寸设为逻辑尺寸 × DPR，CSS 尺寸保持逻辑，绘制时 ctx.scale(dpr, dpr) ✓ 正确答案 D 提高绘图精度
# 66. WebGL 的 Occlusion Culling 在大型场景的现代工程应用 A 每帧先绘制全部对象再查询 B 查询代替视锥剔除 C 上一帧查询结果决定本帧绘制（先渲染遮挡物，查询低细节包围体，按结果绘制） ✓ 正确答案 D 只在 2D 场景使用
# 67. Canvas 2D 的 filter 属性（CSS filter）在 Canvas 滤镜的工程价值 A ctx.filter = 'blur(8px)' 后绘制（GPU 加速、声明式） ✓ 正确答案 B getImageData 手写卷积 C 多次 putImageData D 使用 CSS 动画
# 68. WebGL 与 WebGPU 在着色器动画（GLSL vs WGSL） A 更宽松的类型检查 B 兼容 WebGL1 C 更少的代码 D 计算着色器（workgroup/原子操作）与显式资源绑定模型 ✓ 正确答案
# 69. 触觉反馈（Vibration API）与拖拽反馈 A iOS Safari 不支持 navigator.vibrate，需检测并用视觉反馈降级 ✓ 正确答案 B 只在桌面浏览器可用 C 只能振动一次 D 需要用户付费
# 70. SVG SMIL 动画 vs CSS @keyframes vs Web Animations API 的取舍 A SMIL animateMotion B CSS offset-path（运动路径，合成器执行） ✓ 正确答案 C 逐帧修改 cx/cy D 使用图片序列
# 71. CSS Grid grid-template-areas 在 RTL/LTR 国际化的取舍 A 数字更精确 B 支持更多行列 C 性能更好 D 布局按书写方向自动镜像，无需为 RTL 重写布局 ✓ 正确答案
# 72. Cascade Layers（@layer） 在 RTL/LTR 国际化的取舍 A 以层序声明优先级，替代权重博弈与 !important 扩散 ✓ 正确答案 B 提高样式解析速度 C 自动适配 RTL D 压缩 CSS 体积
# 73. 触摸滚动与拖拽的冲突解决，方向锁定（directional lock）与阈值检测的工程实现 A 随机选择方向 B 首次显著位移的方向（累积 |dx| vs |dy| 比较）锁定手势类型 ✓ 正确答案 C 触摸时长 D 手指数量
