渲染性能与内存泄漏

共 47 题
#

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 时长与堆大小无关