一面（2022年2月21日）：
中间挺多意外的：
- 自我介绍
- 介绍一下项目。
根据项目问了以下一些问题：
- 使用canvas过程中有没有进行一些优化。用了缓存canvas来减少一部分操作步骤，然后问了下如果缓存canvas过多怎么处理？这个没答上来，感觉有必要看一下Fabric的源代码（面试官想让我答LRU，但是每次重绘都要画一次画板，个人觉得做不到）。
- 然后问我还有没有其他项目要介绍的。我说了一下electron的IM，其中提到消息超过一定数量进行换页处理，保持页数在3页（问我为什么3页，我说因为1页的话，滚动一下又要加载，体验不是很好）。因为消息太多很容易卡。
- 同时提了一下builder项目里面的静态资源为什么用node处理的原因（因为node不适合处理大片的内存）。
之后就是：
- 你说一下js的原型，原型链，实例和构造函数之间的关系吧。
- 了解JS的继承吗？是怎么继承的？
- 作用域和作用域链，执行上下文和闭包。其中闭包和作用域以及执行上下文有什么关系？
- 了解common js 和es6的module吗？分别是什么？两者有什么区别？
- 你理解的模块化是什么？（分隔代码，方便管理。另外减少全局变量和函数命名冲突）。
- 用过webpack对吧，你理解中的webpack是什么来的？（讲了下webpack是打包器还有AST）
- 讲一下事件循环吧？宏任务有哪些？微任务有哪些？宏任务和宏任务之间就没有其他东西了吗（答了还有requestAnimationFrame和requestIdleCallback）？这边对于requestAnimationFrame每次都一定会执行不太确定，我答的是dom刷新才执行。
- 数组和链表的区别
- vue你比较熟是吧？想问下React和vue你觉得有什么区别？
- vue你用了这么久，那你觉得它有什么优点和缺点？
- vue是怎么实现更改数据之后就触发UI更新的？
- 虚拟dom有什么效果？
- 你谈到虚拟Dom可以去掉无效的状态，直接到达最终状态。那么如果我确实需要中间的状态呢？(this.$nextTick)
- vue的diff是怎么样的？复杂度多少？
- vue中的key有什么作用？如果不用key或者key使用数组的index，会有什么效果？
- http常用的头部有哪些？
- 浏览器缓存机制是怎么样的？（协商缓存和强缓存）。
- 做了两道题：写debounce和合并两个有序链表。
总结就是：
八股文复习不够充分。另外项目的一些点没有突出介绍，例如使用了单例模式，以及出于跨组件通信比较多而设计了时间总线之类的都没有说。
- 原型链这种东西还是不能很流畅的说出来。
- 事件循环或许需要复习一下背景还有更细节的一些内容。
- http有复习但是感觉复习的不够。例如协商缓存之类的。
- vue的diff算法和key的作用得重新看一下。
- js为什么出现模块化和两种不同的模块导出方案的差异。
二面（2月24日）：
状态不好，简单题想不出来挂了。
- 自我介绍 balabala
- 做一道题（没做出来）,题目如下：
// 编程题： 由'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));
问一下简单的问题
- 说一下vue3和vue2的区别
- worker是什么？service worker是什么？
- worker和网页其他内容共享内存吗？（因为是线程，应该是共享内存的）
- grpc是什么协议？grpc协议运行在网络模型第几层？（基于http2，所以应该是应用层）
- 用过nodejs吗？（写脚本和写过后端）
- 你用node写过后端，那么请问下你是怎么监控后端的运行情况的？异常监控，api调用，cpu和内存占用率这些。（不会）
- 项目中为什么有webpack还要用vite?
反问：
- 前端做什么的？
- 前端团队有多少人？
