分享我所经历的"金三银四"，以及我被问到的135道面试题~
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。
金三银四还存在吗？
“金三银四”在今年还存在吗？我觉得还存在，但是今年确实是比以往难一些了，体现在几个方面：
- 1、简历初筛通过率降低
- 2、面试成功率降低
- 3、薪资水平涨幅不大
这几年大环境比以前差，我看 Boss 上就能很好地体现这一点，主要体现在
- 1、大部分都要 3-5 年的，以前 1-3 年很多的，但是现在变得比较少了，也就是年限越来越重要了
- 2、招聘的多数为中/高级前端工程师，也就是初级前端工程师这一级别压力更大了
- 3、薪资涨幅不大，毕竟根本不用担心招不到人
面试之旅
我是三月份开始面试的，差不多面了十几家公司，因为有些公司的需要一面二面三面的，所以大大小小面试次数也差不多有接近 30 次，由于我现阶段还不考虑去那种小公司，所以基本就是面这几个类型的公司：
- 1、互联网大厂
- 2、金融类大公司
- 3、潜力型公司
- 4、大厂旗下子公司
整体来说，面试的难度还是偏上的，因为现在的公司招聘越来越注重知识广度了，所以你在准备八股文的同时，也需要多学一些其他东西，比如 CICD、单元测试、工程化、算法、设计模式等等，并且现在的面试官也是越来越注重项目了，会问你非常多的项目，以及场景题~
某大型金融公司
这是一家比较大的金融公司，主要做的是一些金融系统，主要技术栈是 Vue、Angular，招的是进去做基础建设的，面试官人也不错，在问八股文的同时，也会多跟你聊聊你所做的一些项目，并会为你讲解公司现阶段需要做的东西有哪些，非常棒！
一面（时间很短）
- 1、Vue通信方式有哪些？
- 2、React通信方式有哪些？
- 3、Vue3新在哪里？优化了什么？
- 4、设计模式在项目中的应用场景？
- 发布订阅模式
- 装饰器模式
- 适配器模式
- 策略模式
- 5、负责过哪些大型项目？负责什么模块？
- 6、Vue和React的区别？
- 7、一个登录页功能，你觉得需要注意哪些点？
二面
- 1、自我介绍
- 2、做过哪些大型项目，负责哪些模块？
- 3、做过哪些性能优化？
- 4、并发控制是如何做的？
- 5、合并接口时需要考虑什么？
- 6、怎么做全局按钮取消请求功能的？
- 7、sourceMap打包后存放位置？
- 8、让你设计一个错误监控系统，你怎么设计？
- 9、错误监控推送是怎么做的？
- 10、对CI/CD的理解？你们团队中怎么去用？
- 11、说说你做的这个“xxxxxx”功能
- 12、客户端的更新提示你是怎么做的？
- 13、设计模式在你项目中的应用场景？
- 14、为啥选Qiankun？不能iframe？
- 15、写过单元测试吗？先写单测还是先写代码？
- 16、最近学了哪些新技术？
某大型硬件公司
技术栈主要是 React + Vue + Electron，但是没问很多框架层面的东西，反而是更多问你项目的东西以及工程化相关的问题。一面面试官比较和蔼，二面面试官比较犀利，很注重你项目中做过哪些难点，会狂问你这个问题，并且会考你算法、逻辑、设计模式的一些场景题难度不低哦
一面
- 1、项目做了什么亮点？
- 2、改过哪些库的源码？
- 3、错误监控怎么做的？
- 4、Sentry是怎么做到错误监控的，原理是什么？
- 5、对Electron的了解？
- 6、网络连通性的优化是怎么做的？
- 7、如何控制请求并发？
- 8、Eggjs和Nestjs的区别？
- 9、说一下洋葱模型，有什么案例？
- 10、大文件上传怎么做到暂停、续传
- 11、设计模式在项目中的应用？
- 12、看过哪些好的设计，从中学到啥？
- 13、发布订阅模式的应用？
- 14、Vite和Webpack对比？
- 15、Vite为什么快？原理？
- 16、微前端原理是什么？怎么做隔离的？
二面
- 1、说说你做过最复杂的功能？
- 2、做过哪些性能优化？
- 3、怎么界定性能好和性能差？
- 4、Vite为什么比Webpack快？原理？
- 5、Vite部署时遇到哪些问题？
- 6、近期看过哪些新技术？
- 7、算法题，都是一些leetcode的题
- 8、设计模式题，考策略模式的题
- 9、逻辑题，4个球怎么测出哪个最重？忘了~
某获得融资的潜力型公司
这是一家潜力型公司，获得大融资，主要技术栈是 Vue + React，一面面试官是前端负责人，比较注重基础，狂问一些基础问题，JavaScript、TypeScript、Vue、React 都问，问了超级多问题。二面面试官是团队负责人，是一个985大学的计算机博士，比较注重观察你的思维，以及计算机基础。老实讲，我计算机基础挺一般的~
一面
- 1、自我介绍
- 2、说说你做的比较有亮点的项目
- 3、你做的 XXX 业务的原理是什么？怎么解析的？
- 4、你做的 XXX 业务是怎么实现的？
- 5、Vue 对象新增属性不更新问题
- 6、为什么 Vue 更新数据不能拿到最新DOM
- 7、为什么 nextTick 可以获取最新 DOM
- 8、nextTick 原理
- 9、Vue 怎么做到数据更新去更新视图的
- 10、Vue router几种模式
- 11、JS 的执行机制？
- 12、React 父级获取子级元素的方式
- 13、React 父级获取子级的数据的方式
- 14、为什么可以直接获取 Antd 的 Ref
- 15、useMemo 和 useCallback 的区别
- 16、React 组件如何根据 props 决定要不要更新
- 17、React 的 Fiber？
- 18、Vue3 对比 Vue2
- 19、tree-shaking 的原理？
- 20、Webpack 打包过程原理？
- 21、Vue 文件是怎么被解析的？
- 22、Vite 对比 Webpack
- 23、业务完全不一样，怎么转变
- 24、有没有系统学习过一个东西
- 25、学习的途径是什么？看书多吗？
- 26、输入URL到渲染的过程？
- 27、网络优化怎么做的？
- 28、HTTP缓存的应用？详细说说
- 29、强缓存存在哪？怎么决定的？
- 30、怎么提高代码质量？具体措施？
- 31、有什么想问的？
二面
- 1、你们的产品包含了什么端？
- 2、怎么解决各个端展示不同功能？
- 3、设计模式：适配器模式在项目中的应用？
- 4、HTTP2新在哪里？
- 5、如果让你做头部压缩，你会怎么做？
- 6、有没有系统学习一个东西？
- 7、应用层 or 底层？
- 8、说说你做的比较有两点的两个项目
- 9、你们产品有什么优势？凭什么成为国内行业 No.1？
- 10、说说有哪些请求 Header，有什么用？
- 11、大文件上传的请求头
- 12、平时除了开发，还研究其他吗？
- 13、Vue优势在哪？为啥很多人选它？
某互联网公司
技术栈是 React，比较注重考验你的思维能力和学习能力吧~
一面
- 1、简历项目问询 - 细节
- 2、垂直水平居中
- 3、一个简单请求的header会有什么字段
- 4、map、filter、reduce 都怎么用？
- 5、Symbol有了解过过吗？
- 6、ES5继承、ES6类继承，静态方法？
- 7、Promise 如何做超时控制？
- 8、DFS 找节点
function depthFirstSearchNoRecursion (target) {
const res = [];
const stack = target.slice();
// console.log(stack)
while (stack.length > 0) {
const node = stack.shift(); // 最上层节点出栈
res.push(node.id);
// 如果该节点有子节点，将子节点存入栈中，继续下一次循环
const len = node.children && node.children.length;
for (let i = len - 1; i >= 0; i--) {
stack.unshift(node.children[i]);
}
}
return res;
}
- 9、Node有什么特性，适合用来做什么？
- 10、midway对比egg有什么优势？
- 11、typescript 有没有实践过？
- 12、平时有用什么设计模式吗？
- 13、平时打包工具 - Webpack 相关
- 14、你有没有哪些我没问到你想说的？
- 15、缓存相关，cdn 缓存处理？
- 16、你有什么想问的？
二面
- 1、压力面，质疑观点？
- 2、拍平数组
const flatten = (list, level = +Infinity) => {
// ...
};
const array = [1, [2, [3, 4, [5]], 3], -4];
const list1 = flatten(array);
const list2 = flatten(array, 2);
console.log(list1); // [1, 2, 3, 4, 5, 3, -4]
console.log(list2); // [1, 2, 3, 4, [5], 3, -4]
- 3、Promise
const myPromise = val => Promise.resolve(val);
const delay = duration => {
// ...
};
myPromise(`hello`)
.then(delay(1000))
.then(val => console.log(val)); // 一秒之后输出 hello
三面
- 1、项目细节询问
- 2、Vue 源码有读吗 - 响应式原理，nextTick
- 3、最近有没有研究什么新技术？
- 4、项目优化有哪些实践？
- 5、业务方面优化
- 6、请求方面优化
- 7、打包方面优化
- 8、架构方面优化
- 9、V8 如何执行一段代码？
- 10、72-编辑距离
- 11、226-翻转二叉树
- 12、性能优化的实践？
- 13、有其他想问的吗？
某大型软件公司
这是我面试的第一家公司，面试官一上来就说：我这个人不喜欢问八股文，你可要小心了哦~
我：大佬，能不能放放水啊~
接下来分享一下面试题，以及回答的思路吧~
1、React和Vue的缺点是什么？
面试官反其道而行！不问优点，居然问缺点！所以我苦思冥想，觉得应该从这几个角度去回答：
- Vue2的响应式缺点
- Vue3怎么解决响应式缺点的
- Vue和React的diff算法哪个高效，哪个相对低效
- Vue2的Option Api有哪些缺点？
- Vue3的Composition Api怎么去解决这个缺点？
- React的门槛更高，比较难学（只是相对于Vue）
- React的JSX和Vue的template都有哪些缺点？
2、JS有什么缺点？
同样的，也是平时大家很少想到的问题，JS有哪些缺点呢？我觉得从这几个方面去回答：
- JavaScript的单线程问题（背景）
- JavaScript用什么方式去弥补这一缺陷？
- Web Worker为什么没有解决本质问题？（延伸出下一个问题）
- Nodejs是什么？
- Nodejs有什么优缺点（延伸出下一个问题）
3、WebWorker？
由上一个问题延伸出这一个问题，我思考一下，回答思路：
- WebWorker的基本方法
- WebWorker原理是什么？
4、Nodejs有什么优点缺点？
由上一个问题延伸出这一个问题，思考，回答思路：
优点
- Nodejs为什么多并发表现优秀
- Nodejs门槛为什么比较低？
- Nodejs都有哪些优秀的框架？
- Nestjs有什么优点？
缺点
- Nodejs为什么不适合大项目
- 有什么解决方案吗？（延伸出下一个问题）
5、为什么Nodejs不适合大项目？怎么解决？
由上一个问题延伸出这一个问题：
- 稳定性？
- 始终是单线程语言
- 怎么去解决这个单线程问题？
正在我冥思苦想搜索有没有八股文应对这一难题时，面试官对我说：不需要说具体解决方案，就只需要说出你的想法即可。
我大喊一句：既然他只有单线程，那我就多开几个服务，那不就有多个线程了（我乱猜的🐶）
面试官说：诶，你这小伙子，很有想法哦~（原话）
然后就引出了下一个问题Serverless
6、说说Serverless？
没思路，因为我没用过，面试官跟我介绍了一会儿Serverless，我理解就是分散请求到多个服务，降低单个服务的压力~
我一想：啊，是微服务吗？
面试官说：不是，巴拉巴拉巴拉巴拉
我：哦。。这样啊。。。（没用过，我没话语权）
7、函数式编程？
这玩意网上都有资料，大家查查就行，思路：
- 什么是纯函数
- 函数科里化
- 组合函数
8、单点登录SSO如何实现？
这个我还真没做过，但是我了解过这个概念，所以我想出一些方案：
- 同域会携带Cookie
- 第三方跳转url携带标识
- 第三方不跳转的话，需使用iframe
巴拉巴拉巴拉，聊了挺多，牵扯出fireBase
9、fireBase？
我没用过，我理解就是前端起一个服务，在前端自己实现登录或者一些其他后端功能。。我咋感觉像小程序的云开发？
10、埋点方式有哪些？出一个方案？
这个啊，埋点有很多中方式，回答即可：
- 手动埋点
- 劫持Function进行调用时的埋点
自己发挥想象力吧~
11、如何设计一个项目架构，方便团队其他成员快速上手？
这个有的说：
- 制定规范？
- 强制团队成员学习？
- 提供示例？
- 搭建可配置化架构？
12、Nestjs的优点是啥？跟Eggjs的对比？
这个你们就网上找吧，我都是根据我使用时的体验去回答的，比如：
- Eggjs定的规范太死了，太分散
- Nestjs比较灵活，业务代码更加紧凑
结语 & 加学习群 & 摸鱼群
我是林三心
