来源：https://mp.weixin.qq.com/s/_SO8X_nvhQ5PoX67qj3xgw
** 前端Q **
我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～
115篇原创内容
**
公众号
大家好，我是winty。又到了金三银四找工作的季节，最近听说了很多公司裁员的消息，大家是不是觉得今年的就业环境更难了。这波裁员其实从年前就开始了，当时我还处于裸辞的状态，身边的朋友都劝我赶紧找工作，不然选择会越来越少。但是我还是坚持休息了几个月，才开始投简历。投出去的简历很快就有了回应，相继给我安排了面试。就我的经历而言，找工作的过程还算顺利。不过每个人的实际情况有所不同，如果大家有跳槽的想法，可以根据自己的情况提前做好计划。ps: 如果不想看前面的面试总结，可以直接跳到最后看美团、腾讯、商汤科技等七家公司的面试题哈我是本科四年工作经验，投的前端岗位。我从去年12月底开始面试，面试流程走了一个月左右，年前基本都敲定了offer。其中技术面试大部分集中在前半个月，后半个月就是HR面，聊薪资，定级别。我面了七家公司，大厂有腾讯、美团、商汤科技，中小厂有酷家乐、神策、天眼查，还面了一家国企，中国人寿。完整走完流程的有三家，因为拿到比较满意的offer了，面试也挺累的，其他的流程就没有继续走下去了。整个流程走下来，给我的最大感触就是累，比996还累。因为每天大脑都处于极速运转中，面完还要针对每场面试做复盘和反思，有时候也会自我怀疑，觉得自己是不是太菜了。不过大多数时候都打鸡血鼓励自己，如果你都不相信自己，那面试官更不可能相信你了。所以良好的心态非常重要，是斩获offer的秘诀之一！如果你近期有想跳槽的打算，一定提前开始准备面试。准备越充分，面试就越有信心。准备可以从这几方面入手：八股文是一定要准备的。在短短的一个小时内，面试官要完全地了解一个人非常难，只能通过关键的知识点去考察一个人的技术实力。而我们平时在公司里埋头苦干，很多基础知识已经忘记或者印象不深刻了。这些基础知识如果在面试时答不上来或者含糊不清，就会给面试官留下基础不扎实的印象。我是从12月初开始准备基础知识的，准备时间一个月左右。我囊括了几个重点方向:1. <span style="font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;">JavaScript 基础，包括原型与原型链、继承、事件循环、作用域、ES6语法、垃圾回收与内存泄漏等。
2.网络通信，重点有浏览器缓存、Http2.0、Https通信过程、TCP与UDP、DNS解析、CDN缓存等。
3. HTML和CSS，这块被问的内容比较少，重点从布局入手，比如单位、盒模型、定位、响应式布局等知识点。
4. 前端框架，框架的底层原理是一定会问的，至少要深入掌握一个前端框架。目前业界内比较流行的框架是 React 和 Vue，React 的知识点有 React diff、生命周期、Fiber 架构、Hooks 等；Vue 的知识点有Vue diff、响应式原理、Vue3.0新特性等。
5. 打包工具，主要围绕Webpack展开，比如loader和plugin原理、webpack构建流程、热更新原理、性能优化等。除此以外，打包界的新宠esbuild也可以了解下。
6. 加分项，除了JavaScript外，还了解哪些编程语言
就我的面试经历来看，前端考察的算法难度一般，都是比较常用的。但是算法能不能做出来很重要，很多公司都非常看重算法的实现。大家不用抱着很难的算法啃，但是要掌握一些基础的算法题，比如**排序、递归、链表、动态规划**等。算法题能锻炼自己的思维能力，我建议大家尽早去 **LeetCode** 上刷，最好提前两个月。这样在面试中就算遇到不会的算法题，也能找到一些解题思路。
简历是面试官认识我们的第一步，也是面试时沟通的桥梁，所以写好简历非常重要。一份好的简历要做到以下三点：我们要把最有用的信息写上去。首先个人基本信息要写清楚，这个方便HR联系你。教育经历无论学历高低都要写上去，不要觉得自己学历低就不写了，就算面试的时候不会被问到，背调或者入职的时候也会检查。其次专业技能很重要，HR筛选简历的时候会看你的专业技能是否与岗位匹配，面试官也会围绕专业技能对你提问。所以专业技能应该按照熟练程度从前到后写，把最熟悉的技能写在前面，对于不熟的技能可以用“对xx有一定了解”等术语。最后是项目经历，项目经历不在多而在精，可以挑2-3个有亮点的项目重点描述下。在面试前一定要对对这几个项目认真做功课。
面试的内容基本都会围绕简历展开，如果你为了提高简历含金量，虚构一些项目经历或者技能，那很可能就会出现一问三不知的情况。
千万不要抱着侥幸心理，认为这些东西有可能不会被问到，如果被问到又答不上来，会让人怀疑你简历内容的真实性。所以简历一定要贴合自身实际，不要打肿脸充胖子。
3.信息精简
面对每天上百份简历，HR和面试官筛选简历的时间非常有限，均摊到每份简历的浏览时间就更少了，所以切记不要在简历上长篇大论，这样容易导致HR抓不住重点，错过关键信息。简历页数最好维持在2页左右。
每轮面试都有2-3分钟的自我介绍，可以先礼貌地跟面试官打个招呼，然后再介绍自己的一些情况，比如基本信息、工作经历、离职原因等。自我介绍有两点需要注意：自我介绍阶段不要聊项目细节，很耽误时间。面试官如果感兴趣，自己会问。让你自我介绍只是想对你的情况有个大致的了解，如果一上来就开始滔滔不绝，反而打乱了面试官的面试计划。有的人可能没准备自我介绍，等问到的时候才打开简历照着念，这会给面试官留下非常不好的第一印象。大家可以提前把自我介绍背下来，等问到的时候就可以信手拈来了。
面试其实就是一个不断积累的过程，面得越多，越得心应手。我经历了十几轮面试，总结出了这几点经验：不同的面试官会从不同的角度去考察你的项目经历。所以对于曾经做过的项目，一定要认真准备，把可能会问到的点都准备一遍。比如面试官在问到我开发的其中一个babel插件时，就提了以下问题:1. 这个babel插件的适用场景有哪些
开发这个babel插件遇到了哪些问题，怎么解决的
为什么会想到用babel方案去开发这个插件，调研流程是怎么样的
这个插件还有哪些可以优化的地方，怎么优化
babel的preset和pollyfill可以互相替代吗，为什么可以/不可以
babel7相较于之前做了哪些优化
一连串问题问下来，差点没扛住....
2.每场面试结束都要及时复盘
每场面试下来一定要及时复盘。如果在家视频面试，可以提前录下面试过程。这样就能知道我们在面试中的表现。对于没回答上来的问题，一定要去做功课，完善自己的知识体系。
其实面得越多就会发现，考察的核心问题就那几个。面得越多，对这些问题的理解就越深刻，回答起来也更游刃有余。
3. 直面问题，不要答非所问
对于面试官的提问，一定要提炼出关键问题，然后针对关键问题作答。如果没有听懂，可以再问一遍 “能再说一遍你刚刚的问题吗”“您看我这么理解您的提问对不对....”，确认你的理解没有问题后再作答。如果确实不了解面试官问到的问题，明确表示不了解就行。如果你答非所问，反而给面试官留下不好的印象，觉得你理解能力不行。
4. 分阶段准备
技术面一般有三面，我们可以分阶段准备面试。一面面试官是一线开发，会考察很多技术细节，所以这面要着重准备基础知识。二面面试官是比较资深的开发，可能会问到框架底层原理，项目细节，当前流行的技术解决方案，比如微前端、SSR。我们要着重准备项目经历、技术实现方案和算法等。三面面试官是技术负责人，负责人更多的是从宏观层面来考察候选人，比如候选人的学习能力、逻辑思维和表达能力。这些东西难以量化，需要长时间的培养。不过无论能力强弱，只要保持开放谦逊的态度，也能增加面试官对你的好感。
以上就是我的面试感悟啦，下面**附上面试真题。**由于面试覆盖的内容很广，文章篇幅有限，没有附带答案，欢迎大家**关注我的公众号**与我探讨答案~
** 小羊快码 **
一只有趣的程序媛，毕业于武大，就职过字节，希望用最有趣的故事分享最硬核的技术！
5篇原创内容
**
公众号
<strong style="letter-spacing: 2px;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;">
一面1. 曾经做过的最有挑战的一个项目
DOM 的事件机制，怎么阻止事件捕获
常用的 ES6 语法有哪些，var 怎么实现let
React Hooks vsComponent
React中的 useCallback 和 useMemo 有什么区别，什么情况下需要用 useCallback
浏览器的 Event Loop 机制
setState 是同步还是异步的
Set 的用法，用 Set 实现数组去重
Graphql 的使用
移动端适配方案, rem 和 em 的区别
React 解决了什么问题
前端跨域怎么做
编程题：用 setTimeout 实现 setInterval
二面
1. Vue 的双向绑定机制
字节小程序和微信小程序区别
React Fiber 机制
React Hooks 的原理
Node 遇到过哪些性能问题
Node 做耗时的计算时候，如何避免阻塞
低代码平台运行时的生成逻辑
低代码平台性能优化
低代码平台组件发布流程
上家公司做了哪些事情以及做事的流程
未来职业规划
感兴趣的工作方向
编程题：输入两个数组 [1,2,3,2,1], [3,2,1,4,7] 返回公共的并且长度最长子数组的长度
三面1. 大文件的分片上传和断点续传怎么做的
抖音APP 与 H5 如何通信
现在需要用新技术，需要从哪些方面思考
如何针对性能指标做优化，有没有了解过业界的性能指标统计方式
Express 和 Koa 的区别
项目经历
推动过什么事情
对下一份工作的期望
一面1. less-loader 的 less 转成 css 的底层原理
webpack的 loader 和 plugin 区别
webpack 常用插件
webpack 如何做代码拆分
webpack tree shaking 原理
webpack 动态导入原理
webpack 热更新原理
webpack5 新特性
esm 和 commonjs 的区别
TS 的 type 和 interface 的区别
TS 怎么做枚举
TS 泛型
canvas 绘制流程，canvas 里的图片跨域怎么处理
项目经历：babel 插件的实现
编程题：实现一个深拷贝
二面
1. 链表和线性表 crud 比较
了解哪些设计模式，实现其中一个设计模式
canvas 绘制流程，遇到了哪些问题
从输入URL到浏览器显示页面过程中都发生了什么？
移动端布局方案
浏览器 Event Loop
对图形绘制了解多少
ES6 为什么要转成 ES5
H5 开发时遇到了哪些问题，怎么定位的
DOM 事件流
平时怎么做性能优化
最有亮点的两个项目
三面
1. HTTPS 加解密过程
哈希表原理，哈希碰撞时怎么处理
内存回收机制
栈内存和堆内存的概念
线上错误监控怎么做
CI/CD 流程，有哪些改进点
进程间如何通信
低代码平台的实现
对下一份工作的期望
一面1. CSS 预处理器对比
CSS 定位有哪些取值
原型与原型链，函数怎么实现继承
this的指向，call、apply的区别
Vue 3.0 和 2.0 区别
Vue.$nextTick 作用
Vue 和 React 的 diff 有什么区别
proxy 拦截器的用法
DNS 解析流程
事件循环
闭包和内存泄漏
最有亮点的一个项目
二面
1. HTTP 幂等性定义和常用方法的幂等性
redux 单向数据流有哪些优势，redux 中间件实现原理
React HOC vs renderProps
浏览器里的线程与进程
requestAnimationFram 与 requestIdleCallback 的区别
npm管理痛点，如何解决
gitflow流程、分支管理
websocket建立连接过程
组件/工具库打包时的格式输出，如:CommonJS、ESM、UMD等，他们之间有什么区别
Http 301、302 状态码的区别
H5 性能优化
编程题：设计一个flat函数将如下数组arr=[1,2,['3',4,'5',[6,[7,8],9]]]输出为1,2,'3',4,'5',6,7,8,9。至少写出两种方法,要求不能改变数组中的原始数据类型
三面1. BI 可视化系统介绍
在字节之后的提升有哪些
目前前端可以做的优化有哪些
新旧系统重构的时候，怎么过渡上线
Vue React 的区别
字节小程序介绍一下
自己未来的规划。自己的优缺点、周围人人对自己的评价
如何学习一门新技术
对神策数据的了解
对大数据的了解
一面1. 进程通信的几种方式
TCP/IP 如何保证传输稳定性
对称加密和非对称加密的使用场景
浏览器帧卡顿检测
Vue 和 React的设计理念
性能指标FP、FCP和FMP分别跟哪些因素有关
低代码平台的技术原理
业界其他低代码平台实现方式，对比差异
nginx怎么做反向代理与负载均衡
编程题：设计和实现一个 LRU (最近最少使用) 缓存机制，满足：1.获取数据 get(key) - 如果密钥 (key) 存在于缓存中，则获取密钥的值（总是正数），否则返回 -1。2.写入数据 put(key, value) - 如果密钥已经存在，则变更其数据值；如果密钥不存在，则插入该组「密钥/数据值」。
一面1. JS 有哪些数据类型
JS 数据类型识别的方式，有什么缺点
原型和原型链，函数怎么实现继承
new 发生了什么
symbol 类型的用法
script 标签里分别设置 defer 和 async， 它们的执行顺序是怎么样的
React router 的两种模式模式，怎么动态获取路由上的 id
redux 中间件的实现原理
React 的 purecomponent 和 component 的区别
generator 函数的用法
React diff 节点对比的过程
Vite 打包工具的使用
箭头函数和普通函数区别
什么是执行上下文
堆内存和栈内存，数组存储在堆内存还是栈内存
HTTP2.0 相较于 HTTP1.0 的改进
isNaN和number.isNaN区别
闭包和内存泄漏
setState 是同步还是异步的
HTTP 与 HTTPS 的区别
React Hooks 的 useState 为什么不能放到条件语句
解释下浏览器的同源策略
一面1. Node 怎么做性能监控
React diff 节点移动的具体过程
讲一讲浏览器缓存
ES5 最优的一种函数继承，静态属性怎么做继承的
前端怎么做性能监控
V8 引擎对垃圾回收的优化
导致内存泄漏的方法，怎么监控内存泄漏
作用域和执行上下文区别
this的指向问题
Array方法，forEach、map 对比
for of 和 for in 区别；for of 循环数组时怎么拿到数组索引
移动端布局方案；怎么设置根元素的font-size大小的
Webpack bundle、chunk、module的区别
Webpack 热更新原理，怎么找到对应的局部模块做更新的
项目经历：babel插件的实现
一面1. HTTP2.0 和 HTTP1.0 的区别，HTTP2.0 有什么缺点
闭包及闭包的使用场景
实现一个侧边栏组件思路
浏览器缓存机制
重排与重绘，怎么减少重排
DOM 事件机制，不会冒泡的事件
cookie 和 session 的区别
sql 相关操作，增删查改
web 安全，xss、csrf 攻击特点及防御方式
[大厂面试官：我理想中的前端](http://mp.weixin.qq.com/s?__bizMzI0MzIyMDM5Ng&mid2649842460&idx1&sn938672f8fafc8f94255e643b230b753c&chksmf175a9dfc60220c9212e679379cc267092a0f17c8aa3e9414c0c85f32f293d9ba33bc2469554&scene21#wechat_redirect)[对话Svelte未来，Rust 编译器？构建大型应用?](http://mp.weixin.qq.com/s?__bizMzI0MzIyMDM5Ng&mid2649842380&idx1&sne66b832dfb85ad43b0171cf2a86a7a96&chksmf175a80fc6022119b973debd88345eaca43cba1767ef83e07e2c1f18e98cb99ea162a6e29d18&scene21#wechat_redirect)[收藏！史上最全 Vue 前端代码风格指南](http://mp.weixin.qq.com/s?__bizMzI0MzIyMDM5Ng&mid2649841301&idx1&sn54c5e4832b96e6ef3317443e5c063792&chksmf1759456c6021d4072323dfde6fb5d133108853de765dc46d77ca76bb46b1ee9191293f266d4&scene21#wechat_redirect)* 欢迎加我微信，拉你进技术群，长期交流学习...
- 欢迎关注「前端Q」,认真学前端，做个专业的技术人...
** 前端Q **
我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～
115篇原创内容
**
公众号
