字节跳动前端一面深度解析：React 原理与浏览器渲染

二、为什么要这么设计

回答思路：这是追问'为什么是 DFS，而不是 BFS'。考察对 React 设计意图的理解。

核心原因：

1. 可中断性：React 需要实现'时间分片'（time slicing），DFS 可以随时暂停和恢复，因为每个节点有明确的'return'指针指向父节点。BFS 需要维护整个层级队列，恢复成本高。
2. 优先级调度：DFS 便于按优先级处理节点，可以优先处理用户交互相关的分支（如输入框所在的子树）。
3. 生命周期对应：组件挂载/更新的生命周期（componentDidMount、useEffect）需要在子树完全处理完后执行，DFS 的'递'阶段（beginWork）和'归'阶段（completeWork）天然匹配这一需求。
4. 内存效率：DFS 只需维护当前路径的节点引用，BFS 需要维护整个队列。

三、DOM 树和 fiber 树的区别

回答思路：从目的、结构、可变性等方面对比。

核心：fiber 树是 React 自己的数据结构，它的设计是为了增量渲染——把渲染任务拆分成多个小任务，分散到多个帧中执行。

四、diff 算法是怎么比较新旧两个树的

回答思路：React 的 diff 算法基于三个假设：

1. 不同类型的元素产生不同的树
2. 开发者可以通过 key prop 暗示哪些子元素是稳定的
3. 只进行同层比较，不跨层比较

比较过程：

1. 节点类型不同：直接销毁旧子树，新建新子树
2. 节点类型相同（DOM 元素）：保留 DOM 节点，更新变化的属性
3. 节点类型相同（组件）：组件实例不变，更新 props，触发生命周期
4. 子节点列表比较：使用 key 进行优化，通过移动、插入、删除操作最小化变更

// 子节点比较核心逻辑（简化）
function reconcileChildren(prevChildren, nextChildren) {
  // 使用 key 建立映射
  const prevMap = new Map();
  prevChildren.forEach(child => prevMap.set(child.key, child));
  const newChildren = [];
  let lastIndex = 0;
  nextChildren.forEach(nextChild => {
    const prevChild = prevMap.get(nextChild.key);
    if (prevChild) {
      if (prevChild.index < lastIndex) {
        // 需要移动
        markMove(prevChild);
      } else {
        lastIndex = prevChild.index;
      }
      // 更新节点
      updateNode(prevChild, nextChild);
      newChildren.push(prevChild);
    } else {
      // 新增节点
      const newFiber = createFiber(nextChild);
      newChildren.push(newFiber);
    }
  });
  return newChildren;
}

五、浏览器渲染阶段（从渲染树到显示）

回答思路：完整流程如下：

布局（Layout）→ 分层（Layer）→ 分块（Tiling）→ 光栅化（Rasterization）→ 合成（Composite）

各阶段说明：

• 布局：计算每个元素的位置和尺寸，生成 Layout Tree
• 分层：根据层叠上下文、transform、will-change 等属性，将页面拆分成多个图层（Layer）
• 分块：将每个图层分成若干图块（Tile），通常是 256x256 或 512x512 大小
• 光栅化：将图块转换成位图（像素信息），GPU 负责执行
• 合成：将各个图层的位图按照顺序合成为最终显示的图像，由 GPU 的合成器（Compositor）完成

注意：最后一步是合成，不是直接显示。

六、为什么光栅化要由 GPU 去做

回答思路：从 GPU 的架构优势出发。

原因：

1. 并行计算能力：光栅化是'将向量图形转换为像素'的过程，每个像素可以独立计算。GPU 有数千个核心，天然适合这种大规模并行任务。
2. 硬件优化：GPU 专为图形处理设计，有专门的纹理映射、抗锯齿、透明度混合等硬件单元。
3. 效率：CPU 做光栅化需要逐像素循环，速度慢；GPU 可以同时处理大量图块。
4. 帧率保障：60fps 需要 16.6ms 内完成一帧，GPU 能保证合成器快速合成。

七、为什么会这样呢（GPU 架构）

回答思路：这是上一题的'追问到底'，考察对 GPU 原理的理解。

GPU 的核心特点：

• SIMD（单指令多数据流）：一条指令控制多个处理单元同时执行相同操作，适合像素处理
• 高吞吐量：GPU 有数千个计算核心，虽然单核比 CPU 慢，但总吞吐量是 CPU 的数十倍
• 内存带宽高：GPU 有专用的显存（VRAM），带宽远超系统内存

八、Webpack 和 Vite 的区别

回答思路：从开发体验、构建方式、生产打包等方面对比。

核心区别：Vite 利用浏览器原生 ESM 支持，开发环境不打包，启动和热更新更快；Webpack 需要在开发环境也打包所有模块。

九、Vite 打包用的什么

回答思路：Vite 开发环境用ESM（原生模块），生产打包用的是Rollup。因为生产环境需要更精细的优化（tree-shaking、代码分割、兼容性处理），Rollup 在这些方面做得更好。

十、ESM 和 CJS 区别

回答思路：核心区别是同步导入和异步导入。

关键点：CJS 的 require 是同步的，在服务器端（Node.js）没问题；ESM 的 import 是异步的，适合浏览器环境。

十一、微任务队列和宏任务队列

回答思路：微任务队列优先级高于宏任务队列，在当前宏任务执行完后、下一个宏任务开始前清空。

十二、事件循环在浏览器和 Node 的区别

回答思路：

Node 事件循环阶段：

1. timers：执行 setTimeout/setInterval 的回调
2. pending：执行上一轮遗留的 I/O 回调
3. idle/prepare：内部使用
4. poll：获取新的 I/O 事件，执行相关回调
5. check：执行 setImmediate 回调
6. close：执行 close 事件回调

十三、Message channel 是什么

回答思路：MessageChannel 是浏览器提供的通信 API，用于在不同执行上下文（如主线程和 Web Worker）之间传递消息，也可以在同一线程的不同任务之间传递。

const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;
port1.onmessage = (e) => console.log(e.data);
port2.postMessage('hello'); // port1 收到消息

在 React 中的作用：React 用它来模拟 requestIdleCallback，实现时间分片调度。因为 setTimeout 有最小 4ms 延迟（嵌套时），不适合高精度调度；MessageChannel 可以做到 0 延迟的宏任务，且不阻塞渲染。

十四、为什么 React 用 MessageChannel 调度，没用 setTimeout

回答思路：

核心原因：

1. setTimeout 有延迟：嵌套的 setTimeout 最小延迟是 4ms，即使写 setTimeout(fn, 0)，实际也会等待至少 4ms。这会让 React 的时间分片颗粒度过粗。
2. MessageChannel 是 0 延迟：通过 MessageChannel 派生的宏任务，可以在下一帧立即执行，没有最小延迟。
3. 优先级调度：React 需要区分高优先级（用户输入）和低优先级（数据更新），MessageChannel 可以配合 requestAnimationFrame 实现精确的优先级调度。
4. 与渲染帧对齐：React 需要在每帧结束前执行低优先级任务，避免掉帧。MessageChannel 能更好地控制时机。

// React 调度器简化逻辑
let scheduledCallback = null;
const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = () => {
  if (scheduledCallback) {
    const callback = scheduledCallback;
    scheduledCallback = null;
    callback();
  }
};
function scheduleCallback(callback) {
  scheduledCallback = callback;
  port.postMessage(null); // 触发宏任务
}

十五、听说过 React 时间分片吗

回答思路：

时间分片（Time Slicing）：React 将渲染任务拆分成多个小任务（每个 fiber 节点是一个任务），每个任务执行一段时间（默认 5ms），然后检查是否需要让出主线程（如是否有用户输入等待处理）。如果需要，就暂停，把控制权交还给浏览器，等下一帧再继续。这保证了页面在高频更新时（如长列表渲染）不会卡死。

十六、JavaScript 是不是单线程的语言

回答思路：

• JavaScript 语言本身是单线程的，它有且只有一个调用栈，一次只能执行一段代码。
• 浏览器环境是多线程的：主线程（JS 引擎 + 渲染）、Web Worker 线程（可运行 JS）、网络线程、定时器线程、GPU 线程等。
• JS 引擎的单线程指执行 JS 代码的线程只有一个，但浏览器通过事件循环和异步 API（Web Worker）提供了并发能力。

十七、用过哪些设计模式

回答思路：常见设计模式：

回答示例：'我在项目中使用过策略模式来处理表单校验。不同字段的校验规则不同（手机号、邮箱、非空），我把校验函数抽象成策略对象，根据字段类型动态选择。这样新增校验规则时不需要修改原有代码，符合开闭原则。'

十八、手撕：同时允许 2 个任务执行的异步调度器

题目：实现一个异步调度器，最多同时执行 2 个任务，任务完成后自动执行队列中的下一个。

class Scheduler {
  constructor(limit = 2) {
    this.limit = limit;
    this.running = 0;
    this.queue = [];
  }

  add(promiseFactory) {
    return new Promise((resolve, reject) => {
      this.queue.push(() => {
        promiseFactory().then(resolve, reject).finally(() => {
          this.running--;
          this.next();
        });
      });
      this.next();
    });
  }

  next() {
    if (this.running < this.limit && this.queue.length) {
      const task = this.queue.shift();
      this.running++;
      task();
    }
  }
}

// 使用示例
const scheduler = new Scheduler(2);
const timeout = (time, order) => new Promise(resolve => {
  setTimeout(() => {
    console.log(order);
    resolve();
  }, time);
});

scheduler.add(() => timeout(1000, '1'));
scheduler.add(() => timeout(500, '2'));
scheduler.add(() => timeout(300, '3'));
scheduler.add(() => timeout(400, '4'));
// 输出顺序：2 3 1 4

十九、手撕：两个有序数组合并成一个有序数组

function mergeSortedArrays(arr1, arr2) {
  const result = [];
  let i = 0, j = 0;
  while (i < arr1.length && j < arr2.length) {
    if (arr1[i] < arr2[j]) {
      result.push(arr1[i]);
      i++;
    } else {
      result.push(arr2[j]);
      j++;
    }
  }
  // 处理剩余元素
  while (i < arr1.length) result.push(arr1[i++]);
  while (j < arr2.length) result.push(arr2[j++]);
  return result;
}

知识点速查表