文远知行前端面经 (社招资深)

一面(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. 前端团队有多少人?

你可能感兴趣的:(文远知行前端面经 (社招资深))