2024年前端面试拼图-原理源码，面试题附答案

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

1. JS内存泄漏如何检测？场景有哪些?

1.1 垃圾回收 GC

垃圾回收是一种自动管理内存的机制，它负责在运行时跟踪内存的分配和使用情况，并在不再需要的对象上进行自动内存释放，常用的垃圾回收算法：

标记清除 (Mark-and-Sweep)：最常用的垃圾回收算法，垃圾回收器会从根对象（如全局对象、调用栈）出发，标记所有可以访问到的对象，扫描整个堆内存，清除那些未被标记的对象；

引用计数 (Reference Counting)：通过记录对象的引用次数来判断对象是否可达。当对象的引用次数为零时，该对象被视为垃圾并进行回收。引用计数算法的缺点是难以解决循环引用问题。

JS闭包属于内存泄漏吗？

内存泄漏是指不再需要的对象（非预期的对象）仍然占用内存，导致系统资源浪费和性能下降。严格意义上说闭包并不算内存泄漏，使用闭包是预期相关对象会继续存在在内存中，闭包的数据不能被垃圾回收更合适，因为它依然保持对外部变量的引用。

1.2 JS内存泄漏如何检测？

主要有如下途径：

• 利用浏览器开发者工具，如Chrome DevTools包含 Memory 面板，可以监控内存使用情况、快照内存状态、查看对象分配情况等；
• 借助的第三方工具，如 Heap Profiler 工具可以捕获 JavaScript 堆栈中的快照，并分析对象的分配情况、引用关系等，从而发现潜在的内存泄漏问题；
• 当然也可以在开发过程中手动检测，避免导内存泄漏的情况出现，例如监听时间处理函数未处理、循环引用的存在等。

1.3 至于内存泄漏的场景（Vue为例）

被全局变量、函数引用，组件销毁时未清除

被全局事件、定时器引用，组件销毁时未清除

被自定义事件引用，组件销毁时未清除

扩展：WeakMap WeakSet

WeakMap和WeakSet是JavaScript的内置对象，它们提供了一种存储对象的弱引用的机制，被广泛用于解决内存泄漏和垃圾回收的问题。他们的特点类似：

WeakMap:

• 一种键值对的集合，其中键必须是对象，值可以是任意类型。键是对象的弱引用，即当对象没有其他引用时，垃圾回收机制可以自动清理该键值对（Vue 3的响应系统中也是用了WeakMap这一特性避免内存泄漏）；
• 没有提供遍历方法，也不能获取其大小或键列表；
• 由于键是弱引用，所以 WeakMap 是不可迭代的，也不支持常规的对象方法，如 size、forEach 等；
• 主要用于存储额外的数据或元数据，这些数据与对象的生命周期相关，当对象被销毁时，与之关联的额外数据也会被自动清除。

WeakSet:

• 一种存储对象的集合，其中的对象是弱引用，同样在没有其他引用时，垃圾回收机制可以自动清除对象。 只能存储对象，不能存储原始值；
• 不可迭代，也没有提供查询大小、遍历等功能；
• 主要用于存储一组对象，并且需要确保这些对象不会产生内存泄漏；
• 与 Set 不同，WeakSet 中的对象是弱引用，因此它们不会阻止垃圾回收器销毁这些对象。

2. 浏览器和node.js的事件循环有什么区别？

2.1 浏览器事件循环