分享我所经历的"金三银四",以及我被问到的135道面试题~

10,173 阅读12分钟

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。

金三银四还存在吗?

“金三银四”在今年还存在吗?我觉得还存在,但是今年确实是比以往难一些了,体现在几个方面:

  • 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, [34, [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比较灵活,业务代码更加紧凑

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
  • 一个偏前端的全干工程师;
  • 一个不正经的掘金作者;
  • 一个逗比的B站up主;
  • 一个不帅的小红书博主;
  • 一个喜欢打铁的篮球菜鸟;
  • 一个喜欢历史的乏味少年;
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

image.png