文远知行前端面经 （社招资深）

一面（2022年2月21日）：
中间挺多意外的：

1. 自我介绍
2. 介绍一下项目。

根据项目问了以下一些问题：

1. 使用canvas过程中有没有进行一些优化。用了缓存canvas来减少一部分操作步骤，然后问了下如果缓存canvas过多怎么处理？这个没答上来，感觉有必要看一下Fabric的源代码（面试官想让我答LRU，但是每次重绘都要画一次画板，个人觉得做不到）。
2. 然后问我还有没有其他项目要介绍的。我说了一下electron的IM，其中提到消息超过一定数量进行换页处理，保持页数在3页（问我为什么3页，我说因为1页的话，滚动一下又要加载，体验不是很好）。因为消息太多很容易卡。
3. 同时提了一下builder项目里面的静态资源为什么用node处理的原因（因为node不适合处理大片的内存）。

之后就是：

1. 你说一下js的原型，原型链，实例和构造函数之间的关系吧。
2. 了解JS的继承吗？是怎么继承的？
3. 作用域和作用域链，执行上下文和闭包。其中闭包和作用域以及执行上下文有什么关系？
4. 了解common js 和es6的module吗？分别是什么？两者有什么区别？
5. 你理解的模块化是什么？（分隔代码，方便管理。另外减少全局变量和函数命名冲突）。
6. 用过webpack对吧，你理解中的webpack是什么来的？（讲了下webpack是打包器还有AST）
7. 讲一下事件循环吧？宏任务有哪些？微任务有哪些？宏任务和宏任务之间就没有其他东西了吗（答了还有requestAnimationFrame和requestIdleCallback）？这边对于requestAnimationFrame每次都一定会执行不太确定，我答的是dom刷新才执行。
8. 数组和链表的区别
9. vue你比较熟是吧？想问下React和vue你觉得有什么区别？
10. vue你用了这么久，那你觉得它有什么优点和缺点？
11. vue是怎么实现更改数据之后就触发UI更新的？
12. 虚拟dom有什么效果？
13. 你谈到虚拟Dom可以去掉无效的状态，直接到达最终状态。那么如果我确实需要中间的状态呢？(this.$nextTick)
14. vue的diff是怎么样的？复杂度多少？
15. vue中的key有什么作用？如果不用key或者key使用数组的index，会有什么效果？
16. http常用的头部有哪些？
17. 浏览器缓存机制是怎么样的？（协商缓存和强缓存）。
18. 做了两道题：写debounce和合并两个有序链表。

总结就是：
八股文复习不够充分。另外项目的一些点没有突出介绍，例如使用了单例模式，以及出于跨组件通信比较多而设计了时间总线之类的都没有说。

1. 原型链这种东西还是不能很流畅的说出来。
2. 事件循环或许需要复习一下背景还有更细节的一些内容。
3. http有复习但是感觉复习的不够。例如协商缓存之类的。
4. vue的diff算法和key的作用得重新看一下。
5. js为什么出现模块化和两种不同的模块导出方案的差异。

二面（2月24日）：
状态不好，简单题想不出来挂了。

1. 自我介绍 balabala
2. 做一道题（没做出来）,题目如下：

// 编程题： 由'K'（人）和'O'（空地）组成的2D数据，请计算人群的数量。
// 在空地里，人群是通过垂直方向或者水平方向上相邻的人连接而成。
//
// 示例1
// 输入：
// OKKKO
// OKKKO
// OKKKO
// OKKOO
// 输出：1
// 
// 示例2:
// KKOOO
// KOOOO
// OKOKO
// KOOOO
// 输出：4

const data = [
  'OKKKO'.split(''),
  'OKKKO'.split(''),
  'OKKKO'.split(''),
  'OKKOO'.split('')
];

const data1 = [
  'KKOOO'.split(''),
  'KOOOO'.split(''),
  'OKOKO'.split(''),
  'KOOOO'.split('')
];

const data2 = [
  ['O', 'O'],
  ['K', 'K'],
  ['O', 'O'],
  ['K', 'O']
];

function walkGraphic (tdArr, map, x, y) {
  if (map[`${x},${y}`]) {
    return;
  }
  if (tdArr[x][y] !== 'K') {
    return;
  }
  map[`${x},${y}`] = true;
  if (tdArr[x - 1] && tdArr[x - 1][y]) {
    walkGraphic(tdArr, map, x - 1, y);
  }
  if (tdArr[x + 1] && tdArr[x + 1][y]) {
    walkGraphic(tdArr, map, x + 1, y)
  }
  if (tdArr[x][y + 1]) {
    walkGraphic(tdArr, map, x, y + 1);
  }
  if (tdArr[x][y - 1]) {
    walkGraphic(tdArr, map, x, y - 1);
  }
}

function getGroupNums (tdArr) {
  let groupNums = 0;
  const map = {};
  tdArr.forEach((arr, x) => {
    arr.forEach((item, y) => {
      if (item === 'K' && !map[`${x},${y}`]) {
        groupNums += 1;
        walkGraphic(tdArr, map, x, y);
      }
    });
  });
  return groupNums;
}

console.log(getGroupNums(data2));

问一下简单的问题

1. 说一下vue3和vue2的区别
2. worker是什么？service worker是什么？
3. worker和网页其他内容共享内存吗？（因为是线程，应该是共享内存的）
4. grpc是什么协议？grpc协议运行在网络模型第几层？（基于http2，所以应该是应用层）
5. 用过nodejs吗？（写脚本和写过后端）
6. 你用node写过后端，那么请问下你是怎么监控后端的运行情况的？异常监控，api调用，cpu和内存占用率这些。（不会）
7. 项目中为什么有webpack还要用vite?

反问：

1. 前端做什么的？
2. 前端团队有多少人？