全部学科
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
Python全栈
python
NodeJS全栈
nodejs
通用技术
redis git docker nginx mysql zookeeper rabbitmq
Web前端
TypeScript vue CSS HTML javascript pinia vite
GO后端
golang gorm gin
小程序首页
JS / 专题
📝 1 篇文章 20 道配套习题

JS高级性能分析

专题说明

本专题系统讲解JavaScript高级性能优化技术，从加载优化、渲染优化、计算优化到监控分析全方位覆盖，帮助开发者识别性能瓶颈并实施针对性优化策略。

学习目标

  1. 掌握代码分割与懒加载策略，优化首屏加载性能
  2. 理解浏览器渲染原理，掌握DOM操作优化技巧
  3. 掌握Core Web Vitals等性能指标监控与分析方法
  4. 掌握虚拟列表等大数据渲染优化技术
  5. 理解Web Worker多线程优化原理与应用场景
  6. 掌握内存泄漏检测与优化方法

学习内容

  • 代码分割与懒加载策略
  • DOM操作优化与重排重绘
  • 性能监控与profiling工具
  • 虚拟列表与大数据渲染
  • Web Worker多线程优化
  • 内存泄漏检测与优化

学习建议

  1. 先理解浏览器渲染原理，再针对性优化
  2. 使用DevTools等工具分析实际性能瓶颈
  3. 结合实际项目场景选择优化策略
  4. 性能优化需权衡成本，避免过度优化

📝 发现内容有误？点击此处直接编辑

📝 配套习题（20 题）

1
多选题

关于Webpack的代码分割(Code Splitting)与懒加载策略，以下哪些描述是正确的？

A

使用import()动态导入语法可以实现按需加载，Webpack会自动将动态导入的模块拆分为独立chunk

B

SplitChunksPlugin默认配置会对所有异步chunk进行公共模块提取

C

prefetch预加载会在父chunk加载完成后静默加载，不影响主流程执行

D

preload预加载会并行请求，必须在父chunk依赖之前完成加载

E

魔法注释/* webpackChunkName: "name" */可以为chunk命名，便于调试和追踪

F

动态导入的模块会被Tree Shaking优化，移除未使用的导出

2
单选题

React.lazy实现组件懒加载时，以下哪个说法是错误的？

A

React.lazy只能用于default export的组件，不能用于named export

B

懒加载组件必须包裹在Suspense组件内，否则会报错

C

React.lazy返回的组件在加载失败时会触发Suspense的fallback

D

React.lazy可以在组件内部的条件语句中动态调用

3
多选题

关于HTTP缓存策略的配置与优化，以下哪些描述是正确的？

A

Cache-Control: max-age=31536000配合文件名哈希可以实现长期强缓存

B

ETag相比Last-Modified能更精确判断资源变化，但计算成本更高

C

Cache-Control: no-cache表示不缓存资源，每次都必须请求服务器

D

Service Worker可以拦截请求并实现自定义缓存策略，支持离线访问

E

stale-while-revalidate策略允许使用过期缓存同时后台更新，减少用户等待

F

Vary头指定缓存键依赖的请求头，如Vary: Accept-Encoding用于区分gzip/br版本

4
填空题

前端请求合并优化有多种策略。对于高频小请求，可使用__________将多个请求合并为一个批量请求发送。对于相同请求的重复调用，使用________避免重复发送。对于数据更新场景，使用________先更新本地状态再发送请求，失败时回滚。GraphQL使用________将多个查询组合为单一请求，减少网络开销。

5
多选题

以下哪些DOM操作会触发重排(Reflow)，哪些会触发重绘(Repaint)？请选择所有会触发重排的操作。

A

修改元素的width、height、margin、padding等几何属性

B

修改元素的color、background-color、visibility属性

C

添加或删除DOM节点

D

修改元素的transform、opacity属性

E

读取offsetWidth、offsetHeight、scrollTop等布局属性

F

修改元素的position属性从static改为fixed

6
多选题

为减少DOM操作触发重排重绘，以下哪些优化策略是有效的？

A

使用DocumentFragment进行批量DOM节点插入

B

将需要频繁操作的元素设置为position: fixed或absolute脱离文档流

C

使用CSS transform代替left/top进行位移动画

D

使用FastDOM模式，将读写操作分别收集到两个队列中批量执行

E

使用Object.freeze冻结DOM对象防止意外修改

F

使用will-change: transform提前告知浏览器元素将发生变化

7
判断题

浏览器渲染流水线中，重排一定会触发重绘，但重绘不一定触发重排。

A

对

B

错

8
填空题

浏览器渲染采用异步更新机制，但某些操作会触发____________。读取________________________、_______________________、_________等布局属性时，浏览器为保证返回值准确，会立即执行待处理的布局计算。优化方法是使用________策略，先批量读取布局属性，再批量修改样式，避免读写交替触发多次重排。

9
多选题

使用Chrome DevTools进行性能分析时，以下哪些工具和方法是正确的？

A

Performance面板可以记录页面加载、脚本执行、渲染等完整生命周期，生成火焰图分析

B

Memory面板的Heap Snapshot可以捕获内存堆快照，对比两个快照可定位内存泄漏

C

Coverage面板可以分析JS和CSS的执行覆盖率，找出未使用的代码

D

Lighthouse可以生成性能报告，包含FCP、LCP、TTI等核心性能指标

E

Performance面板的Main线程火焰图中，红色标记表示Long Task超过50ms

F

Network面板的Timing瀑布图显示TTFB、Content Download等各阶段耗时

10
单选题

关于Web性能核心指标，以下哪个说法是正确的？

A

FCP(First Contentful Paint)测量的是页面首次渲染任何文本、图像或canvas的时间

B

LCP(Largest Contentful Paint)的合格阈值是小于4秒，否则需要优化

C

FID(First Input Delay)测量的是用户首次交互到页面响应的累计时间总和

D

CLS(Cumulative Layout Shift)值为0表示没有布局偏移，是最理想的分数

11
多选题

以下哪些场景或代码模式会导致JavaScript内存泄漏？

A

未清理的setTimeout/setInterval定时器

B

在全局对象(window/global)上添加的属性

C

使用WeakMap存储的键值对

D

React组件未在useEffect中清理订阅和事件监听器

E

闭包意外引用了大型数据结构且长期存活

F

使用detachEvent或removeEventListener正确解绑的事件监听器

12
多选题

使用Chrome DevTools分析内存泄漏时，以下哪些方法和技巧是正确的？

A

使用Heap Snapshot功能，对比操作前后两个快照，找出新增但未回收的对象

B

在Allocation Timeline中观察蓝色柱状图(活跃对象)，分析哪些分配未被释放

C

使用Allocation Sampling按函数统计内存分配，定位高频分配的代码位置

D

在Heap Snapshot中查看Distance列，距离GC根越远的对象越不容易被回收

E

在Heap Snapshot中查看Retained Size，表示对象及其引用树占用的总内存

E

使用Separating DOM检查分离的DOM节点(Detached DOM nodes)是否存在泄漏

13
填空题

修复JavaScript内存泄漏有多种策略。对于定时器泄漏，应在组件销毁时使用________________________清理。对于事件监听器泄漏，使用___________________解绑并确保回调函数引用相同(使用________或保存引用)。对于全局变量累积，使用______避免全局污染。对于闭包泄漏，将不再需要的大型数据设置为______释放引用。

14
多选题

实现高性能虚拟列表(Virtual List)时，以下哪些技术是关键实现要素？

A

只渲染可视区域内的列表项，视口外的项目不渲染

B

使用绝对定位或transform为每个列表项计算位置

C

使用固定高度的列表项简化滚动位置计算

D

使用IntersectionObserver实现滚动位置的精确检测

E

添加缓冲区(预渲染视口外若干项)避免滚动时出现白屏

F

使用requestAnimationFrame优化滚动事件处理，避免抖动

15
多选题

实现支持动态高度的虚拟列表时，以下哪些挑战和解决方案是正确的？

A

动态高度列表需要维护位置映射表(positionMap)，记录每个项的偏移和高度

B

滚动到特定项时，需要累加之前所有项的高度来计算偏移位置

C

使用二分查找在positionMap中快速定位scrollTop对应的列表项索引

D

新渲染项的实际高度可能与预估不符，需要更新映射表并重新计算位置

E

使用预估高度策略，未渲染项使用平均高度估算，渲染后更新实际值

F

动态高度虚拟列表的总高度无法准确计算，只能使用预估值

16
判断题

虚拟列表的核心性能优势在于：无论数据量多大，DOM节点数量始终维持在可视区域的数量附近，避免了大量DOM节点带来的内存占用和渲染开销。

A

对

B

错

17
多选题

关于Web Worker的通信机制与性能优化，以下哪些描述是正确的？

A

Worker与主线程通过postMessage传递消息，默认数据会被结构化克隆

B

使用Transferable对象(如ArrayBuffer)可以零拷贝传输，避免克隆开销

C

SharedArrayBuffer允许多线程共享同一块内存，但需要跨域隔离环境

D

Worker内部可以使用DOM API操作页面元素

E

使用MessageChannel创建独立通信管道，实现Worker之间的直接通信

F

主线程与Worker的消息传递是异步的，大量频繁通信可能造成消息队列堆积

18
多选题

Web Worker适合处理哪些类型的任务？设计Worker线程池时需要考虑哪些因素？

A

大量CPU密集计算(如数据分析、图像处理、加密解密)

B

复杂DOM操作和UI渲染更新

C

WebAssembly模块中的高性能计算

D

长时间运行的阻塞操作(如大文件解析、JSON解析)

E

线程池设计需要考虑Worker创建成本，预创建固定数量Worker复用

F

线程池任务分发需要考虑Worker的当前负载状态，避免任务分配不均

19
填空题

Web Worker有多种类型。专用Worker(Dedicated Worker)仅能被__________使用。共享Worker(Shared Worker)可被________同时访问，适合跨标签页通信。Service Worker作为__________拦截网络请求，实现离线缓存和推送通知。Worker可通过__________在主线程中内联创建(blob URL)，无需独立文件。Worker脚本加载使用_____________方法引入外部依赖。

20
判断题

Web Worker内部抛出的错误会自动传递到主线程的onerror事件中，可以通过监听该事件来处理Worker执行过程中的异常。

A

对

B

错

← 上一个专题 JS设计模式与架构思想
下一个专题 → JS高级语法与特性

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？
小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库