# 1. Long Animation Frames(LoAF)API 在长帧的诊断 A LoAF 只统计脚本执行时长 B longtask 条目包含渲染耗时 C LoAF 以帧为单位统计超过 50ms 的脚本与渲染并含归因,比 longtask 更贴近卡顿感知 ✓ 正确答案 D LoAF 无法归因第三方脚本
# 2. Time Slicing/Concurrent Mode React 在大型列表渲染的工程价值 A 并发渲染可以替代虚拟滚动 B transition 会阻塞输入事件 C 并发渲染让非紧急更新可被中断,保障大列表场景的输入响应,节点量问题仍需虚拟滚动解决 ✓ 正确答案 D 时间切片与用户交互无关
# 3. useTransition 与 useDeferredValue 在非紧急渲染的工程价值 A useDeferredValue 用于标记事件更新优先级 B useTransition 会阻塞紧急更新 C useTransition 标记更新为非紧急可中断,useDeferredValue 返回延迟版本的值,两者解耦输入响应与重渲染 ✓ 正确答案 D 延迟渲染不需要视觉反馈
# 4. @tanstack/virtual 的 overscan 与 estimateSize 在动态高度列表的应用 A estimateSize 先估算后测量校正动态高度,overscan 缓冲视口外渲染以平滑滚动,需按场景权衡 ✓ 正确答案 B 虚拟滚动渲染所有行 C overscan 越大性能越好 D 动态高度列表无法虚拟化
# 5. CSS Containment 与 content-visibility 跳过渲染 A content-visibility: auto 跳过视口外元素的渲染并保留占位,需 contain-intrinsic-size 防止滚动跳动 ✓ 正确答案 B content-visibility 会跳过资源加载 C CSS containment 与渲染优化无关 D content-visibility 只对首屏内容有效
# 6. Bundle 体积预算(KB 级别)在 LCP 与 Lighthouse 评分的临界点 A JS 体积经传输、解析、执行影响 LCP 与 Lighthouse 评分,预算按业务价值与设备基线校准而非一味求小 ✓ 正确答案 B JS 体积与性能无关 C Lighthouse 不评估脚本执行时间 D 预算越小一定越好
# 7. 性能预算(Performance Budget)的制定与 CI 阻断 A 性能预算设定后永不调整 B 只看体积预算即可 C CI 无法执行性能门禁 D 预算先测基线再设目标并预留缓冲,经 size-limit/LHCI 在 CI 阻断,超限展示 diff 并走评审治理 ✓ 正确答案
# 8. performance.measure User Timing 在关键路径打点的工程价值 A User Timing 只能测量浏览器内置事件 B performance.measure 为业务关键路径打点,把分析细化到业务动作级并与 RUM 集成 ✓ 正确答案 C mark 只能记录一个时间点 D User Timing 与性能回归无关
# 9. FCP/LCP 的 75 百分位 在现代前端项目的工程价值 A 均值是性能指标的最优统计口径 B p75 与 p50 含义相同 C p75 代表 75% 用户体验达标的底线,兼顾代表性与长尾敏感性,是 CWV 官方判定口径 ✓ 正确答案 D 告警应该使用最大值
# 10. Virtual Scroller(TanStack Virtual / react-virtuoso / @tanstack/react-virtual) A 虚拟滚动只渲染视口内行并模拟总高度,TanStack Virtual 灵活(headless)、virtuoso 自动测量组件化,按需选型 ✓ 正确答案 B 虚拟滚动渲染列表全部 DOM C 虚拟滚动不支持动态高度 D 列表数据变更无需处理
# 11. 用 heap snapshot 与 Comparison 视图定位 detached DOM 树泄漏的完整流程 A 用"基线-复现-对比"快照流程确认 detached 增长,再沿 Retaining Tree 引用链定位泄漏源头修复 ✓ 正确答案 B detached DOM 会被 GC 自动回收 C Comparison 视图只能看数量不能看大小 D detached 节点无法在快照中识别
# 12. 闭包、事件监听、定时器、订阅未释放四类常见泄漏模式的特征与各自排查入口 A 闭包不会造成内存泄漏 B 定时器泄漏与 CPU 无关 C 匿名监听器一定无法泄漏 D 闭包、监听器、定时器、订阅四类泄漏的共同机制是引用未释放,用快照增长识别 + 引用链定位,清理模式预防 ✓ 正确答案
# 13. Allocation instrumentation on timeline(分配时间线)定位持续分配对象的方法 A 分配时间线显示的是对象存活快照 B 分配时间线无法看调用栈 C 分配时间线按时间记录分配与调用栈,定位持续分配热点,与堆快照(存活截面)互补 ✓ 正确答案 D 临时分配不会增加 GC 压力
# 14. scheduler.yield 与 scheduler.postTask 在主任务切片的工程价值 A scheduler.yield 与 setTimeout(0) 完全等价 B postTask 不支持优先级 C scheduler.yield 让出主线程、postTask 按优先级调度任务并支持取消,是比 setTimeout/rAF 更精细的调度原语 ✓ 正确答案 D Scheduler API 在所有浏览器原生可用
# 15. ResizeObserver 与 IntersectionObserver 在性能敏感列表的应用 A IntersectionObserver 回调在主线程同步执行 B IntersectionObserver 驱动懒加载与渲染节流、ResizeObserver 做动态高度测量,组合支撑性能敏感列表 ✓ 正确答案 C ResizeObserver 无法测量高度变化 D scroll 监听比 IntersectionObserver 更高效
# 16. WebGPU 在前端图像处理与游戏渲染的工程价值 A WebGPU 只能用于游戏渲染 B WebGPU 不支持 compute shader C WebGPU 与 WebGL 2 能力相同 D WebGPU 提供计算着色器与现代管线抽象,适合图像处理与游戏渲染,需特性检测并降级到 WebGL ✓ 正确答案
# 17. 长任务切片与主线程释放(scheduler.yield()、Web Worker) A 可中断任务用 scheduler.yield 切片让出、重型纯计算迁移 Worker,按任务规模与交互优先级组合 ✓ 正确答案 B 所有计算都应切片处理 C Worker 可以直接操作 DOM D 切片让出没有调度开销
# 18. 代码分割(route-based、component-level) A 代码分割会让首屏加载更慢 B 路由级与组件级分割按需加载 chunk,配合预取与加载态,粒度按访问频率与体积权衡 ✓ 正确答案 C 分割越细越好 D 动态 import 的路径可以是任意变量
# 19. content-visibility: auto 在长列表渲染跳过的工程价值 A content-visibility 会移除视口外的 DOM B content-visibility: auto 跳过视口外元素的渲染但 DOM 仍在,与虚拟滚动(跳过 DOM)按列表规模组合 ✓ 正确答案 C 使用 auto 后不需要 contain-intrinsic-size D auto 对所有浏览器无差异
# 20. TanStack Virtual 的虚拟滚动 与 React 19 use()/Server Functions 的协作 A use() 必须配合 useEffect 使用 B 虚拟滚动无法配合异步数据 C Server Functions 在客户端执行 D use() 声明式读取异步资源配合 Suspense,Server Functions 提供服务端数据,与虚拟滚动窗口渲染正交协作 ✓ 正确答案
# 21. 合成器动画(transform/opacity)与触发布局/绘制动画的性能差异及图层提升(compositor layer)原理 A 所有 CSS 属性动画开销相同 B 图层越多性能越好 C transform 动画仍触发布局 D transform/opacity 动画由合成器线程在 GPU 处理(不触发布局),will-change 提升图层需谨慎防止图层爆炸 ✓ 正确答案
# 22. 浏览器渲染流水线(Parse HTML、Build DOM、Style、Layout、Paint、Composite) A 渲染流水线为解析、样式、布局、绘制、合成,属性变化会级联触发阶段,优化即降低各阶段成本 ✓ 正确答案 B 流水线各阶段相互独立互不影响 C transform 动画会触发布局 D CSSOM 构建不阻塞渲染
# 23. Layout Thrashing(强制同步布局)的常见场景与避免的工程实践 A 读取布局属性总是零成本 B 动画中读 offsetTop 不会强制布局 C 强制同步布局由读写交替触发,用读写批处理、缓存测量值与 rAF 对齐避免热路径强制布局 ✓ 正确答案 D ResizeObserver 依赖强制同步布局
# 24. FLIP(First/Last/Invert/Play)技术的原理与在布局动画(列表重排、共享元素)优化中的应用 A FLIP 动画全程触发布局 B transform 动画仍触发绘制 C FLIP 的 Last 测量可以任意时机进行 D FLIP 记录首末位置并用 transform 反向过渡,把布局动画转为合成器动画,适合列表重排与共享元素 ✓ 正确答案
# 25. View Transitions API 的性能特征(旧视图快照截图机制)与主线程占用、大页面转场的取舍 A View Transitions 快照零成本 B View Transitions 用新旧视图快照配合合成动画实现过渡,大页面快照成本高,需限制范围或降级 ✓ 正确答案 C 快照由合成器线程完成不占主线程 D 转场动画不影响交互
# 26. will-change 属性在 GPU 合成层提升与内存占用的工程取舍 A will-change 越多性能越好 B will-change 不创建合成层 C will-change 提示浏览器提前提升合成层,避免动画首帧顿挫,但常驻图层耗 GPU 内存需按需使用并及时移除 ✓ 正确答案 D 动画结束应保留 will-change 以便复用
# 27. Web Workers 在 CPU 密集型任务(解析、加密)的工程价值 A Worker 与主线程共享 DOM B CPU 密集的纯计算迁移 Worker 释放主线程,大数据用 Transferable 零拷贝,需任务划分与回退策略 ✓ 正确答案 C postMessage 总是深拷贝成本高 D Worker 数量无限制
# 28. OffscreenCanvas 在 Worker 中绘制与主线程性能优化的现代应用 A OffscreenCanvas 把绘制计算移入 Worker 并直接合成,避免每帧跨线程拷贝,适合图表与游戏渲染 ✓ 正确答案 B OffscreenCanvas 只能在主线程绘制 C Worker 内可以访问 DOM 事件 D 每帧都需要重新传输控制权
# 29. requestIdleCallback 与 scheduler.yield() 在低优先级任务的工程应用 A requestIdleCallback 会立即执行回调 B requestIdleCallback 在空闲时段执行低优先级任务(可中断、timeout 兜底),配合 scheduler.yield 实现忙时让出 ✓ 正确答案 C 空闲回调可以执行长时间任务 D requestIdleCallback 与渲染无关
# 30. 防抖(debounce)与节流(throttle)在高频事件(scroll、resize) A 防抖与节流的执行时机相同 B 节流适合搜索请求 C 防抖合并连续触发取尾部(需 maxWait 兜底),节流固定频率执行,滚动/尺寸场景可用 Observer 替代 ✓ 正确答案 D 高频事件直接绑定处理器即可
# 31. requestAnimationFrame 在动画与渲染同步的工程实践 A rAF 回调在渲染完成后执行 B rAF 在帧渲染前执行并与刷新率同步,动画用时间戳步进、DOM 批处理对齐帧 ✓ 正确答案 C rAF 每帧可以执行多次 D 页面隐藏时 rAF 依然执行
# 32. Main Thread 任务分块(Chunking) A 任务分块会减少总工作量 B 分块后无需再关注长任务 C 块越小调度开销越低 D 任务分块把长任务按时间预算拆块并在块间让出主线程,保障输入与渲染机会 ✓ 正确答案
# 33. JSON.parse 在 Worker 中处理大型 JSON 数据的工程实践 A 大 JSON 在 Worker 内解析并消费避免主线程长任务,按阈值切换、大对象避免回传 ✓ 正确答案 B JSON.parse 在 Worker 中会阻塞主线程 C 字符串可以 Transferable 零拷贝 D 小数据也应强制走 Worker
# 34. Streams API 在流式响应与渐进渲染的工程应用 A Streams 分块消费响应体,支持 SSR 流式与 LLM 流式输出的渐进渲染,拉模式自带背压 ✓ 正确答案 B Streams 只能处理二进制数据 C 流式读取必须等全部数据到达 D reader.cancel 无法中止下载
# 35. SpeedCurve、Calibre 在合成监控的持续集成应用 A SpeedCurve/Calibre 提供指标趋势、版本对比与预算告警,与 CI 门禁及 RUM 形成三层性能监控 ✓ 正确答案 B 合成监控平台只能做单次测试 C 平台监控与 RUM 功能重复 D 合成平台无法多地点测试
# 36. 性能监控指标的采集成本与采样策略,PerformanceObserver buffer 上限与批量上报的工程取舍 A 性能监控应全量采集所有指标 B 核心指标全量、高频数据抽样、浏览器端聚合批量上报,及时消费 buffer 并监控溢出,控制采集成本 ✓ 正确答案 C buffer 溢出不会丢数据 D 上报应每条指标单独请求
# 37. RUM 与合成监控的协同,抽样、维度关联与告警阈值 A RUM 与合成监控数据互相替代 B RUM 管真实分布告警(p75 + 环比)、合成管变更回归(固定阈值),维度口径统一,形成发现-定位闭环 ✓ 正确答案 C 告警阈值应全局统一 D 合成监控不需要维度对齐
# 38. 边缘渲染(Edge Functions)对 TTFB 的影响 A Edge Functions 在边缘节点执行轻逻辑,就近响应缩短 TTFB,但需回源的请求仍受源站影响 ✓ 正确答案 B Edge Functions 运行在源服务器 C 边缘渲染适合所有 SSR 场景 D Edge Functions 有完整的 Node API
# 39. 长会话 SPA 的内存增长基线建立方法与回归检测(多次快照对比、强制 GC 后取样) A 单次快照即可判定长会话泄漏 B 强制 GC 后内存必然归零 C 长会话泄漏用"强制 GC 后多次取样 + 循环净增趋势"建基线,CI 自动化跑场景集按斜率阈值回归检测 ✓ 正确答案 D 内存基线只需建立一次
# 40. 大闭包与字符串拼接的内存影响,以及流式处理(Streams)替代全量缓冲的取舍 A 闭包不持有外部作用域 B 闭包捕获大对象与字符串拼接副本造成内存累积,大数据顺序处理用流式降低峰值,需随机访问才缓冲 ✓ 正确答案 C 字符串拼接没有中间成本 D 流式处理适合所有场景
# 41. Map/Set 缓存无界增长的内存风险与 LRU/容量上限治理 A Map 缓存会自动淘汰旧条目 B 无界缓存导致内存线性增长,用 LRU 容量上限、TTL 过期与弱引用治理并监控命中率 ✓ 正确答案 C WeakMap 无法被 GC 回收 D LRU 能保证数据新鲜
# 42. WebAssembly 在浏览器端计算密集型任务(图像处理、加密) A WASM 可以直接操作 DOM B WASM 与 JS 性能完全一致 C WebAssembly 以接近原生性能执行 CPU 密集任务(图像/加密),需按需加载、线性内存管理与 JS 降级 ✓ 正确答案 D 所有计算都应改用 WASM
# 43. 真实用户监控(RUM)与合成监控的协同 A RUM 数据可复现用于诊断 B RUM 发现真实问题、合成复现诊断归因,统一指标口径形成"发现-复现-定位-验证"闭环 ✓ 正确答案 C 合成监控能反映真实用户分布 D 两通道的阈值语义可以不同
# 44. reportWebVitals 与 Google Analytics/BigQuery 集成的工程价值 A reportWebVitals 只能输出到控制台 B BigQuery 无法处理性能数据 C GA4 无法接收自定义事件 D reportWebVitals 把 CWV 上报 GA4 并经 BigQuery 聚合分析,实现性能与业务维度的关联量化 ✓ 正确答案
# 45. addEventListener/removeEventListener 不配对导致监听器泄漏的排查(EventListeners 面板/heap 中 Listener 对象) A 匿名监听器无法造成泄漏 B heap 快照看不到 listener 对象 C 移除监听器与引用无关 D 监听器未配对使元素与回调互相持有,用 EventListeners 面板与快照引用链定位,AbortController/生命周期清理预防 ✓ 正确答案
# 46. iframe 未销毁与全局变量累积的内存影响及卸载时的清理策略 A 从 DOM 移除 iframe 即可释放全部内存 B 全局变量会被 GC 自动回收 C iframe 卸载需移除节点、断开 contentWindow 引用并销毁内部状态,全局变量累积需显式清理与容量治理 ✓ 正确答案 D 定时器不影响 iframe 释放
# 47. 内存指标与 GC 日志在长任务、卡顿根因分析中的协作 A GC 暂停不会造成卡顿 B GC 长任务由堆增长引起,需结合 JSHeapUsedSize 曲线与分配热点定位,治理重点是减少存活对象与分配压力 ✓ 正确答案 C 卡顿只与业务脚本有关 D GC 时长与堆大小无关