【铁九铜十】2023 年前端面试经验分享

莫西干式秃头
1,289 阅读15分钟

背景

闲聊一下，base 上海，非大厂，传统企业IT部门。

目前行情，懂得都懂，公司裁员（不裁我，没有大礼包名额😭），主要还是太穷了，不然还不起贷款了，所以润了。

断断续续面了一个多月吧，大概 10 家左右，差不多行了。

简单分享一下面经，有需要的自取，大佬可以回避了。

某300人+公司

一面（电话）

1. 自我介绍

好好准备一套话术提炼一下，基本就是从几年工作经验，之前几家公司，最近一家公司呆了几个部门，挑重点简单说一下涉及哪些项目，有没有契合该岗位的业务类型。（哥哥～得自我营销了啊）

最后补充下自己的技术栈（个人对react，前端工程化，性能优化等有一定的了解和实践）（根据自身情况补充），引导一下面试官，内心OS：就问这些，别的别问~

2. react组件传参有哪些方式？

多回答点总归有好处，记得4年前的一次阿里外包面试就是这个问题，面试官一直问：还有呢？还有呢？可以不要仅限于react哦

  • 父传子，子传父，context，状态管理（redux、dva、mobx等）、window、localstorage、sessionstorage、cookie等、扔后端让他给你socket推送，就问你能不能组件通讯吧！

3. hooks解决了什么问题？

  • 状态逻辑复用，之前函数组件是无状态的
  • 主要是hooks和class组件的区别，以及fiber重构之后带来的优势等
  • 这个自行百度吧，网上很多

4. react.lazy有使用过吗？

  • 可以讲一下react.lazy的实现原理
  • 动态import的实现原理，webpack是怎么处理动态import的，怎么拆分的chunk，最后实现了什么？
  • 配合suspence一块说，suspence的原理，suspence的状态是怎么发生改变的？fallback什么作用？
  • 总结，这么做是为了什么？组件异步导入的优势？等等~

5. useEffect return 函数的执行时机？

  • 当时面试官只想问个组件卸载的时候执行。。。
  • 从源码的角度回答会更好，commit阶段下一次渲染之前先执行上一次的return函数（区分mount阶段和update阶段）。。。有点忘了

6. redux的中间件用过哪些？

  • redux-thunk，redux-saga，logger，等
  • 可以再补充下，最好顺便讲一下洋葱圈模型

7. 用过哪些 hook，包括自定义 hook，和开源的 hook

  • react至今为止官方就已经有22个hook了，随便聊聊吧，不过大概率会问一些区别之类的
  • 最常见的就是effect和layoutEffect的区别，useState和useReducer、useMemo，useCallback加上memo函数的区别，以及react18新增的hook。最典型的就是useDeferredValue和useTranstion的区别。
  • 可以源码角度讲一些useState的执行流程，useEffect的执行流程。
  • 自定义hook自由发挥，讲讲自定义hook要注意什么，简单的就是自己实现一个useDebounce、useThrottle
  • 开源hook => ahooks

10. ts常用工具函数？infer 推断用过没？

  • 常用的举例说一说吧，infer不熟，讲不好- -

11. node写过没，在哪些地方用过？

  • node做的少，大致聊了些主流node框架（别说不会，也别说没经验，懂得都懂）
  • express、koa、egg、nest了解（demo）
  • 撸webapck的时候会用到，写webpack插件的时候会用到
  • ...讲个差不多就行了，但是也不要挖太多坑（主要还是看面试官吧）

12. dockerfile 的最佳实践？

  • 感觉面试官的大致意思就是有没有总结一套比较适用前端的这么个东西，以及通用基础镜像（看着回答吧）
  • 基础镜像是自定义的还是公司统一提供的
  • 附带吹一下自己总结的常见的docker部署时的报错，sed命令报错汇总（主打就是一个善于总结，做一个有心人）

13. sentry相关

  • 这家问得比较浅，简单的聊聊就完了（后面的面试题还有类似的，到时候再补充下）

14. useSWR 和 react-query这类的请求库

  • 大致了解，简单的说了下使用方式和常规请求库比较的优势

二面（现场）

1. 自我介绍

  • 略

2. 项目中的亮点、难点

最好自己提前准备几条，比较拿的出手的点（很重要）

3. http1.1和 http2.0的区别

  • 首部压缩
  • 多路复用
  • server push
  • 二进制传输
  • http2 对比http1.1 的优势
  • 丢包问题呢？
  • 可以自己再拓展细节点

4. 如何检测内存泄露？如何解决？

  • 浏览器F12 memory
  • 借助第三方工具库、performanceAPI里也有
  • gpt再查一下（略）

5. ts keyof

6. ts interface 和 class的区别

7. 方法的重载和重写

8. 超长数据列表10W+的数据如何解决？

  • 经典问题
  • 先和后端友好协商，哥哥要不要分页啊？
  • 虚拟列表，虚拟列表 的实现原理？可视区渲染
  • 虚拟列表快速滚动会发生什么？如何解决？

这个问题也很经典，携程一面也问到了，建议找一篇长列表优化的终极解决方案好好看一下。

9. 股票软件一列10w+，滚动条直接滚动到中间，如何显示？

10. CI/CD流程，docker 环境变量部署之后不生效的缓存相关问题

11. 前端设计模式，你用过哪些？

  • 常用的说一下（单例、工厂、策略、观察者、发布订阅、代理、装饰器等）

12. 策略模式和简单工厂模式有啥区别？

  • 有的可能还会问观察者和发布订阅啥区别

13. 一些工程化相关的问题，前期的代码风格校验和自动部署等。

14. 组件库的建设

创业AI公司

1. 自我介绍

2. 你做过的最亮眼的项目和成果是什么？

  • 举例说的性能优化，大致思路是这样子。
  • 首先性能优化分为很多阶段，按照正常的项目流程分为：首屏优化、运行时优化、构建时优化（冷启动、热更新、build）、CI/CD阶段优化
  1. 首屏：
经典面试题，从输入url到页面加载完毕发生了什么？
不要一上来就说解决方案，可以先讲自己的思路，比如我手写了一个首屏性能分析工具
性能数据的采集，通过performanceAPI，web vitals等
常见的性能指标有哪些？fp fcp lcp tti cls等，名词解释是什么？各指标多少s内算优秀？
不借助此类库还有什么方法？lighthouse，network
优化方案：拆包（为什么要拆包，为什么拆包后会变快？拆包要注意什么？引出http各个版本之间的区别）、cdn、gz压缩、预加载、预请求、处理首屏串行接口（BFF）、缓存（浏览器缓存、http缓存、ng缓存、service-worker）等等。
优化过程中遇到了哪些问题？
怎么解决的？
Docker 环境变量替换为什么不能用 compressionPlugin 进行 gzip 压缩？替代方案：ng 压缩
  1. 运行时：
具体问题具体分析，大多代码逻辑问题
大量的前端数据处理可以考虑使用web-worker
  1. 构建：
webpack性能优化搜一下吧，还有别的构建工具、插件、loader等
  1. CI/CD
考虑CI阶段的node-modules缓存，避免重复安装依赖，只有在依赖变更的时候再安装

3. react setState是同步还是异步？

  • 异步，但是“假异步”，引出批处理的概念
  • 异步的表现在react的不同版本上会有差异，18之前的Legacy 模式在宏任务等react处理不到的地方表现为同步更新。18之后的current mode不管是不是宏任务，都是批处理

4. 能不能再 react 非concurrent mode下实现一个 setTimeout 内可以异步的 setstate（源码改造）？

  • 比如在17的Legacy Mode情况下改造一个可以在setTimeout里批处理的setState
  • 不会

5. react 为什么要采用 fiber 架构？

15-16的差异，核心目的是为了实现异步可中断更新
15的表现是什么样子？
之后改成了什么样子？
fiber是什么数据结构？
为什么用链表

6. useMemo 和 useCallback 有什么区别？

  • 源码上执行逻辑几乎没太大区别，主要是一个缓存的返回结果，一个是缓存的函数本身。

7. 使用 hooks 的时候要注意什么？

  • 顶层调用，不要写在条件/循环语句中
  • hooks的创建会维护一个数组，每个hook会对应一个下标。放在条件语句中里，如果条件语句为false，则该hook的下标会混乱

8. 说一下浏览器事件循环

9. 浏览器打开两个 tab 页，一个 setTimeout 死循环，一个 promise.then 死循环。那个会卡死？

  • 此时能不能 input 输入？为什么？

10. html 写入100个 script 标签，没加载完毕之前还能正常交互么？input标签能输入东西么？

11. 代码题，闭包

image.png

华住集团

1. 自我介绍

2. 你对前端工程化体系的了解

大致从一个项目创建到部署的全流程吧，根据这个思路一步步来

  1. 技术选型
  • 看看是什么类型的项目，公司的主技术栈是vue还是react，是要用小程序还是app。门户类型的网站要考虑SEO，可以考虑SSR的方案，比如nextjs、nuxtjs
  1. 代码规范的约束和统一
  • 目的就是将代码逻辑问题在开发阶段就规避掉，多人协作的代码也尽可能的像是一个人写的
  • 借助工具eslint prettier husky commitlint stylelint加上ts的辅助
  1. 测试
  • 单元测试jest
  • E2E测试
  1. 构建工具的选择
  • webpack、vite、rollup、esbuild、turbopack、rspack等
  • 各个构建工具之间的优劣和区别？
  • bundle模式、bundless or unbundle模式构建工具的区别
  • 为什么rollup更适合打包类库
  1. CI/CD（持续集成/持续部署）
  • jeckins、nginx、或者gitlab-ci、docker+k8s
  1. 前端监控
按照流程项目已经部署完毕，接下来就是监控线上错误、性能和优化了
性能监控、错误监控、埋点
监控的采集方式（性能和错误分开讲）
数据的上报方式
ajax、img、Beacon
三种上报方式的区别、优劣？
数据的处理和清洗
数据的展示
  1. 性能优化
  • 略
  1. 重构
  • 哪些项目需要重构，重构的成本评估，重构后的优势，怎么设计新的架构
  1. 微前端
  2. serverless

3. 性能优化，首屏无缓存优化方案，性能指标、具体优化方式，越详细越好。

4. CI 阶段 CI 脚本如何防止侵入，比如授权拿到了你的 gitlab 仓库的代码？（大概意思就是你的 gitlab-ci 脚本里不要有授权相关的动作，不安全，可以放到更靠前的操作里。原问题是”有没有网络隔离”）

5. 错误收集，上报方式，为什么?有什么问题？

  • 错误收集的方式
window.onerror
addEventListioner('error')
react、vue错误边界
try catch
promise的unhandledrejection等
  • 各种方式之间的差异
  • 上报方式
ajax
img
sendBeacon
  • 三种上报方式之间的差异和优劣，该怎么选择？有没有降级方案？

6. react 的 class 组件和函数组件在性能上有什么问题？怎么优化？聊一聊

  • 大致 class的 pure 和 shouldUpdate，函数组件的memo、useMemo、useCallback 的 具体使用场景

7. 如何实现自动部署

  • 公司的CI/CD流程简单的讲了一下

8. webpack2如何升级 webpack5

我个人的想法是构建工具可以和项目业务代码独立开的
要考虑清楚哪些变量是通过构建工具透传到业务代码的，以及alias别名的设置，入口文件等（构建工具和业务代码有关联的地方进行提取 ）
然后直接升级，而不是2-3-4-5这种

9. nginx 压缩和 compressionPlugin 的压缩

compressionPlugin可以直接在打包的时候把代码就压缩成了gz格式，然后部署到服务器
nginx是到代理服务器压缩
请求头设置Accept-Encoding

10. react 的 fiber 聊一聊

为什么react16要重构？重构后新增加了什么？
fiber是如何实现异步可中断更新的？
浏览器每秒刷新多少次？一帧是多长？
为什么不用setTimeout？
requestIdleCallback是干什么的？为什么不用？MessageChannel有何优势？
fiber的数据结构，为什么用链表？
什么是双缓存fiber树？

11. diff 的过程

diff是什么和什么的过程？
页面JSX和currentFIber对比生成workInProgressFiber的过程
从哪里开始？
beginwork函数对比了什么？
completeWork函数对比了什么？
单节点diff怎么对比的？
多节点diff怎么对比的？
为什么要遍历两次？

12. 如何实现一个组件可以在 react、vue、原生 js 、小程序中使用？

  • babel应该不行，AST？wasm？web component？。。。

13. 小程序了解么？

14. css 的引申，动画？css的高阶用法，提升性能，如何开启 GPU 加速等

15. webGL => webGPU 简单一聊

16. 做过哪些工具？组件库、sdk

17. 平常都是怎么学习的？

18. 期望薪资？有什么想问我的

携程一面

1. 代码题两道

  • 作用域的
  • this相关的，三连问，改改之后输出另一个答案

2. 实现一个计数器，每次页面刷新累加

  • 数据要存在哪？
  • 是先存值还是先取值？

3. localstorage 和 cookie 的区别？

  • 越详细越好

4. 打开两个一样的页面（复制url再打开一个），一个页面修改 localstorage ，另一个页面会变么？

  • 为什么？
  • 怎么让第二个页面也同步更新？就是第一个 页面count++,第二个页面同步也增加。

5. 打开两个一样的页面（复制url再打开一个）sessionStorage 会同步么？怎么让他同步？

6. 当前页面内嵌 iframe，他俩的cookie 会共享么？

7. 单点登录如何实现，JWT说一下

8. get 和 post 请求那个性能更好？为什么？深一点说呢？

9. options 请求是嗅探什么？

10. 后端返回10W 条数据，如何优化？

又见长列表优化
虚拟列表和滚动加载有什么区别？
如何实现一个虚拟列表？
虚拟列表快速滑动会有什么问题?怎么解决？
会出现白屏

11. 一道回文数算法题

半天妖

1. 自我介绍

2. 性能优化

3. 埋点上报方式？区别？

4. webpack loader 和 plugin 的区别，如何手写，要注意什么

loader和plugin的加载时机
可以顺便讲一下webpack的生命周期、执行顺序
loader是在什么阶段执行的
plugin的底层tapable库

5. 前端缓存，强缓存，协商缓存，项目问题怎么解决的？

6. webpack 三种 hash 的区别

7. 小程序搞过么?

8. vue3+vite简单一提

9. tspick和 omit啥区别

10. 做过哪些 toC 的业务

哈罗一面

1. 项目介绍，你担任的角色，你做了哪些东西？

2. 你是如何带团队的？工程化实践有哪些？

3. umi框架有什么优势？缺点呢？

4. umi项目你是怎么做首屏优化的？

5. 代码分割后http1.1版本资源请求一定是并行的么？有没有别的接口请求同步？

6. script 标签async 和 defer 的区别

7. 项目怎么部署的？

8. C 端项目怎么部署的？公司自己服务器还是公有云？可不可以都丢CDN？

9. 域名怎么指定到项目的？

10. react hooks 的作用

11. react 虚拟 dom 和diff 算法

什么是虚拟dom，和真实dom比有什么优势？
直接操作dom是跨线程的操作，等于js线程去操作了gui线程
真实dom上有非常多的属性，而我们在操作的时候不一定都需要
考虑下离屏批量创建dom
如果只修改一个dom，还要去创建fiber，更新整个fiber树，是不是很浪费？

12. vue 的数据劫持了解么？

13. vue2和 vue3的双向绑定有啥区别？

14. 小程序

二面

1. 你认为你做的最出彩的项目是什么？

2. 有哪些收获？

3. ...诸如此类的开放性问题

  • 建议提前准备一些这种常问的开放性问题，我感觉自己回答的就不太好

极氪

1. CI/CD工具岗位，devops相关，前30分钟的项目介绍讨论都没啥问题

2. 问的好多vue2相关的问题

3. iframe 外部操作 iframe 内部的标签报错怎么解决？内外一级域名一样的情况下？？？

4. leetcode一道算法题

小红书

1. 自我介绍

2. plugin写了什么？什么作用？

3. 前端稳定性建设做了什么？

4. sentry接入之后对你们的项目带来了哪些改变？故障率降低了多少？

5. 性能监控之后采取了哪些措施？

6. 算法题：一道二叉树，一道双指针矩阵

7. GG

问的大多是你干的这么些事情，带来了多少业务价值，以及量化的数据等。不是说做完了，优化完了，kpi拿到手了就完事了。

叮咚买菜

上班了，不想面了😂

总结

  • 🌶︎🐔学历非常吃亏，有些挺不错的岗位直接不给面试机会。
  • 算法的话刷的太太少了，感觉大家 leetcode 的hot150刷完，累计 300+基本够用了。
  • 自身 debuff太多了。
  • 乾坤未定，你我皆是牛马🌚。
avatar
文章
阅读
粉丝