3月面了几场前端岗，感觉世界就是一个巨大的草台班子！！！

安安868
0 阅读21分钟

3月，春招黄金期，我满怀信心地投了十几家公司，结果面了几场下来，整个人都麻了——原来所谓的“大厂面试”，不过是一个巨大的草台班子。

第一场：某知名互联网公司

面试官上来就问：“你用过React Hooks吗？”

我心想，这题我会！于是把useState、useEffect、useMemo背得滚瓜烂熟。

他听完，沉默了三秒，然后问：“那你说说，useEffect和useLayoutEffect的区别，除了执行时机，还有什么？”

我愣了一下，把标准答案说了。

他又沉默了三秒：“那你知道React为什么要设计两个吗？如果让你重新设计，你会怎么合并？”

我：？？？

这还没完，最后他扔过来一道手写题：“实现一个带过期时间的LRU缓存。”我写完了，他看了看说：“你这个get的时间复杂度O(1)吗？怎么证明？如果并发访问呢？”

我心态崩了。

第二场：某独角兽公司

这次面试官看起来挺和善，开场先闲聊了几句，我以为稳了。

然后他打开一个在线编辑器：“我们写个简单的虚拟列表吧，支持动态高度，还要能快速滚动不卡顿。”

我写了半天，他一直在旁边“嗯嗯”，最后说：“你这里用了resizeObserver，那如果dom元素很多，性能会不会有问题？怎么优化？”

我：……

最绝的是，面完HR反馈：“你技术基础不错，但我们想要一个能独立负责项目的，你项目经验稍微浅了点。”

我心想，我刚毕业，哪来的独立负责项目经验？

第三场：某大厂暑期实习

面试官开场就问：“你平时用AI写代码吗？”

我说用啊，Copilot挺好用的。

他点点头：“那你有没有遇到过AI生成的代码是错的？你怎么发现和修正的？”

我：……（开始编）

然后他追问：“如果团队里有人过度依赖AI，导致代码质量下降，你怎么推动改进？”

我彻底麻了，这哪是面前端，这是面CTO吧？

面试多了，我发现一个真相：

面试官自己都搞不明白想要什么样的人。

有的问八股文问得极深，问到源码某一行注释；有的问场景题，问题本身逻辑都不自洽；有的干脆全程念题库，我问反馈他说“我们统一标准”。

更离谱的是，有一家公司面完，面试官说：“我觉得你挺适合的，但我们HC突然冻结了，不好意思。”

我：？？？那您面我干嘛？

后来实在面不动了，找在字节工作的朋友寻求帮助，他直接给我扔了一份github刷题文档，其中包含

  • 虚拟列表动态高度？有！还给了三种实现方案！
  • useEffect和useLayoutEffect设计取舍？有！从源码角度拆解！
  • LRU缓存并发访问？有！手写题+追问解析！
  • 大文件上传断点续传？有！切片、hash、秒传逻辑全都有！
  • 微前端、性能指标、类型体操……全都有！

我像是拿到了考卷答案，再去面试时，基本上面问的那些都能扯一些应对，极大的降低了面试难度，头回感觉面试好像在刷词汇量一样，后面也是如愿收了三份offer，找了一个待遇好的火速入职，这三月我是一点都不想继续面试了！

现在我才明白：

面试不是考你会不会干活，而是考你能不能扛住面试官的“随机追问”。
而这些追问，其实是有套路的——刷对资料，就能提前预判。

八股原理部分

JavaScript

  1. 相比于npm和yarn，pnpm的优势是什么？

  2. 如果使用Math.random() 计算中奖概率会有什么问题吗？

  3. 怎么使用js实现拖拽功能？

  4. 举例说明你对尾递归的理解，以及有哪些应用场景

  5. 说说你对 Iterator,Generator 和Async/Await 的理解

  6. 说说你对模块化方案的理解，比如CommonJS、AMD、CMD、ES Module...

  7. 前端跨页面通信，你知道哪些方法？

  8. JavaScript脚本延迟加载的方式有哪些?

  9. 怎么理解ES6中Generator的？使用场景有哪些?

  10. 导致页面加载白屏时间长的原因有哪些，怎么进行优化?

  11. 微前端中的应用隔离是什么，一般是怎么实现的？

  12. JavaScript对象的底层数据结构是什么？

  13. 浏览器和Node中的事件循环有什么区别？

  14. 版本号排序

  15. 你是怎么理解ES6中Proxy的？使用场景有哪些？

  16. Promise中的值穿透是什么？

  17. 你是怎么理解ES6中Decorator的？使用场景有哪些？

  18. 如果要实现一个类似“谷歌图片”的系统，你会有哪些方面的考虑？

  19. js中数组是如何在内存中存储的？

  20. JavaScript中的sort方法是怎么实现的?

  21. 什么是PWA?

React.js

  1. fiber架构的工作原理？

  2. React Reconciler 为何要采用 fiber 架构?

  3. useState是如何实现的?

  4. React Fiber是什么？

  5. 简单介绍下React中的diff算法

  6. 如何让 useEfect 支持 async/await?

  7. React中怎么实现状态自动保存(KeepAlive)？

  8. ReactFiber是如何实现更新过程可控？

  9. react中懒加载的实现原理是什么？

  10. React有哪些性能优化的方法？

  11. 不同版本的React都做过哪些优化？

  12. React18新特性

  13. 说说你对ReactHook的闭包陷阱的理解，有哪些解决方案？

  14. React 中，怎么给children 添加额外的属性？

  15. Fiber为什么是React性能的一个飞跃?

  16. react是否支持给标签设置自定义的属性，比如给video标签设置webkit-playsinline?

  17. 说说React render阶段的执行过程

  18. React中，fiber是如何实现时间切片的？

  19. React 中为什么不直接使用requestIdleCallback?

  20. 说说React commit阶段的执行过程

  21. React中的路由懒加载是什么？原理是什么？

  22. 为什么useState返回的是数组而不是对象？

Vue.js

  1. Vue模板是如何编译的

  2. vue3相比较于vue2，在编译阶段有哪些改进?

  3. 说说Vue页面渲染流程

  4. Vue项目中，你做过哪些性能优化？

  5. 如果使用Vue3.0实现一个Modal，你会怎么进行设计？

  6. Vue3.0里为什么要用ProxyAPI替代defineProperty API?

  7. Vue有了数据响应式，为何还要diff？

  8. 说说vue3中的响应式设计原理

  9. 说说 Vue 中 CSS scoped 的原理

  10. vue3的响应式库是独立出来的，如果单独使用是什么样的效果？

  11. 手写vue的双向绑定

  12. 什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

  13. SSR是什么？Vue中怎么实现？

  14. 说下Vite的原理

  15. Vue2.0为什么不能检查数组的变化，该怎么解决？

  16. React和Vue在技术层面有哪些区别？

  17. 说说vue中，key的原理

  18. 谈谈Vue 事件机制，并手写on、on、off、emit、emit、once

  19. vue文件中，在v-for时给每项元素绑定事件需要用事件代理吗，为什么？

  20. Vue中，created和mounted两个钩子之间调用时间差值受什么影响？

  21. Vue怎么实现权限管理？控制到按钮级别的权限怎么做？

  22. Proxy 和 Object.defineProperty 的区别是啥？

  23. Vue3.0的设计目标是什么？做了哪些优化？

  24. vue文件中，在v-for时给每项元素绑定事件需要用事件代理吗，为什么？

  25. Vue中，created和mounted两个钩子之间调用时间差值受什么影响？

Typescript 面试题

  1. 如何检查TypeScript中的null和undefined？

  2. 如何将unknown类型指定为一个更具体的类型？

  3. Typescript中什么是类类型接口？

  4. 说说你对typescript 的理解？与javascript的区别？

  5. 什么是TypeScript Declare关键字?

  6. in运算符作用是什么？

  7. 纯TS项目工程中，如何使用alias path?

  8. 使用TS实现一个判断传入参数是否是数组类型的方法

  9. TypeScript 中的 getter/setter是什么？你如何使用它们？

  10. unknown是什么类型？

  11. never是什么类型，详细讲一下

  12. extends条件类型怎么定义？

  13. 如何在TypeScript中实现继承？

  14. 说一说TypeScript中的类及其特性。

  15. 请实现下面的sleep方法

  16. TypeScript中的方法重写是什么？

  17. tsconfig.json文件有什么用？

  18. Typescript中never 和void 的区别？

  19. typescript 中的is关键字有什么用?

  20. TypeScript中的类是什么？你如何定义它们？

  21. 什么是TypeScript映射文件?

  22. TypeScript中的类型有哪些?

  23. Typescript中 interface 和 type 的差别是什么?

  24. 解释如何使用TypeScript mixin。

  25. ts中any和unknown有什么区别？

  26. Typescript中泛型是什么?

  27. 什么是Typescript的方法重载？

  28. infer关键字是什么?

Webpack 面试题

  1. webpack 中 module、chunk、bundle 的区别是什么？

  2. 说说你对前端工程化的理解

  3. webpack loader 和 plugin实现原理

  4. 为什么webpack可以通过文件打包，让浏览器可以支持CommonJs规范？

  5. webpack tree-shaking 在什么情况下会失效?

  6. 微前端中的路由加载流程是怎么样的？

  7. 说下Vite的原理

  8. 说说webpack的构建流程？

  9. 说说你对Source Map 的了解

  10. ES6代码转成ES5代码的实现思路是什么?

  11. webpack的module、bundle、chunk分别指的是什么？

  12. 浏览器是否支持CommonJs规范？

  13. webpack treeShaking机制的原理是什么？

  14. package.json里面sideEffects属性的作用是什么？

  15. 什么情况下会导致webpack treeShaking失效?

  16. 为什么SPA 应用都会提供一个hash路由，好处是什么？

  17. webpack分包的方式有哪些?

  18. babel的工作流程是怎么样的？

  19. npm script了解多少?

  20. 前后端分离是什么？

  21. 介绍一下tree shaking 及其工作原理

  22. webpack是如何给web应用注入环境变量的，说说它的原理

  23. 说说如何借助webpack来优化前端性能？

性能优化 面试题

  1. 怎么统计页面的性能指标？

  2. 导致页面加载白屏时间长的原因有哪些，怎么进行优化？

  3. Service Worker是如何缓存http 请求资源的?

  4. 如何优化DOM树解析过程？

  5. DNS预解析是什么？怎么实现？

  6. 虚拟DOM一定更快吗？

  7. 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？

  8. React.memo()和 useMemo() 的用法是什么，有哪些区别？

  9. SPA首屏加载速度慢的怎么解决

  10. 在React中可以做哪些性能优化?

  11. 前端性能优化指标有哪些？怎么进行性能检测？

  12. 怎么进行站点内的图片性能优化？

  13. 什么是内存泄漏？什么原因会导致呢？

  14. 浏览器为什么要请求并发数限制？

  15. css加载会造成阻塞吗？

  16. 以用户为中心的前端性能指标有哪些？

  17. 有些框架不用虚拟dom，但是他们的性能也不错是为什么？

  18. 谈谈对window.requestAnimationFrame的理解

  19. 页面加载的过程中，JS文件是不是一定会阻塞DOM和CSSOM的构建？

  20. 衡量页面性能的指标有哪些？

  21. 讲一下png8、png16、png32的区别，并简单讲讲png的压缩原理

  22. CSR、SSR、SSG、NSR、ESR、ISR 都是什么?

  23. 说说常规的前端性能优化手段

场景 面试题

  1. 怎么在前端页面中添加水印？

  2. 如何封装一个请求，让其多次调用的时候，实际只发起一个请求的时候，返回同一份结果

  3. web网页如何禁止别人移除水印

  4. react中怎么实现下拉菜单场景，要求点击区域外能关闭下拉组件

  5. React 如何实现vue 中 keep-alive 的功能?

  6. 如何监控前端页面的崩溃？

  7. 如何搭建一套灰度系统？

  8. 如何在前端团队快速落地代码规范

  9. 前端如何实现即时通讯？

  10. 用户访问页面白屏了，原因是啥，如何排查？

  11. 如何给自己团队的大型前端项目设计单元测试?

  12. 如何做一个前端项目工程的自动化部署，有哪些规范和流程设计？

  13. 你参与过哪些前端基建方面的建设？

  14. 假如让你负责一个商城系统的开发，现在需要统计商品的点击量，你有什么样设计与...

  15. 前端怎么做错误监控？

  16. token过期后，页面如何实现无感刷新？

  17. 如何解决页面请求接口大规模并发问题

  18. web应用中如何对静态资源加载失败的场景做降级处理？

  19. 什么是单点登录，以及如何进行实现？

  20. SPA首屏加载速度慢的怎么解决

  21. 站点一键换肤的实现方式有哪些？

  22. 实现table header 吸顶，有哪些实现方式？

  23. 怎么实现扫码登录？

  24. 如果用户说web应用感觉很反应慢或者卡顿，该如何排查？

  25. 如何设计一套统计全站请求耗时的工具

  26. 你是怎么理解前端架构的？

  27. 怎么分析页面加载慢的原因？

  28. 为什么在技术选型中选择了webpack?

  29. 如果想在小程序中嵌入markdown的文档，你有什么思路？

  30. 前端如何实现截图？

项目亮点难点

1.如何防止重复提交

一般使用的是防抖和节流，节流函数通过控制每次时间执行的时间间隔，控制短时间多次执行方法。防抖函数是推迟每次事件执行的时间减少不必要的查询。但是网络慢的时候，还是会重复提交，没有显示状态，用户不知道有没有真的提交。所以就给按钮添加一个加载状态，查了发现el-button自带了loading属性，传参的时候传一个submit函数，是一个Promise,promise状态改变的时候把loading状态改成false。然后点击按钮会有加载动画，加载的时候，按钮是禁用的。

2.控制ajax执行先后顺序

一个按钮发送2个ajax请求，不会按顺序，因为是异步请求，浏览器可以并行执行，执行快慢看的是响应数据量大小和后台逻辑的复杂程度，为了保证顺序，就是是最后的结果，需要改成同步，ajax请求后台数据，获取数据之后渲染到页面，就需要同步。请求加一个async:false,就可以让ajax会同步执行。但是请求时间比较长需要loading层显示等待状态，但是浏览器渲染线程和js线程互斥，执行js的时候页面渲染会阻塞掉，让ajax函数后面的代码还有渲染线程停止，就算dom操作语句是发起请求的前一句，也会被阻塞，出现假死卡顿现象，所以可以引入JQuery中的对象deferred进行封装异步函数，对多个deferred对象进行并行化操作，当所有deferred对象都得到解决就执行后面添加的回调。

3.解析数据

填写信息的页面，返回的时候填写信息需要留存，要用vue的keep-alive实现

4.axios用post请求数据会被拦截，传不到后端

ajax请求可以拿到数据，axios就拿不到，因为axios的post默认参数格式是字符串，传给后端的数据需要用请求拦截器做处理。可以引入qs库，对data进行处理：qs.stringifyfy。Qs装axios的时候自动安装了。

5.路由懒加载

需要的时候进行加载，把不同路由对应的组件分成不同代码块，路由被访问才加载对应组件。路由会定义很多页面，页面打包后放到单独的js文件会导致非常大，懒加载把页面进行划分，需要时才加载，减少首页加载速度，懒加载主要就是把对应组件打包成js代码块进入首屏不用加载过度的资源，从而减少首屏加载速度。就是用import，在路由配置的router.js，import设置好的组件，from后面写的是组件的路径

6.实现从详情页返回列表页保存上次加载的数据和自动还原上次的浏览位置。

7.Storage封装

8.Proxy实现跨域（vue项目)

9.断网处理

10.scoped时修改子组件样式

11.跳转页面后停止定时器

12.v-model进行父子组件双向数据绑定

13.解决vuex持久化

14.使用history模式后访问内容页，刷新会404

15.菜单权限用动态添加路由addRoutes解决

16.vue项目中用v-fofor 循环本地图片， 图片不显示

项目细节及疑难点

  1. 测试和调试

2.跨域请求问题

3.数据安全和隐私保护

4.移动端触摸事件处理

  1. 性能优化

6.响应式布局的挑战

7.浏览器兼容性问题

8.获取首页链接里面的参数问题

  1. 更新文件缓存的坑

10.解析后端返回的map格式数据的坑。

  1. vue组件动态加载的坑

12.页面缓存的坑。

13.路由传参的功能的坑。

  1. axios请求中post请求的坑。

15.为什么需要二次封装组件库？

16.请结合一个组件库设计的过程，谈谈前端工程化的思想

17.如何对一个组件库进行测试？

18.在使用qiankun时，你如何处理多个子项目的调试问题？

19.你能解释一下 qiankun 如何实现keep-alive的需求吗?

20.在使用qiankun时，你如何处理js沙箱不能解决的js污染问题？

21.在项目中有没有单独封装组件

22.在项目中发送请求怎么携带token

23.工作中有用到git吗

  1. git版本发生冲突你怎么解决的

25.如何快速让一个盒子水平垂直居中

26.首屏加载白屏怎么进行优化

27.路由传参 query与 params区别

28.项目基础优化

29.对SnextTick异步渲染的理解

30.你是怎么对axios进行二次封装的，有什么作用

31.用戶token失效你是怎么处理的

32.说一下项目的流程

33.商品和增删改查

34.Element-UI的form表单验证你是怎么使用的

35.项目中的商品详情页你是怎么实现的

36.什么是数组扁平化

37.你这个项目登陆是怎么实现的

38.项目中的权限管理怎么实现的

39.Vue的$nextTick0方法有用到过吗

40.深拷贝与浅拷贝

41.在Vue是项目中如何打开新的页面

42.请解释一下微前端的概念以及它的主要优点和挑战？

43.你能详细描述一下qiankun微前端框架的工作原理吗？

44.在使用qiankun时，如果子应用是基于jQuery的多页应用，你会如何处理静态资源的加载问题？

45.在使用qiankun时，如果子应用动态插入了一些标签，你会如何处理？

46.在使用qiankun时，你如何处理老项目的资源加载问题？你能给出一些具体的解决方案吗？

47.你能解释一下qiankun的start函数的作用和参数吗？如果只有一个子项目，你会如何启用预加载？

48.axios-请求中post请求的坑

  1. 路由传参的功能的坑

50.页面缓存的坑

  1. vue组件动态加载的坑

  2. 解析后端返回的map格式数据的坑

  3. 更新文件缓存的坑

54.h5页面打开调试日志

55.获取首页链接里面的参数问题

  1. h5里面的搜索

57.登录接口bug

58.封装的请求方法不需要在传入相同的参数。

59.进来不在index.htmI文件里面引I入公共的文件

60.你做的项目中都使用过那些中间件呢？

61.你在开发过程中有什么因难点（或者使用了什么技术）

62.会写接口吗？项目你负责什么?

63.你之前做过小程序吗？主要包括哪些功能？

64.这个小程序的具体设计逻辑是怎么样的？有几个人开发？周期多长？在你离职时，这个小程序项目是否还在开发？或者你离职时，你们公司在开发什么？

65.你说你负责支付环节，那么微信支付的流程是否可以简单说一下？

66.那好，既然流程说完了，那么，我问你，你这个项目涉及到了mb，它在用戶点击支付之后的逻辑关系和表关系你是怎么理解的？有多少张表？表关系？

67.你觉得这个小程序项目的细节之处有哪些？

68.如何自定义tabbar?

69.你刚才提到了异步，在这个项目中你是否被异步坑过，最后又是如何解决的？

70.你能描述一下渐进增强和优雅降级之间的不同吗？

71.为什么利用多个域名来存储网站资源会更有效？

72.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用戶更好的体验。

73.一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？

  1. 前端如何进行登录身份的判断

75.电商项目跟其它项目有什么不同？

  1. 实践题

77.项目开发中有遇到什么挑战没？

78.项目研发流程中作为前端开发一般扮演的啥角色？

79.现在有的项目中觉得哪些项目可以继续优化，为啥没有优化?

80.平时写项目总结么，一般总结哪些东西？

81.请简单绘制登录场景的业务流程图，如不熟悉登录业务，也可以选择自己之前项目的业务简单说明。

82.项目上线后，会将index.html给后端，在地址栏上输入www.abc.com，当在地址后面缀上/layout 回车后，页面会报404，是否遇见过这个问题，又该如何去解决?

83.项目中由谁定接口，公司文档如何管理，由谁负责上传代码，怎么上传代码的，项目发布都是怎么做的？

84.请你说说高级前端工程师和初级以及中级有什么区别？

85.用过echars与highchars么，你遇到哪些问题及如何解决的

86.项目开发中是用什么工具来管理代码的；说一下你是用过的工具用法（git、svn）

87.讲一下最近的这个项目中都负责什么

88.怎么判断是开发环境生产环境

89.Vue如何在用戶没登陆的时候重定向登录界面？

90.Vue项目常见优化点

91.异步解决方案有哪些？

92.移动端点击事件300ms延迟如何去掉？原因是什么？

93.如何实现函数的柯里化？比如add(1)(2)(3）

94.什么是反柯里化

95.如何避免回调地狱？

96.开发过程中遇到内存泄漏的问题都有哪些？

97.浏览器有哪些兼容问题，你封装过什么插件

98.假如A页面我定义了一个定时器，然后跳到B页面如果让A页面的定时器暂停

99.深拷贝是什么？项目哪里是用到了深拷贝？

100.swiper插件从后台获取数据没问题，css代码啥的也没问题，但是图片不动，应该怎么解决？

101.常见内存泄漏

102.插入几万个dom，如何实现页面不卡顿？

以上可公众号：大厂前端开发攻城狮

avatar
文章
阅读
粉丝