金三银四|热乎的前端面经

Gillian
453 阅读10分钟

写在前面

我的经历

我的跳槽经历可以看这篇文章金三银四|从银行科技岗到互联网大厂的跳槽经历

投递了很多大厂，走到最后拿到 Offer 的有 3 家，都很满意，已经选了一家准备入职了，其中不乏有运气成分，和各位经验丰富的前端不能相比。

整个过程中，面了很多，也挂了很多。我会继续加油，在入职之前写下这篇文章希望有所帮助。

心态

实际心态

别人我不知道，我的心态整体就是过山车一样一直起起伏伏，一直焦虑，可能这就是面试吧。一直期待好机会，但是这个准备过程还是有点难熬，一次的失败很容易垂头丧气，可以找个好朋友多鼓励自己，脱单的各位可以找伴侣哈哈哈。

适当调整

最差的结果就是一个 offer 也没有，就是在原岗位苟着，至少没有失业。在此之上的每一点进步都值得开心，是自己走出舒适圈的证明。降低预期，做到最好，总会有不错的结果的。

建议

面经看了如果能查漏补缺自然是好的，但是更多情况下，别人被问到的，自己不一定面试中会被问到，所以还是个参考作用哈。建立自己的知识体系并不断夯实它，是最重要的，一起加油。

备注

说实话时间过得有点久了，很多题目已经不记得了，这里列出的只是大概，做个参考，希望能够帮助大家稳定心态。如果增加了你的焦虑，就马上×掉吧，可以以后再看。

面试内容只是列出了题目，很多题我也答的可能不是很好，就不放答案了，具体答案或者知识点大家可以自行搜寻哈。

某外企 NE offer

面试形式：现场面试

一面

  1. CSS 垂直居中几种实现方式

  2. CSS 实现三角形效果

  3. let、const、var 区别

  4. 使用 ES5 实现 const（使用 Object.defineProperty）

  5. 闭包概念、优缺点、实际应用

  6. Promise 几种状态

  7. 作用域与作用域链

  8. call、bind、apply 使用与区别

  9. 手写防抖函数（考虑 this）

  10. 浏览器缓存策略（强缓存与协商缓存）

  11. 几种跨域方式以及与 JSONP 区别

  12. Cookie、LocalStorage、SessionStorage 区别

  13. Cookie 的 SameSite 属性

  14. 浏览器加载 <script> 放在哪个位置及原因

  15. 加载代码时，script 标签的 async 和 defer 的用法和区别

  16. HTTP 请求响应头字段列举和作用

  17. Redux 设计思想及具体使用

  18. React 生命周期介绍

  19. React 函数组件与类组件区别

  20. hooks 使用

  21. Router 单页应用 多页应用

  22. webpack 压缩代码方式

  23. SEO 优化（首屏加载优化）

  24. SSR 接触过没

  25. git reset/git revert 区别

  26. 思考题：两个筛子，每个六个面，每个面从 0-9 中选一个数字填上，可以选重复数字。要求抛掷能有概率出现 01、02、03...32，提示：先从必须要填的数字开始，9 即 6。

二面

组长面

介绍自己印象最深的项目（做了哪些优化等）

思考题

三面

主管面

大概问问，考察表达能力。

hr面

ps：薪资太低，拒了，不过本来也没打算去。

Bilibili 简历挂

ps：一直显示筛选中，可能因为走的是官网投递，不是内推，不过也太慢了吧，完全没有回音。

LILITH GAMES 一面挂

一面

面试形式：现场面试

面试内容：

  1. JS 的几种继承方式
  2. JS 的原型链
  3. React 的 diff 算法原理
  4. React 如何实现弹窗
  5. React 的优化方式
  6. ......

ps：这是我面完外企之后，不是抱着试一试的心态的年前第一次面试，但是第一次还是很紧张，而且暴露了很多东西还是没有复习到位，打击很大。总共面试也差不多二十分钟，只记得这几道题了。

MT 一面挂

一面

面试形式：视频面试

面试内容：

  1. PWA 了解？

  2. Scroll 滑动阻塞 分析可能原因

  3. 防抖节流区别

  4. Tree Shaking 原理

  5. 为什么要多域名部署

  6. 除了多域名部署，还有哪些方案

  7. 首屏渲染阻塞 ，哪些方面优化

  8. SEO 搜索引擎优化

  9. 多端数据共享了解？比如两个APP之间

  10. 原生与 js 的通信，具体点

  11. 有没有自己做过工具

  12. 项目难点、 如何解决

  13. 小程序的 fileobserver 了解过吗

  14. 微信的登录流程（由项目问过来的）

  15. 算法题：爬楼梯

ps：后面有向 hr 了解过原因，说是可能想要经验更丰富的&有潜力的，确实说的一些答得不好，害。

MY offer

一面

面试形式：电话面试

面试内容：

  1. 一个内容是异步操作的数组（不知道大小，形似[a, b, c, d] ），如何异步/串行执行，代码思路

  2. 找到数组中可以被 3 整除的数

  3. 日期替换 2020-12-01 -> 2020年12月01日，怎么操作

  4. 数组遍历的所有方法

  5. 异步有哪些实现方法

  6. 业务中比较困难的点以及如何解决

  7. CSS 垂直居中布局

  8. CSS 中类名如何保证不重复

  9. Promise.all .race 区别

  10. webpack 缩小打包体积和加快构建速度的方式

  11. 数据可视化了解吗

笔试

  1. 函数柯里化实现
  2. 算法题：独立空间数量 （考察 DFS，相关题目会做即可）
  3. 找出 HTML 里所有的外部链接并将对应资源下载

二面

面试形式：电话面试

面试内容：

  1. Nginx 如何负载均衡 Node 项目如何部署 Cluster 模式（Docker+k8s 是目前主流的部署方式）

  2. Webpack css-loader 如何配置

  3. redux-saga 用过没

  4. redux-react

  5. Webpack 优化方式

  6. CSS 文件最后上线 style.loader 是否需要（是不用的，会单独打包成 CSS 文件）

  7. React 项目结构、组件、页面、数据流等整体设计

  8. React Native 如何做到一处使用，多端执行

  9. 大学擅长的课：说了计网和算法（淦）

  10. 斐波那契数组实现以及时间复杂度

  11. 交换机与路由器的差别

  12. 机器如何上网、路由器内部的机制、DHCP

  13. Redux 源码、实现是否了解

  14. React 路由原理

三面

主管面

面试形式：视频面试

面试内容：

  1. 主要是抓着项目问得很细，比如项目里涉及到的 RN 怎么做懒加载，后面的接口缓存是怎么做的
  2. React 怎么优化，怎么减少不必要的渲染次数
  3. 小程序登录流程是怎么样的（项目相关）
  4. 有没有做接口监控等措施
  5. Express 中间件用到哪些
  6. 理想的工作状态
  7. 未来的发展方向

hr面

面试形式：电话面试

面试内容：这里的 hr 面还是有点久的，有四十分钟。

  1. 怎么迅速适应新公司
  2. 怎么迎接挑战
  3. 这边比你现在的公司工作时间更长，怎么适应
  4. ...

BD offer

一面挂

面试形式：视频面试

面试内容：

  1. 最擅长的技术点有哪些，然后根据这个着重讨论
  2. 代码题：手写实现 Promise.all/Promise.allSettled
  3. 算法题：设计一个红包随机算法
  4. ......

ps：这一面是我的第一次大厂面，真的太紧张了，特意请了下午半天假进行准备，但是还是答的不好，尤其 Promise 的一些原理知识什么的还不是很熟，一问就慌了。面试结束几乎崩溃，一度以为我的 BD 之旅就此结束了。

换部门一面

面试形式：视频面试

面试内容：

  1. 说一下以下两种盒模型样式分别对应的 content 的宽高

    .box { 
  width: 10px; 
  height: 10px; 
  border: 1px solid red; 
  margin: 2px; 
  padding: 2px; 
  background: blue; 
} 
#borderBox { box-sizing: border-box; } 
#contentBox { box-sizing: content-box; }

  2. 项目问题

  3. 算法题：翻转链表

ps：这面的问题我确实有点不记得了，对不住。。。

二面

面试形式：视频面试

面试内容：

  1. 碰到的技术难点及怎么解决

  2. （我说了闭包）闭包的原理详细解释一下

  3. Webpack 打包优化方式

  4. Tree Shaking 原理

  5. React 优化方式

  6. ......

  7. 代码题：Flex 布局实现九宫格

  8. 算法题：数学黑洞

    给一个四位数和计算的次数，将计算的结果进行输出。定义一次计算的规则：将输入数字转化为四位最大的数字和最小的数字，并二者求差获取一个数字。例如2134，一次的计算规则 为最大4321减最小1234，得出结果3087。 期待输入：四位数字和计算次数， 例如 2134， 1 期望结果：3087 ，例如 2134， 2 期望结果：8352

ps：二面结束后，面试官让我等一下，他直接去喊了三面面试官过来。中间间隔了十分钟，直接接着就进行了三面，可太刺激了。

三面

面试形式：视频面试

面试内容：

  1. 学的知识都来自于哪里?

  2. 前两次印象最深的面试问题是什么？

  3. 说一下闭包的原理（二面答的）？

  4. 怎么学习知识的？

  5. Node 源码看过没？

  6. 为什么离职？

  7. 现在的工作岗位真的学不到东西吗？

  8. 代码题： JS 实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有两个。完善代码中 Scheduler 类，使得以下程序能正确输出。

    class Scheduler {
 add(promiseCreator) { ... }
 // ...
}

const timeout = (time) => new Promise(resolve => {
 setTimeout(resolve, time)
})

const scheduler = new Scheduler()const addTask = (time, order) => {
 scheduler.add(() => timeout(time))
  .then(() => console.log(order))
}

addTask(1000, '1')
addTask(500, '2')
addTask(300, '3')
addTask(400, '4')// output: 2 3 1 4
// 一开始，1、2两个任务进入队列
// 500ms时，2完成，输出2，任务3进队
// 800ms时，3完成，输出3，任务4进队
// 1000ms时，1完成，输出1
// 1200ms时，4完成，输出4

ps：三面一堆灵魂拷问，形成了巨大的心理阴影，后来向面试官了解之后，说是把我当成另一个经验丰富的候选人了。。。

hr面

总结

一通面试下来，最后有所收获真的很幸运，之前一直心里没底，也很焦虑烦恼。但是只要一直不停努力，一定会有所收获的，最重要的是，可以收获更棒的自己，也是不错的体验不是吗？

马上要入职新公司了，希望自己可以学习更努力，技术更进步，从菜鸟开始慢慢进化，一起加油：）

avatar
文章
阅读
粉丝