前言

先介绍一下我个人的情况：硕士毕业，前端经验三年。2022年9月份因为上一家公司业务调整，不得不面临重新择业的现状。在休息和复习一段时间后开始进行了简历投递，考虑到今年的瑟瑟寒气，我前后一共大约投递了上百家公司（其实重点投递的也就二十来家，剩下的都是在某app上打的招呼）。

最终，收到面试邀约的公司大约25家(基本都是中大厂，包括互联公司、传统公司、金融银行、硬件公司等多个行业领域)，从10月24号到11月11日，累计三个星期的时间，目前通过面试的岗位9个。

从这三个星期的面试经历来看，面试主要问的js/ts，css，工程化打包工具，网络webpack/vite，vue，react，和一点react native（有短暂的相关经历）。因为我自身使用react时间更长些，所以这块面试官也问的相对更多一些。

面经分类

根据二十五家公司的一面到终面情况，我将题目分成以下类型：

• Html&CSS
• Javascript
• 前端框架
• React全家桶
• Vue全家桶
• 浏览器&网络
• 性能优化&前端工程化
• Typescript
• 跨端&Hybrid
• 前端安全
• 微前端
• 代码执行题&手撕代码&算法
• 场景题
• 其他

关于各个部分知识点的频率和重要性，基于我自己的面试情况，稍稍做了一些判断，但是仅代表我的这次面试经历情况哈～

以下是我在面试过程中的遇到的问题，问题的具体答案，会在后面陆续更新，供大家参考，也请大佬们指教～

Html&CSS

这部分内容一般互联网公司没有出很多问题，反而是银行金融证券国企等会针对这个进行一些提问，所以如果你的目标是互联网的话，不需要在这个上面花很多精力。

1. html5的新功能有哪些？juejin.cn/post/716627…
2. script标签放在body或者header中会阻塞吗？juejin.cn/post/717331…
3. script标签中的async和defer有什么区别？juejin.cn/post/717331…
4. js是如何引入的，有哪些方式引入，优缺点是什么？
5. html中哪些标签可以不受跨域限制？
6. preload和prefetch有什么区别？
7. 浏览器全局中有哪些对象？
8. 浏览器有哪些原生api，bom&bom分别介绍下？
9. 简述一下浏览器的渲染过程？
10. 如何判断浏览器是否支持flex布局？
11. css3有什么新特性？
12. css不可见的方式，是否可点击？
13. 什么是BFC？
14. 如何处理垂直距离的margin合并问题？
15. 如何实现垂直居中布局？
16. 如何实现水平居中布局？
17. 如何实现三栏布局？
18. 如何绘制一个三角形？
19. 简单说一下px，rem，em，vw/vh的区别？
20. rem和vw的区别，它们的缺点，谁的使用成本更高？
21. 如何实现响应式布局？
22. 如何避免重绘和重排？
23. justify-content: space-around 和space-between的区别
24. 一个div内部有个div，这个内部的div没有内容，它的宽度是多少？
25. 什么是重排和重绘？
26. css的书写是否会影响性能，应该注意什么？
27. css选择器的优先级，10个class和id来比较，谁的优先级跟高？
28. 前端有哪些本地存储方案，分别在什么场景下使用？
29. localStorage和sessionStorage的区别是什么？
30. less是否可以进行无限嵌套？
31. less scope的是如何实现的？
32. less还有哪些特性？

Javascript

这部分的一些问题在我的面试中遇到的其实也并不算多，中小厂会相对频繁的问前十个题目，这十个问题也是js中比较基础的一些概念，大厂可能并不太会让面试者去进行一些js基础概念的解释，反而更多的是会让面试者和阅读代码，判断代码的执行情况来考察面试者对于基础的掌握程度，所以大家在准备的时候，不能只靠死记硬背。

1. js中有哪些数据类型？
2. 什么是js原型，原型链？
3. js的继承有哪些方法？
4. 原型链式的继承有什么缺点？
5. 说一下浅拷贝和深拷贝的区别？
6. 如何进行深拷贝？
7. 什么是js的执行上下文？
8. js的执行原理是是什么？
9. js的垃圾回收机制了解吗？
10. 介绍一下js的事件循环机制
11. 冒泡和捕获哪个先执行的？
12. 柯里化的实际应用场景有哪些？
13. 什么是闭包，它解决了什么问题，有什么使用场景？
14. a.b.c.d和a[b][c][d]哪种方法访问速度快？
15. Symbol数据类型使用过吗，在什么场景使用的？
16. Proxy中可以使用Symbol吗？
17. ES5如何判断是使用new调用的还是直接调用的？(this instanceOf Person)
18. 简单介绍一下装饰器，它有什么作用？
19. 生成器了解吗？
20. 简单说一下async/await的实现原理？
21. 代理与反射了解吗？
22. es6有什么新特性？
23. Proxy和Object.defineProperty的区别，谁的性能高？
24. babel进行es6到es5的转换原理是什么？

前端框架

1. 什么是受控组件？什么是非受控组件？
2. 虚拟dom一定比真实dom高效吗？
3. react和vue框架的区别，如何进行选型？
4. 单页应用和多页应用的区别，如何实现多页应用？
5. 组件通信的方式有哪些？
6. react和vue的diff算法分别介绍一下？
7. 列表中的key有什么作用，是否可以直接使用索引？
8. 介绍一下vuex和redux的异同点？

React全家桶

这部分内容在一面二面阶段会出现的比较多，主要高频的会问react hook和react fiber，diff算法三部分，时间切片问的极少。redux会问一下它的特性，比如说单一数据源，只读的state状态等等，以及react-redux库的使用。

1. react更新视图的方式？
2. react hook的实现原理？
3. 高阶组件和react hook的异同点？
4. 是否封装过高阶组件，是什么样的场景？
5. useEffect和useLayoutEffect有什么区别？
6. 你使用过哪些react hook，它们有什么作用？
7. react hook useEffect的return函数是在什么时候执行的？
8. react context是如何实现跨层级数据共享的？
9. react函数组件和类组件的区别是什么？为什么现在推崇函数式组件？
10. react生命周期是什么样的，对应的生命周期函数有什么作用？
11. react合成事件简单介绍一下，它有什么优点？
12. react中为什么引入了fiber，它解决了什么问题？
13. react diff算法的时间复杂度是多少？
14. react fiber时间切片算法简单说一下？
15. react有哪些优化方式？纯原生有哪些优化方式？
16. react是如何处理setState传入的方法？
17. react setState是同步还是异步的？
18. react 18 cocurrent mode解决了什么问题？
19. redux的数据流有什么特点，它的可以直接改变状态吗？
20. redux的缺点是什么？
21. redux的原理是什么，如何进行优化，是否可以不使用？
22. 除了redux你用过其他的状态管理库吗？他们有什么区别？
23. mobx用过吗？它有几个store树？
24. react router有哪些方式？(hash, history, memory)
25. react-thunk和react-saga有什么区别？
26. react-saga的实现原理是什么？
27. react中间件做了什么，它的实现思路是什么？

Vue全家桶

Vue因为我近期使用不多，所以被提问的也相对少一些，所以整体频次都不会太高，但是nextTick好多家都问到了。

1. 什么是MVVM？
2. vue的响应式原理？
3. vue实例挂载中发生了什么？
4. provide和inject是如何进行跨层级传递的？
5. vue的生命周期函数有哪些，分别可以做什么？
6. vDom了解吗？
7. vue更新视图的方式？
8. vue的template是如何编译的？
9. 说说从template到render处理过程？
10. vue3有哪些特性知道吗？
11. proxy和Object.definePropery有什么区别，哪个效率更高？
12. 你了解vue的reactivity吗？
13. 在什么情况下你会考虑进行组件封装？
14. 如何基于antd封装自己的组件，如何给其他团队使用，如何同时让其他团队能够使用antd的原本功能？
15. slot插槽的集中形式，以及原理？
16. vue的nextTick中作用以及实现原理？
17. computed和watch的区别，是否可以使用异步？
18. v-for和v-if的优先级哪个更高，2.0和3.0是一样的吗？
19. v-for如何没有设置key，是否会有一个默认的？ 27.说一下vue的双绑和它的原理？
20. v-model和sync修饰符有什么区别？
21. 自定义组件中使用v-model如果想要改变事件名或者属性名应该怎么做？
22. vue的keep-alive的使用场景是什么？
23. 如何定义动态路由，如何获得动态路由的参数？
24. vuex中的响应式是如何实现的？
25. 描述一下状态管理工具的运作方式，它的数据流向，以及如何避免冗余更新？
26. action和mutation有什么区别，为什么要区分它们？

浏览器&网络

网络中最常考的就是浏览器的缓存策略，其次就是2.0的多路复用，以及https和跨域，内容不多，建议下面问题都好好准备一下~

1. http1.0, http1.1, http2.0的区别是什么？
2. http 2.0解决了什么问题，为什么1.X无法解决？
3. http2.0新增了哪些特性？
4. http3.0你了解吗？它是如何解决的TCP队头阻塞问题？
5. TCP和UDP的区别，它们的应用场景分别是什么？
6. 为什么一个域名有TCP链接的限制？
7. 介绍一下HTTP和HTTPS的区别是什么？
8. 你了解中间人攻击吗？
9. 目前主流的http协议使用的是什么版本？
10. 什么是跨域？跨域有哪些解决方法？
11. 跨域的请求是否发送到了服务器端？
12. 跨域是拦截了请求还是拦截了返回？
13. cors可以设置几个域名？
14. cors如何在不设置*的情况下实现多个域名的跨域处理？
15. request header有哪些？
16. cookie有哪些属性？
17. 什么是cdn，使用它能带来什么好处？
18. 介绍一下浏览器的缓存方案？
19. 静态资源一般使用什么缓存？
20. index.html一般使用什么缓存？
21. 强缓存中的expires存在什么问题？
22. 协商缓存中的last-modified存在什么问题？
23. 为什么有的时候写了Eag还会写last-modified，是为了解决什么问题？
24. 从输入url到页面展示发生了什么？
25. DNS解析的ip地址是放在浏览器的哪部分缓存中？
26. 什么是正向代码，什么是反向代理？
27. 反向代理有什么优点？
28. 除了api，还有什么其他方式可以和后端进行交互？(webSocket)
29. 网络层是如何找到ip对应的主机的？
30. 接口请求出现404之后如何进行排查？
31. 打开一个浏览器的标签页会启动哪些进程？

性能优化&前端工程化

webpack非常常考，互联网中大厂非常喜欢问webpack的打包原理，它的plugin和loader怎么写，原理是什么这类问题，也会由此提到比较新的vite。其次性能优化是一定会问到的，这是非常重要的一部分内容。

1. webpack是什么，它的实现原理是什么？
2. 如何使用webpack优化打包速度？
3. 如何使用webpack优化项目？
4. webpack loader原理是什么，写过loader吗？
5. webpack plugin原理是什么，写过plugin吗？
6. webpack loader 和 plugin执行时机分别是什么时候？
7. webpack loader的执行顺序？
8. 讲讲webpack中常用的hooks？
9. webpack的预渲染plugin用过吗？原理了解吗？
10. webpack的热更新原理是什么？
11. webpack原生支持的文件类型有哪些？(js, json)
12. 打包工具使用过吗？使用的是什么版本？
13. 你还使用过哪些打包工具？(gulp, grunt, rollup)
14. webpack和vite的区别？
15. vite为什么目前的使用并不多？
16. sourcemap是什么？
17. 如何进行前端性能优化？
18. 性能监控指标有哪些，如何进行性能监控（多个设备多次，如何保证数据可靠性）？
19. 图片优化除了压缩还有什么方式？
20. 有哪些内存泄漏的场景，如何监控和排查？
21. eslint检查是如何做的？
22. 是否使用过单元测试？组件和副作用如何进行单测？
23. 图片懒加载的原理？

Typescript

这部分内容整体被提问的频率很低，可以根据复习时间再决定是否准备这块～

1. interface和type有什么区别？
2. 你使用过哪些复杂的ts类型？
3. ts的any和unknown有什么区别？
4. ts的declare使用过吗？什么场景使用的？作用是什么？
5. ts的函数重载介绍一下？
6. ts泛型的使用场景？

跨端&Hybrid

关于移动端适配问的最多的就是响应式布局。由于我自身有短暂的跨端经验，所以会有一些相关问题，如果没有的小伙伴可以直接跳过。

1. 如何进行移动端适配？
2. hybrid中客户端和h5是如何进行通信的？
3. 项目中跨端开发的降级方案用的是什么？
4. 如何在手机端h5页面进行断点调试？
5. react native打包构建，如何生成一个apk包？
6. react native渲染机制？
7. react native的css写法和react的css写法有什么区别？
8. 移动端适配修改scale会对canvas性能产生什么影响？
9. 如何实现0.5px的线条？
10. weex为什么不支持动画？
11. weex和rn对比，优缺点？
12. 跨端开发中遇到了哪些坑，是如何解决的？

前端安全

1. 你了解SQL注入吗？
2. 简单介绍一下XSS攻击？
3. CRSF攻击是如何实现的，有什么预防措施？
4. 你还了解哪些前端安全问题？
5. dangerouslySetInnerHTML会产生什么问题？

微前端

大家都知道，微前端的概念来自微服务，目前主要有systemjs，single-spa，和模块联邦这三种，最火的也就是基于single-spa的qiankun框架，由于我没有实际业务的使用情况，所以只是问了一些基础问题，有相关项目经验的小伙伴需要再多做点准备，如果和我一样没有微前端经验的，以下四个问题就差不多了。

1. 什么是微前端？它解决了什么问题？
2. 微前端的实现方式有哪些？
3. 基于webpack5的模块联邦你了解吗？
4. 你使用过qiankun吗？子应用之间是如何隔离的？

代码执行题&手撕代码&算法

• 代码执行题：主要考虑会考察面试者对于事件循环，this指向这两块。
• 八股的手撕题目：主要是数组去重，数组扁平化，Promise，和柯里化，剩下的可能需要看实际的题目上下文，很难去总结。
• 算法题目：作为前端，其实考算法的公司并不多，即使考了算法，一般难度也不会很大。主要涉及的就是数组链表的双指针(左右指针和快慢指针)，数组的排序，树的遍历和分解子问题，以及由此衍生的回溯算法和动态规划(动规考的也很少)。

1. 手撕：数组去重，分别用es6，es5方法来写？
2. 手撕：阿拉伯数组转中文数字描述，如99->九十九，124->一百二十四。
3. 手撕：尽量全面的考虑和实现一个深拷贝？
4. 手撕：是否有insertAfter这个方法，实现一个？
5. 手撕：实现一个自动执行的Task里面有add，run，stop方法。
6. 手撕：弹窗管理的实现，按照zIndex排序，add，remove，clear，getPopupList。
7. 手撕：防抖&节流，实现一个先立即执行的防抖。
8. 手撕：对象内的key从下划线转为小写驼峰。
9. 手撕：使用react或者vue实现一个倒计时页面。
10. 手撕：小写字母➕数字，写一个函数，输入随机数的长度，返回该长度的字符不重复的字符串。
11. 手撕：实现一个函数计算对象占用内存空间大小。
12. 手撕：Promise.allSettled
13. 手撕：解析url参数为对象
14. 手撕：写出三种以上垂直居中方法
15. 手撕：Promise.all
16. 手撕：使用es5和es6分别实现数据扁平化，是否可以使用reduce去实现？
17. 手撕：sum(1,2,3) => sum(1)(2)(3)/sum(1,2)(3)
18. 手撕：实现compose函数。
19. 手撕：实现弹窗点击，其余部分弹窗消失。
20. 手撕：发布订阅模式的on, off, emit。
21. 手撕：实现一个带并发限制的异度调度器 Scheduler，保证同时运行的任务最多有两个。
22. 手撕：页面上有三个按钮，分别为 A、B、C，点击各个按钮都会发送异步请求且互不影响，每次请求回来的数据都为按钮的名字。请实现当用户依次点击 A、B、C、A、C、B 的时候，最终获取的数据为 ABCACB。
23. 算法：深度优先搜索二叉树求每条路径的和。
24. 算法：全排列。
25. 算法：判断一副牌是否有同花顺。
26. 算法：反转链表，反转局部链表。
27. 算法：有哪些排序算法，他们最好和最坏的时间复杂度是什么，实现一个快排。
28. 算法：二叉树的最长递增子序列。
29. 算法：数组重叠区域合并问题。
30. 算法：最长连续序列(128)
31. 算法：[1,0,1,1,1,1,0,0,0,1]类似这样的数组，将所有1放到一起，最少需要挪动多少次？（数值交换算一次）
32. 阅读：关于宏任务和微任务的代码执行题。

async function async1() { 
    console.log('async1 start'); 
    await async2(); 
    console.log('async1 end'); 
} 
async function async2(){
    console.log('async2');
    await async3();
} 
async function async3(){ 
    console.log('async3')
} 
console.log('script start'); 
async1(); 
setTimeout(() => { console.log('setTimeout'); })
new Promise((resolve) => { 
    resolve()
    console.log('promise start');
}).then(() => { 
    console.log('promise end'); 
    })
console.log('script end')

32. 阅读：关于this指向的代码执行题
33. 阅读：react异步相关的代码执行题

const [number, setNumber] = useState(0); 
useEffect(() => {
    setNumber((num) => { 
        console.log(num); 
        return num + 1;
    }); 
   console.log("一"); 
   setNumber((num) => { 
       console.log(num);
       return num + 1;
   }); 
   console.log("二"); 
   setNumber((num) => { 
       console.log(num); 
       return num + 1; 
   }); 
   console.log("三"); 
  }, []);

34. 阅读：代码执行题

obj = { 
    a: 1,
    b: 2, 
    length: 2,
    push: Array.prototype.push, 
    pop: Array.prototype.pop,
 } 
obj.push(1)

场景题

1. 如何在不压缩图片的情况下，上传大图？
2. 如何在刷新页面的时候仍然保持输入框中的数据？
3. 活动报名页，可以上传头像和文字输入有什么要注意点的吗？
4. 一场马拉松，有十万人参加，全长43km，排名以秒为单位进行更新。如何设计一个数据结构，能够使得每个参赛者可以快速查看自己的排名以及自己前后10名的运动员？
5. 如何做一个登陆页，需要考虑哪些点？
6. 如何进行图片数据的分段传输？
7. 如何实现一个虚拟列表，不定高度如何实现呢？
8. 如果无限列表的每个item高度不一致，你要怎么解决防抖？
9. 如何实现单行文本和多行文本超出省略的场景？
10. 如何实现两个接口并行请求，完成后请求第三个接口，如果不使用promise如何实现？
11. 首页拉取接口非常多，如果有100多个http请求，要如何进行优化？

其他

1. 有哪些常用的设计模式？
2. 发布订阅模式和观察者模式有什么区别？
3. 什么是base64？
4. md5是什么算法？是否可以还原？
5. 移动端和PC端的业务中分别需要注意的点(各三个)？
6. 前端的发展趋势和未来方向？
7. 开发过程中遇到过什么棘手的问题，如何解决的？
8. 你的优点和缺点是什么？
9. 哈希的原理和方法，如何解决哈希冲突？
10. 介绍下工作中的项目开发流程？
11. 使用过哪些ui库，简单对比一下优缺点？
12. 前端如何进行错误上报？
13. 如何在没有sourcemap的情况下进行断点调试？
14. 业界的埋点方案有哪些？
15. 自动全页面埋点的热力图如何生成，这种埋点方式有什么问题？
16. 针对SEO项目中做过什么处理？
17. git hook的原理是什么？
18. swr的请求方式了解吗？
19. 如何实现国际化？
20. 你未来的职业规划是什么？
21. 你在这一年中有什么成长？
22. git fetch和git merge有什么区别？
23. git如何进行代码回退？
24. 如何进行代码质量的保证？

总结

在开始投简历之前，我其实也有进行持续三个星期的复习，主要做了以下几件事：

• 回忆了一下之间工作中的项目和需求做了一个文档整理。之后在写简历的时候挑几个相对能看的功能点写在简历上
• 前端基础知识的复习，包括js/css/html，重点复习了react原理和它的重点部分的源码，了解一下react 18的新特性。复习了redux和一些中间件的原理，vue部分也稍微复习了一些，因为我有相关经历，但是因为近期不太用了，所以准备度不是很高。
• 算法部分如果说你的目标公司不是互联网大厂，其实可以考虑跳过的，咱们在面试之前，也是可以打听到哪些公司考算法，哪些公司不考的。准备的话也就是数组链表和树就可以啦～
• 最后一点很重要，也是我自己的薄弱点(实在来不及弥补了😭)。今年整体趋势来看，非常喜欢问场景题和项目。一些场景题是需要面试者本身有比较多的业务积累，才能更快更好的提供一个相对完整且合理的方案，这部分能搞定非常加分。其次项目部分，准备好自己的项目亮点，遇到了什么问题，解决了什么问题，自己在团队中承担什么样的角色等等这些问题是非常重要的!

写在最后

今年整体行情感觉还是寒气逼人的，市场上有机会，但是好的机会不多，如果是跳槽需要慎重考虑，因为我自己其实是全国投递，所以感觉起来机会数量上：北京 > 上海 > 深圳 > 杭州(仅代表我个人观点)。

最后，祝大家都能够找到心仪的工作，问题的答案我会陆续更新的～