JS高级性能分析专题测试
考察知识点
| 知识领域 | 核心考察点 | 题数 |
|---|---|---|
| 代码分割与懒加载 | Webpack动态导入、React.lazy、prefetch/preload策略 | 3道 |
| 请求合并与缓存策略 | HTTP缓存机制、请求批处理、Service Worker缓存 | 3道 |
| DOM操作优化与重排重绘 | 渲染流水线、读写分离、强制同步布局、合成层动画 | 6道 |
| 性能监控与profiling工具 | Chrome DevTools、Web Performance API、Core Web Vitals | 4道 |
| 内存泄漏检测与优化 | 泄漏场景识别、DevTools内存分析、修复策略 | 4道 |
| 虚拟列表与大数据渲染 | 虚拟列表原理、动态高度处理、滚动定位优化 | 5道 |
| Web Worker多线程优化 | Worker通信机制、线程池设计、Transferable对象 | 5道 |
Web Worker内部抛出的错误会自动传递到主线程的onerror事件中，可以通过监听该事件来处理Worker执行过程中的异常。
虚拟列表的核心性能优势在于：无论数据量多大，DOM节点数量始终维持在可视区域的数量附近，避免了大量DOM节点带来的内存占用和渲染开销。
浏览器渲染流水线中，重排一定会触发重绘，但重绘不一定触发重排。
使用CSS transform和opacity制作动画时，浏览器会为动画元素创建独立的合成层(Composite Layer)，动画变化只在GPU合成阶段处理，完全跳过布局(Layout)和绘制(Paint)阶段。
关于Web性能核心指标，以下哪个说法是正确的？
React.lazy实现组件懒加载时，以下哪个说法是错误的？
Web Worker任务完成后，以下哪种做法是最正确的资源管理方式？
虚拟列表滚动到指定索引位置时，以下哪种方式计算最准确且性能最优？
为减少DOM操作触发重排重绘，以下哪些优化策略是有效的？
使用Chrome DevTools进行性能分析时，以下哪些工具和方法是正确的？
以下哪些场景或代码模式会导致JavaScript内存泄漏？
使用Chrome DevTools分析内存泄漏时，以下哪些方法和技巧是正确的？
关于Webpack的代码分割(Code Splitting)与懒加载策略，以下哪些描述是正确的？
实现高性能虚拟列表(Virtual List)时，以下哪些技术是关键实现要素？
实现支持动态高度的虚拟列表时，以下哪些挑战和解决方案是正确的？
前端资源加载优化需要综合多种策略，以下哪些做法可以显著提升页面加载性能？
关于Web Worker的通信机制与性能优化，以下哪些描述是正确的？
Web Worker适合处理哪些类型的任务？设计Worker线程池时需要考虑哪些因素？
以下哪些DOM操作会触发重排(Reflow)，哪些会触发重绘(Repaint)？请选择所有会触发重排的操作。
关于HTTP缓存策略的配置与优化，以下哪些描述是正确的？
修复JavaScript内存泄漏有多种策略。对于定时器泄漏，应在组件销毁时使用____________清理。对于事件监听器泄漏，使用____________解绑并确保回调函数引用相同(使用____________或保存引用)。对于全局变量累积，使用模块化避免全局污染。对于闭包泄漏，将不再需要的大型数据设置为null释放引用。
浏览器提供了多个性能监测API。使用____________获取高精度时间戳，精度可达微秒级。使用____________和____________自定义标记和测量时间段。使用performance.timing(已废弃)或performance.getEntriesByType('navigation')获取页面加载各阶段时间。使用performance.observe()监听性能条目记录事件。
Web Worker有多种类型。专用Worker(Dedicated Worker)仅能被____________使用。共享Worker(Shared Worker)可被____________同时访问，适合跨标签页通信。Service Worker作为____________拦截网络请求，实现离线缓存和推送通知。Worker可通过inline方式在主线程中内联创建(blob URL)，无需独立文件。Worker脚本加载使用importScripts方法引入外部依赖。
浏览器渲染采用异步更新机制，但某些操作会触发____________。读取____________、____________、scrollTop等布局属性时，浏览器为保证返回值准确，会立即执行待处理的布局计算。优化方法是使用读写分离策略，先批量读取布局属性，再批量修改样式，避免读写交替触发多次重排。
前端请求合并优化有多种策略。对于高频小请求，可使用____________将多个请求合并为一个批量请求发送。对于相同请求的重复调用，使用____________避免重复发送。对于数据更新场景，使用____________先更新本地状态再发送请求，失败时回滚。GraphQL使用查询合并将多个查询组合为单一请求，减少网络开销。
