钉子的生活日记
文章目录

滴滴秋储前端一面（30min）整理笔记（一）

1. 介绍一下你的项目（项目来源、核心功能）

答案

虚拟 DOM Diff 不是做最优树编辑距离，而是做工程上的高效折中。

  1. 先把旧树和新树做同层比较。
  2. 默认认为不同层级的节点不会跨层复用。
  3. 列表场景通过 key 标识稳定节点，减少错误复用和无效移动。
  4. 这样可以把复杂度控制在可接受范围内。

2. 项目里你觉得最有收获、相对复杂的功能点是什么

答案

这题建议挑一个真正有技术深度的点来讲。

  1. 先说为什么这个功能复杂。
  2. 再说你如何拆解问题、做方案取舍。
  3. 最后补上上线效果和复盘。

3. SSE 流式输出是怎么实现的

答案

流式渲染通常是“服务端持续返回分片，前端边收边渲染”。

  1. 服务端按 chunk 或事件流持续输出内容。
  2. 前端通过 EventSource、fetch + ReadableStream 或封装 SDK 持续读取数据。
  3. 每拿到一段内容，就追加到消息状态里，再触发局部更新。
  4. 为了避免频繁重渲染，通常会做分帧刷新、批量合并更新或按 token 缓冲后再刷。

4. JS 是单线程语言，介绍一下事件循环机制

答案

事件循环的主线是：执行一轮宏任务，然后清空微任务队列，必要时进行渲染，再进入下一轮。

  1. 常见宏任务：setTimeout、setInterval、I/O、UI 事件。
  2. 常见微任务：Promise.then、queueMicrotask、MutationObserver。
  3. 所以输出顺序题一般先看同步代码，再看微任务，最后看下一轮宏任务。

5. 常见的宏任务和微任务分别有哪些

答案

常见宏任务有：setTimeout、setInterval、I/O、UI 事件。

常见微任务有：

  1. Promise.then/catch/finally
  2. queueMicrotask
  3. MutationObserver

记忆重点是：微任务会在当前宏任务结束后立刻清空。

6. 浏览器事件循环和 Node.js 事件循环有什么区别

答案

事件循环的主线是：执行一轮宏任务，然后清空微任务队列，必要时进行渲染，再进入下一轮。

  1. 常见宏任务：setTimeout、setInterval、I/O、UI 事件。
  2. 常见微任务：Promise.then、queueMicrotask、MutationObserver。
  3. 所以输出顺序题一般先看同步代码，再看微任务，最后看下一轮宏任务。

7. 什么是执行上下文、执行栈

答案

执行上下文可以理解成 JavaScript 代码执行时所需的一组运行时环境信息。

  1. 里面包含变量、作用域链、this 等。
  2. 执行栈就是这些上下文按调用顺序形成的栈结构。
  3. 函数调用时入栈，执行结束后出栈。

8. 什么是变量提升，变量提升的优缺点是什么

答案

变量提升本质是编译阶段先建立标识符绑定。

  1. var 会提升，并初始化为 undefined。
  2. let 和 const 也会被提升，但处于暂时性死区，声明前不能访问。
  3. 它的优点是语言实现简单，缺点是容易造成理解偏差，所以现代代码更推荐 let/const。

9. JS 如何实现继承，介绍原型和原型链

答案

JavaScript 继承的核心是原型链。

  1. 每个对象都可以通过原型链接到另一个对象。
  2. 访问属性时，如果当前对象没有，就沿原型链向上查找。
  3. 现代项目里最常见的继承写法是 class extends，本质上底层仍然是原型链。

10. JS 数据类型有哪些，基本类型和引用类型区别

答案

JavaScript 常见数据类型包括：number、string、boolean、null、undefined、symbol、bigint，以及引用类型如对象、数组、函数。

  1. 基本类型按值存储。
  2. 引用类型变量里保存的是地址引用。
  3. 这也是为什么对象赋值后，修改一个变量常常会影响另一个。

11. 什么是浅拷贝、深拷贝，深拷贝常用方法有哪些

答案

浅拷贝只复制第一层属性，遇到引用类型时仍然共享同一块内存；深拷贝会递归复制每一层，拷贝后的对象和原对象互不影响。

  1. 浅拷贝常见写法：Object.assign、展开运算符、Array.prototype.slice。
  2. 深拷贝常见写法：structuredClone、递归拷贝、借助库如 lodash.cloneDeep。
  3. JSON 序列化不是完整深拷贝，会丢失 undefined、Symbol、函数、Date、循环引用等信息。
  4. 业务里如果只是做不可变更新，通常优先浅拷贝；只有明确需要彻底隔离引用时才做深拷贝。

12. HTTP1.0 / 1.1 / 2.0 区别是什么

答案

HTTP 版本差异可以这样记：

  1. HTTP/1.0 默认短连接，请求一次连一次。
  2. HTTP/1.1 增加了持久连接、缓存控制、管线化等能力。
  3. HTTP/2 引入多路复用、头部压缩和二进制分帧，重点解决队头阻塞和重复头部开销问题。

13. Node.js 如何操作文件（读文件、写文件）

答案

Node.js 操作文件最常见的是 fs 模块。

  1. 小文件可以用 readFile / writeFile。
  2. 大文件更适合 createReadStream / createWriteStream 做流式处理。
  3. 生产里还要注意异常处理、并发控制和路径安全。

14. 简述 React 的虚拟 DOM Diff 算法原理

答案

虚拟 DOM 本质是用 JavaScript 对真实 DOM 做一层抽象，更新时先比较新旧虚拟节点，再把最少的变更同步到真实 DOM。

  1. 它解决的不是“完全不操作 DOM”，而是降低手写 DOM 更新的复杂度。
  2. 重点价值是跨平台抽象、声明式开发体验，以及用 Diff 策略减少不必要更新。
  3. 真正性能好不好，不只看虚拟 DOM，还和组件拆分、key 使用、渲染粒度有关。

15. 数组中除了一个数字只出现一次，其他都出现三次，找出这个数字

答案

这题常见解法是按位统计。

  1. 统计每一位上 1 出现的次数。
  2. 因为其他数字都出现三次，所以对 3 取模后，剩下的就是目标数字在该位上的值。
  3. 最后把所有位重新组合起来。