快手秋招二面

自我介绍。
NodeJS 里的事件循环。
讲一讲 Node 中的 stream 概念。
📌 回答
stream 是处理大数据的核心概念，允许以分块的方式逐步处理数据，而不必等到一次性将整个数据全部加载到内存中，从而大幅度提升性能并降低内存占用。
- stream 的核心特点包括分块处理、非阻塞、管道化。
- stream 的基本类型包括 Readable、Writable、Duplex、Transform。分别用来分块读取、分批写入、双工通信、数据转换。
- 应用场景包括大文件读写、网络数据传输、数据转换、日志处理等。
介绍 V8 引擎。
📌 回答
V8 是 Goolge 开发的开源 JS 引擎，主要用于 Chrome 和 Node 环境，负责将 JS 代码编译为机器码执行。它以高性能著称，是现代前端和 Node 开发的核心基础设施之一。
- 核心特点包括 JIT、高效内存管理、单线程执行模型。
- 核心组件包括解析器、解释器、编译器、垃圾回收器。其中，解析器将 JS 源代码转换为 AST，现代 V8 采用惰性解析策略，对于未立即执行的的代码制作部分解析；解释器将 AST 转换为字节码，并记录代码执行信息，为后续优化编译提供数据；编译器针对热点代码，基于解释器收集的类型信息，将字节码编译为高度优化的机器码，显著提升执行速度。期间如果类型变化，会触发优化并回退到上一阶段。
- V8 对 JS 生态的影响包括推动 ES 新特性发展、赋能 Node 开发、启示开发人员优化性能。
讲一下 Webpack 的构建流程。
Loader 和 plugin 的区别。
怎么样判断一个元素是否在可视区域内？
如何减少首屏加载时间？
useCallback 和 useMemo 的区别。
Flex 和 Grid 的区别。
研究过 GPU 加速吗？
AI 开发你参与了哪些工作？采用什么大模型？编写过 Agent 吗？
知道哪些鉴权方式，谈一谈你对鉴权机制的理解。
对工程化建设的了解，各自解决了什么问题？
什么是中间件？什么是 AOP？具体各自如何使用？
数组拍平去重并排序。

🔍 展开代码

1.js

const arr = [6, 7, [3], [[4, 5], 2], [[[1]]]];

function deal1(arr, depth = 1) {
  const flatten = arr.flat(depth);
  const unique = [...new Set(flatten)];
  const sorted = unique.sort((a, b) => a - b);
  return sorted;
}

function deal2(arr, depth = 1) {
  return [...new Set(arr.flat(depth))].sort((a, b) => a - b);
}

function deal3(arr, depth = 1) {
  const result = [];

  function insert(val) {
    // 二分查找插入位置
    let left = 0,
      right = result.length;
    while (left < right) {
      const mid = Math.floor((left + right) / 2);
      if (result[mid] < val) left = mid + 1;
      else right = mid;
    }
    if (result[left] !== val) result.splice(left, 0, val); // 去重
  }

  function dfs(a, d) {
    for (const item of a) {
      if (Array.isArray(item) && d > 0)
        dfs(item, d - 1); // 控制深度
      else insert(item);
    }
  }

  dfs(arr, depth);
  return result;
}

console.log(deal1(arr, 1));
console.log(deal2(arr, 2));
console.log(deal3(arr, Infinity));

手写红绿灯效果。

🔍 展开代码

2.js

const red = () => console.log("red");
const green = () => console.log("green");
const yellow = () => console.log("yellow");

function light(type) {
  const map = {
    red: [red, 2],
    green: [green, 3],
    yellow: [yellow, 1],
  };
  const fn = map[type][0];
  const wait = map[type][1] * 1000;
  return new Promise((resolve) => {
    setTimeout(() => {
      fn();
      resolve();
    }, wait);
  });
}

async function start() {
  Promise.resolve()
    .then(() => light("red"))
    .then(() => light("green"))
    .then(() => light("yellow"))
    .finally(() => start());
}

console.log("light starting...");
start();

有没有用一些新技术解决过一些技术挑战？
「反问」业务重心是否在动画等移动端开发？
「反问」对于校招看重的个人因素？
「反问」全栈业务的发展方向？

快手秋招二面 ​

快手秋招二面