2023前端面经（面试准备+面试题）

1.面试前的问题

1.1 博客粉丝少，要不要写简历上

博客粉丝数量少，文章内容都是基础的东西，要不要写到简历上？咨询了一些群友，以下是一些回复：

1.“我作为面试官，拿到的简历如果有自己建立的站点或者博客的链接我会点进去看看的，另外面试过程中，也会去问一两点。所以我建议就是你发的这些东西你特别熟，能让面试官更好的了解你，那就放上去，如果是很多的摘转载，自己也都是不熟的东西，那就不放”

2.“写上总比没有强 但你之前的更新时间隔太久了最近建议每天或者每两三天都更新一下，要坚持”

总结：写上总比没有强，但是博客更新速度要坚持，不要平时不更新，快找工作了，嘎嘎更新。写的话也要保证写的东西都能说出来，如果面试官看了博客而去问到了，自己说不出来，就是给自己挖坑了

1.2 准备思路

想找工作，但是不知道从哪开始？

目前两年多经验，不到三年。和一些前辈聊过，也和大厂面试官聊过。两年可能达到p5的水平，首先基本功要非常扎实，第二点框架的使用上要非常熟，然后对webpack有一些了解会比较好。可以从四个方向去准备：

1.JavaScript，JS是前端的基础，必须要扎实：原型链、继承、事件循环、事件委托等。ES6中常用的语法：Promise、localstorage区别、set、map等。
2.框架：选一个主框架，如 React：常用API熟练使用，最好了解这些API的实现原理，有的面试官会让手写。源码也要读一些。
3.项目：遇到过哪些难点，有哪些亮点。
4.完成以上三点后，了解一些计算机网络的知识，如：输入一个url后发生了什么？性能优化：前端性能优化三大指标：LCP（衡量最大内容加载）、FID（衡量响应性能）、CLS（衡量视觉稳定性）及Navigation Timing。css部分，如：flex:1,什么意思，代表哪三个属性。webpack方向。算法。

总结：简历做出来后，可以对照简历去准备，简历上提到的知识点一定吃透。
如：“推荐团队使用style-component实现模块化”。那你还知道哪些实现模块化的方法，他们的区别，为什么使用style-component。这个答案不重要，重要的是你回答这个问题的思路和角度。

2.大厂面试

2.1 百度

1.你做的这些项目，你觉得那个技术点有挑战性？
2.我看你做过移动端的项目，rem、em、px、vh、vw有什么区别？em相对于谁？
3.css里面，哪些方式去实现模块化？
4.在jsx里面写一个classname，渲染到真实的dom节点上的时候，classname还是你原来的那个classname吗？
5.了解过webpack的哪些东西？plugin和loader区别
6.聊一聊react相关，说说你对fiber的理解？currentFiber是一个什么样的结构，是一个树吗？双缓存指的是什么？任务的中断和恢复是怎么做的？怎么去实现这些细小的任务，调用什么api呢，了解过吗？
7.setState的原理？是同步的还是异步的？
8.react的事件和html中的事件有什么不一样？一个列表每一项都添加点击事件怎么添加？每一个都绑定一个吗？事件委托？
9.有用过ref吗？父组件调用子组件的方法，用ref怎么实现？如果是一个函数式组件呢，函数式组件是没有实例的
10.用过useMemo吗？useCallback用过吗？了解过具体的实现吗，怎么实现一个缓存？
11.问一下js基础性的，node了解过吗
12.for in 和 for of 有什么区别？for in 可以循环对象，可以循环到原型上吗（可以）
13.了解过set map 吗？set为什么能去重?map可以去重吗
14. apply和call有什么区别？bind和apply和call有什么区别？判断一个数据类型怎么去判断，object.prototype.toString.call()， call可以改成bind吗

15.可以共享屏幕吗？我们来做几道题吧。
15.1 多维数组改为一维，不用flat，那个方法有问题
15.2 给你一个数，求出它的最大质因数
16.git 如何摘除有bug的代码，代码已经提上去了，其他人也提上去了，你怎么把你有bug的那部分给摘出来
17.git如何删除被缓存的文件，如何切换分支/如何创建分支/git fetch 和git pull 有什么区别
18.你有什么要问我的
我：“大厂招人比较看重什么”
答：“我们可能不需要你把原理、源码了解的多熟，更看重你遇到问题时的思路和想法。”
我：“您觉得作为开发者，最重要的能力是什么？”
答：“…(此处省略)…凡事多问一个为什么”

2.2 字节

1.vue和react你都用过，那你说一下他们的区别？
2.说一下你理解的Fiber？EffectTag如果是新增的话，它的标记是什么？EffectTag是一个什么样的结构？useEffect和useLayoutEffect的区别？你知道useEffect在commitWork阶段是怎么执行的？
3.说一下你对TailWind的理解。TailWind你用的是哪个版本。Tailwind是动态组合的，这种方式去做的，你知道它是怎么去实现这种能力的吗？
4.你说一下原型链吧，什么是原型链？prototype为什么是空的对象？有一个构造函数A，我要添加一些方法，让实例化的对象能用到这个方法，我要怎么做呢?有一个构造函数A,上面有一个静态的属性，比如果message，那我怎么实现，子类的构造函数去继承它？组合寄生式继承，了解过吗？咱们先，口喷一下组合寄生式继承？我看你一直用指针的概念，你对C语言这块有了解吗？
5.你提到了模块化，那你说一下js有哪些模块化？Es6和你刚才提到的Es6模块化有什么区别？
6.你用过ELementUi用过AntdDesign，你知道他们怎么实现响应式的吗？
7.ok，看一下你的项目吧，除了openlayers还用过其他图形图表的库？你用过echarts，你对更底层的东西了解过吗，比如说d3，提升页面效率你是怎么算出来的？有没有算过费效比？你封装的组件是怎么给别人复用的？放在某个文件夹里？还是口口相传？还是拿出来，做了一个公共组件库，推到npm库里面，哪种用法？写过单测没？看你带过团队，能说一下你是怎么管理他们的吗？有没有培养大家的工作？
8.问一下细节，echarts热力图用过么？热力图有个问题，数据不是趋近于正态分布，前两个数据13 15 突然有一个数据是99，那你去渲染这个热力图，99那个点特别突出，有没有遇到过这种情况，没有遇到过现在想一下，怎么去解？你有什么比较好的解法？
9.你说一下vue-router和react-router的区别，react-router用的哪个版本？说一下history和hash的区别？生产环境下项目用的哪个？
10.说一下什么是柯里化?你知不知道在设计模式上，可以用哪个设计模式实现？
11.我的问题差不多了，你有什么想要问我的？
我：“您觉得我还有哪些不足？”
答：
“看出来你比背面试题的好很多，还是认真去学了一些东西的，fiber你能答上来还让我挺惊讶的，这一块还不错。”
” 你传达给我的信息是，你是一个很好学，很钻研，对有些东西又比较了解，然后基础知识也还行的这样的一个人。有些东西你了解了，但是从你的描述上来说，它没有能指导你在开发的时候去提升。如果说，因为你了解源码，所以感觉你在工作上，在一些思路上，一些思想上，都受到了它的影响，这就是另一个层面上的了。”

这两个面试官都很和蔼，面完还聊了很多，学了很多东西，体验贼好。

3.面试题

1.原生

1.1 盒模型
1.2 BFC
1.3 清除浮动
1.4 什么时候会造成内存泄漏
1.5 数组方法 map和forEach的区别
1.6 事件循环
1.7 防抖和节流的区别
1.8 数组去重的方法
1.9 数组扁平化处理 flat
1.10 js模块化
1.10.1 什么是模块化？
1.10.2 模块化的好处
1.10.3 IIFE： 匿名函数自调用
1.10.4 CJS - Commonjs
1.10.5 AMD规范
1.10.6 CMD
1.10.7 ES6模块化
1.11 继承与原型、原型链
1.12 call、apply、bind区别
1.13 数组的哪些方法是深拷贝？使用过lodash吗？
1.14 检测数据类型的方法( instanceof \typeof)
1.15 实现深拷贝
1.16 git常用命令
1.17 数组方法lodash
1.17.1 cloneDeep 深克隆
1.17.2 Unique 比较不同、merge
1.18 z-index什么情境下失效

2.react

2.1 函数组件和类组件的区别
2.2 setState的几种使用方式
2.3 受控组件和非受控组件
2.4 useMemo和useCallback的用法及区别
2.5 axios的拦截与封装
2.6 MVC、MVVM、MVP的理解
2.7 对有状态组件和无状态组件的理解
2.8 React Hooks在平时开发中需要注意的问题
2.9 React生命周期
2.9.1 挂载阶段
constructor
getDerviedStateFromProps
render
componentDidMount()
2.9.2 组件更新阶段
shouldComponentUpdate
getSnapshotBeforeUpdate
componentDidUpdate
2.9.3 组件卸载阶段
componentWillUnmount
2.94 useeffect 代替了哪些生命周期
2.10 react合成事件
2.11 如何实现路由守卫
2.12 虚拟dom一定快吗
2.13 为什么会有hooks

3.vue（主框架为react，这里问的少）

3.1 vue守卫
3.2 双向绑定原理
3.3 组件传值

4.ES6

4.1 promise 传入函数是异步还是同步
4.2 set与map
4.3 es6新增语法有哪些
4.4 promise 用过哪些api
4.5 cookie/localstorage/sessionstorage
4.6 const/let/var
4.7 async与await
4.8 新增的数组方法
4.9 拓展运算符 及 symbol

5.其他

5.1 发布订阅者模式
5.2 webpack的优化插件
5.1 css预处理器
5.2 MVVM、MVC的理解
5.3 哪些方法能够处理异步
5.4 跨域怎么解决
5.5 如何部署

6.场景

6.1 element-ui 中表格的实现，传入一个columns和datas数组，如何渲染成表格？
6.2 PC端登录时手机二维码扫码登录，如何实现？
6.3 一个input框，默认值为1，输入1234 失去焦点值改为1234，点击取消仍是1，怎么实现？点击取消时会不会执行失去焦点函数？
6.4 一组字符串，获得出现次数最多的字符并返回出现次数
6.5 一个字符串let a=‘123efw4k5’,实现过滤，只要字母

7. 关于优化

7.1 防抖和节流
7.2 回流与重绘
7.21 如何避免重绘和回流
7.3 webpack
7.4 图片的优化
7.5 懒加载、预加载

8. 计算机网络

8.1 在浏览器输入地址后，按下回车键，都发生了什么？
8.2 https与http
8.3 UDP 与 TCP
8.4 http1.0 /http1.1/http2.0

结尾

个人觉得，前端是一个渐进式的学习过程，不要觉得了解原理、源码没有用。学的越多用到的就越多。部分面试题答案（整理了一部分）：部分答案