前端三年经验社招记录

前言

本人22 届校招毕业进入互联网金融中厂做前端开发，期间一直没有过跳槽的想法，但是在今年年初被裁员了。于是开启了本人第一次社招面试之旅，历经三个月（中间休息了一个月，旅旅游，躺躺平），最终在五月的尾声准备入职新公司，在此对本次记录进行一次复盘，给与想跳槽的其他同学一点经验，主要是分享本人面的公司的一些面经和感悟。

个人情况

本人大概是在三月底开始准备面试，准备半个多月，在 4.15 左右开始投递简历。大大小小的公司面试了 10 来个，总面试场数大约 20 场左右。 个人期望：

• 广州、深圳的公司为主，其他城市的公司为辅（练手）
• 个人薪资期望涨幅 30%

面试情况

1. 智城时代（深圳、vue）小公司，没啥好说的，一面、二面、hr 面后挂
2. 跨越速运（深圳、vue）物流公司，一面、二面、hr 面后给了offer，氛围比较差，没接
3. 拼多多（上海、react）第一个面的大厂，题目写出来了，一面后没消息，挂了
4. 腾卓（深圳、vue、uniapp）腾讯的子公司，一面、二面、三面、hr 面，谈薪后无后续
5. 政采云（杭州、react）一面挂，整体回答的不太好，光速被挂
6. 货拉拉（深圳、react）一面挂，整体下来感觉回答的还行，最终不匹配
7. 芒果TV（长沙、react）两个人面的，问了很多八股，没有准备好，一面挂
8. 微派（武汉、react） 这个聊的我感觉不错，但是面完没有消息了
9. 趣丸（广州、react）一面挂，问了很多项目细节，面试官循序渐进，说会有下一轮，但是hr 后续没推进
10. 沐腾科技（深圳、vue）小公司，整体感觉很差，一面过后拒绝下一面
11. 阿里夸克（广州、react）一面挂，问了些浏览器进程相关的题目，没有准备好
12. 转转（深圳、react）一面挂，基本上问项目，聊了半小时，感觉面试官不是很感兴趣，后续无消息
13. 腾讯微信（广州、react）一面挂，一上来先做了五道题，两道答的不好，最后问了半个小时
14. 兔展（深圳、vue）一面、二面、hr面，公司有欠薪的情况，拒了

目标公司和一些其他的小公司，忘记录音了，就没写了。

面经

智城时代

一面

1. 作为项目负责人，主要职能是什么？
2. 在项目中，NODE 层实现接口是如何操作的？
3. SEO 优化具体做了哪些工作？除 SEO 优化外，还需要考虑哪些方面的优化？SEO 权重如何做？
4. 从资源加载层面和其他方面考虑，项目有哪些优化措施？对于项目中的大文件是如何处理的？
5. 在项目提速开发方面做了哪些工作，使用了哪些工具？
6. 清除浮动有哪些方案？
7. 实现水平垂直方向居中的方式有哪些，在不同布局下的实现方法有什么区别？
8. 如何使用 display grid 布局？
9. 怎样实现画一个三角形？
10. JS 有哪些数据类型，基础数据类型和引用数据类型的区别是什么，对引用数据类型进行深拷贝有哪些方式，递归拷贝过程中需要注意什么？
11. 数组遍历有哪些方法，map、forEach、for in 等遍历方法有什么区别？
12. JS 的事件循环机制是怎样的？
13. 在 Vue 中，watch 和 computed 在监听属性方面有什么特点和区别？
14. 组件传参有哪些方法，EventBus 是如何实现的？
15. Vue 的 v-for 和 v-if 是否可以一起使用？
16. 如何手写一个 ViewModel？
17. Vue3 和 Vue2 有哪些区别？

二面

1. seo优化，怎么限制爬虫去爬数据？
2. 搜索引擎排名怎么优化呢？
3. Js 中 == 的原理是什么？转换逻辑是怎么样的？
4. 说下项目中提到的性能优化
5. 说说eventbus，vue3中能用eventbus嘛？
6. 有什么标签会阻塞html的渲染？link标签会阻塞html的渲染嘛？
7. sql连表查询怎么做？
8. v-for和v-if的优先级
9. 封装过哪些组件
10. 为什么我们不在生产环境打印console?
11. 说下你了解的前端安全
12. 怎么预防XSS攻击？

跨越速运

一面

1. 请介绍一下你的工作经历、技术栈以及在上一家公司负责的项目。
2. 请阐述Vue中key的作用以及Vue2和Vue3响应式原理的区别。
3. 请谈谈你对Webpack和Vite的了解，以及它们之间的区别。
4. 请描述一下你开发的通用表格组件的功能和实现思路，表格字段单独更新是如何实现的？
5. 请分享一下你在性能优化方面的经验，如何实现代码分割和资源预加载，提升Lighthouse评分？

二面

1. 离职原因是什么？
2. 未来两三年在前端领域的职业规划是什么？
3. 之前做过的项目里，挑一个你认为做得比较好或印象深刻的项目讲一讲。
4. Vue为什么会设计nextTick这个回调钩子？
5. 在Vue中，如果在data里定义一个值并多次赋值（例如a = 1; a = 2; a = 3），nextTick会做哪些事情？
6. Vue中，两个平级的兄弟组件之间一般怎么通讯？
7. event bus怎么实现？
8. 为什么Vue的一个实例可以做到订阅和发布？它里面是怎么实现的？
9. 抛开Vue来说，如果让你实现一个订阅发布模式，你会怎么做？
10. 有一个字符串，如何用效率比较快的方式找到出现次数最多的字符？
11. 基于上述思路，如何进一步优化？
12. 如果字符串中存在多个出现次数相同且最多的字符（例如7、9、4都出现两次），如何处理这种情况？

拼多多

一面

两道手写题：

1. 写一个倒计时组件，传入endtime，severtime，endcallback
2. 异步相关实现，实现一个名为 executeTasks的函数，该函数接受两个参数：tasks：一个包含三个任务的数组（[task1, task2, task3]），每个任务是一个返回 Promise 的函数。 retries：最大重试次数。

函数要求：

1. 返回一个 Promise 对象。

2. 任务必须串行执行（即前一个任务完成后才能执行下一个任务）。

3. 如果任务执行成功，则继续执行下一个 任务。

4. 如果任务执行失败，则重试该任务，直到成功或达到最大重试次数 retries。

5. 如果达到最大重试次数仍未成功，则抛出异常。

1.vue2和vue3的区别 2.说说你负责的项目 3.多语言脚本替换怎么写的？ 4.项目里ai变成怎么用的？ 5.seo优化做了哪些内容？ 6.为什么离职？ 7.对加班怎么看的？

腾卓

一面

上来先写两道代码题

1. 输入一个数组[1,2,3,4,5]按一秒后依次打印，打印完成后，最后执行一个函数
2. url token校验相关的，涉及url解析，题目描述挺多的，不算难。
3. 你了解像我们为什么服务端会要去做这些验签操作吗？然后如果不验签的话会有什么风险吗？
4. 你还了解哪些常见的 Web 攻击手段？
5. 你可以展开来讲一下它们（常见Web攻击手段）的原理以及防御手段吗？
6. 为什么 ECMA 要引入 async await？你可以简单讲一下 async 和 await 吗？
7. 要不你花5分钟时间来介绍一个你比较核心的前端项目？
8. 什么情况下比较适合采用大仓（monorepo）的开发模式？
9. 平时用比较多的那个状态管理库是哪一个？你可以简单讲一下 Vuex它的一些核心概念吗？
10. 可以简单讲下 Koa 的洋葱模型吗？
11. 简历里面第二个项目是有跟权限相关的权限系统，你是项目负责人是吗？
12. 有什么微前端之类的实践吗？低代码有接触过吗？
13. 工程化建设，保障代码质量这一块，这个你是怎么做的？
14. 除了代码风格之外的卡点外，还有加哪些其他卡点？

二面

全程问项目相关的，省略。。。

三面

全程问项目相关的，省略。。。

政采云

一面

1. koa框架里的洋葱模型是怎么实现的？
2. 你觉得AI编程对前端开发工作有什么影响？
3. 权限控制系统是你设计的，那事务怎么写？并行事务是什么？
4. 并发事务的控制方式有哪些？
5. JS基础数据类型和引用数据类型在内存数据结构里的表现形式是怎样的？
6. 栈的存储方式是怎样的？堆的存储方式呢？
7. 数组去重怎么做？
8. 如果数组是由复杂对象组成的，怎么去重？
9. 如何实现一个Promise？
10. React里useEffect这个hook为什么不能写在if里面？
11. Nextick是如何实现的？

货拉拉

一面

1. 请介绍你负责的系统中，利用cursor AI优化代码时，如何解决敏感代码的安全问题？
2. 请具体描述运维自动化的过程，包括如何处理新增券商的重复性工作？
3. Vue 3和Vue 2区别？
4. Vue 3的DIFF算法有怎样的改进？
5. 在帮助中心项目中，如何进行性能调优？
6. 在性能优化时，除了体感，还会着重看哪些具体指标？
7. 哪些元素大概率会影响页面LCP的评分？
8. 了解CLS（累积抖动偏移量）相关概念吗？针对页面白屏问题有什么优化方案？
9. 使用CDN除了提升访问资源速度，还有其他目的吗？
10. HTTP2多路复用的具体流程是怎样的？
11. 如何判断发起的HTTP请求命中了强缓存还是协商缓存？强缓存返回的状态码是多少？
12. hook函数的作用是什么？
13. Webpack和Vite这两个构建工具的区别是什么？
14. 请写一个函数，接受两个数组作为入参，返回这两个数组的交集（数组元素可能是字符串或仅有一层的对象，对象的key和value相等则视为相等）。

趣丸

一面

1. 请做一下自我介绍。
2. 说一下泛型的作用，以及在项目中对开发者的帮助。
3. 除了简单类型定义，有没有常用的高级语法，比如pick和Omit的用途。
4. INTERFACE和type定义对象类型有什么区别？
5. 开发中哪些操作可能导致内存泄露？应该怎么注意？遇到内存泄露问题如何排查和解决？
6. 写异步时，promise和async await用得多一点？两种写法在代码执行上有什么异同？
7. 项目从Vue 2改用Vue 3是为了解决哪些方面的问题？
8. 之前用Vue 2的时候是否使用了TypeScript？
9. 使用Cursor智能编程辅助，开发效率提升35%，主要做了什么？
10. Cursor工具是否有官方指南，如何更正确使用它？
11. 如何用代码生成设计通用表单？怎么解决团队内对AI生成代码审查依赖的问题？
12. 过往做技术和业务方案需求时，有没有写文档的习惯？
13. Vue 2和Vue 3的响应式原理是什么？
14. 做过哪些Webpack和Vite的配置和优化来提高构建效率和性能？有没有量化收益？
15. 项目主要是Web项目，多语言方案是怎么做的？
16. 多语言更新时，是构建时内置语言包，还是访问页面时动态拉取？
17. 构建时拿语言包做兜底，那是把所有语言包都打进去，还是只拿部分语言做兜底？
18. 多语言key值重复问题是如何解决的？
19. 项目技术选型时，选择KOA是基于过往公司经验，还是有其他考虑？
20. 权限系统是纯前端Vue 3加NODE实现的吗？用户权限管理是如何设计的？
21. 做项目时，NODE层有没有做线上监控？

微派

一面

1. 数组的排序方法（sort）会改变它本身吗？如果想把一个数组排序又不想改变它自身可以怎么做？
2. 给定几行代码，问set的size是多少？
3. 除了数组之外还有没有其他的结构也可以使用for of来遍历的？类数组指的是一个什么样的结构？在什么场景下会使用到类数组？平时开发的时候有哪些类数组的接口？
4. 用for of来遍历的时候，它内部调用了什么方法？
5. 怎么样让一个对象上的某个属性不能再被改变？
6. 用for in来获得的对象的属性和用Object.keys得到的有哪些区别？怎么判断对象的属性是原型链上的还是它自己的？
7. 假设一个对象原型链上有一个属性叫a，给这个对象的a属性赋值会改变原型链上哪个属性？如果想改变原先链上的那个a可以怎么做？
8. instanceof操作符判断了两者的什么关系？如果前面变量是a，后面变量是array，具体是怎么比较的？
9. Promise.all方法中如果其中有一个异步任务出错了会怎样？如果想获取所有异步任务的结果，不管成功或失败，可以用什么方法？
10. 有使用过map这种数据结构吗？map和普通对象当作hash表这种数据结构来使用时，它们俩之间有什么区别？
11. 了解WeakMap吗？它和Map有什么不同？
12. TypeScript中常用的内置工具类型有哪些？有没有看过这些内部工具类型的实现，比如类型体操是如何实现的？
13. 项目中主要使用Vue的哪个版本？Vue3使用的是新的组合式API吗？Vue3中ref和reactive的区别是什么？用reactive返回的对象能用解构吗？如果想解构怎么办？
14. watch和watchEffect这两个方法有什么区别？watchEffect是怎么样去收集这个依赖的？
15. 在Vue2的data里声明一个数组，通过下标去改变这个数组，Vue能监听到这个改变吗？Vue3可以吗？Vue3是怎么做的？在Vue2中用下标改变数组监听不到，但push、pop这些方式可以，你了解过它是怎么做的吗？Vue2改写数组方法具体是怎么改写的？改写数组的原型会影响到全局的array吗？

芒果TV

一面

1. 最近一份工作是什么原因离职的？
2. 什么是闭包以及它的应用场景？防抖和节流的区别与应用场景是什么？
3. JS 里面的 var 和 let 的区别是什么？
4. TS 里面的 never 跟 void 的区别是什么？
5. interface 和 type 的区别是什么？
6. Vue2 和 Vue3 的区别是什么？在 Vue2 和 Vue3 里用 watch 建立多个响应式对象分别要怎么做？
7. 了解哪些 CSS 预编译工具？
8. 重绘和回流的区别是什么？如何避免重绘？
9. Flex 的相关属性有哪些？分别是做什么的？BFC 是什么？常用场景和构建方式有哪些？
10. 做性能优化一般会考虑哪些方法？
11. gzip 压缩的配置是配在哪里的？
12. 协商缓存的内部原理是什么？相关字段有哪些？
13. 前端跨域在开发环境和生产环境分别如何解决？jsonp 的原理是什么？
14. 怎么优化 webpack 的打包速度？
15. Git Rebase 和 merge 的区别是什么？
16. 想监听某个节点是否可见，有什么方案？
17. 以 webpack为例，对 JS 包进行代码分割的原则和策略是什么？用的 Webpack 版本是多少？具体做了哪些配置？
18. 前端工程化了解吗？用的多不多？
19. 做的项目偏 C 端的多还是偏 B 端的多？
20. 聊一下 B 端管理系统的微前端知识？
21. B 端项目一般用的什么技术栈？
22. 后端系统里有一个几万行数据的列表，怎么去优化？能否具体聊一下虚拟滚动？
23. 用 Vue 做一个多语言系统怎么做？如果不让用第三方插件，自己写的话怎么设计？
24. 在 Vue2 里把自定义翻译方法做成全局方法怎么做？Vue3 里呢？

阿里夸克

一面

1. 请简单做个自我介绍。
2. 通常怎么用原生的JS去检测某个元素出现在用户的可视范围内？
3. intersection observer跟手动监听滚动轴的方案相比有什么优势？
4. 用CSS怎么做到自适应布局（流式布局）？
5. CSS单位在自适应宽窄屏场景下如何选择，比如固定宽度在不同屏幕上成比例的情况怎么处理？
6. 给定一段代码，执行顺序是怎样的，为什么是这样的顺序？
7. 浏览器设计事件循环机制主要是为了解决什么问题？
8. 在promise或setTimeout里做100万次循环，对用户操作以及页面渲染会有什么影响？
9. 有一个比较大的fetch网络请求（如await fetch耗时10秒或更长时间）时，用户还能操作吗？
10. H5优化中常说把JS放在页面底部，原因是什么？JS文件大小（如5兆和5K）对页面渲染、用户交互等会有什么区别和影响？
11. 为什么选择tiptap这个框架或开源库？
12. 内部评估打分的机制是什么样子的？有没有从实现原理去做一些评估？
13. Cursor在日常开发中的使用比例是多少？
14. 实际业务里面有没有利用AI做一些技术上提效的东西？
15. 除了编写代码，自己本身还有用到哪些AI的能力？有没有尝试写过MCP的接口？

腾讯微信

一面

1. 如何实现数组去重功能？要求处理包含对象的数组，当对象的key和value均相同时视为重复元素，并且需考虑嵌套对象的情况。

2. promise输出题

3. 请设计一个函数，能够获取文件夹层级结构中最深层级的文件夹路径。

4. 最长公共子序列问题？

5. 已知两个由唯一元素构成的数组oldArr和newArr，现需设计一个函数diff(oldArr, newArr)，生成一个操作列表，按序执行这些操作后可将oldArr转换为newArr。具体操作规则如下：

   1. INSERT：将元素插入到指定位置，格式为{ type: 'INSERT', node: 'X', index: N }；
   2. REMOVE：删除元素，格式为{ type: 'REMOVE', node: 'X' }；
   3. MOVE：将元素移动到指定位置，格式为{ type: 'MOVE', node: 'X', index: N }。
   4.   其中，所有REMOVE操作必须在INSERT和MOVE操作之前执行，以避免索引错位；MOVE和INSERT操作需按目标位置顺序执行（从左到右遍历newArr）。

6. 除常规方法外，还有哪些高效的数组去重技术或算法？

7. 为何会出现这样的输出结果？事件循环的原理和机制是什么？Node.js中的事件循环又有哪些特点？

8. setImmediate和setTimeout这两个函数有何区别？在执行顺序上谁先谁后？背后的原因是什么？

9. 对于求解最长公共子序列问题，可以从哪些思路或算法入手？

10. 第五题的核心思路是什么？具体该如何执行元素删除操作？

11. 说下项目里的并发优化？分片并发的实现方式是怎样的？若存在耗时较长的计算任务，是否仍会导致系统卡顿？

12. 请详细介绍鉴权系统的工作原理，其完整的鉴权流程包含哪些环节？

13. 在数据库设计中，表结构是如何规划的？当前的鉴权流程还有哪些可优化和完善之处？

14. 采用cursor AI开发项目的具体流程和步骤是怎样的？

15. 当AI无法准确理解需求，导致输出内容愈发混乱时，有哪些有效的解决策略？

16. 在项目实践中，曾进行过哪些性能优化工作？性能优化的衡量标准是什么？如何判断一个页面是否需要进行性能优化？

总结

可以看出来，本人大部分面试基本都是一面挂，尤其中大厂，这与本人的知识储备和准备有关，最后也只能不得不接受这一结果，不过对于本次整体面试情况，做一次简单总结。

1. 社招面试更偏向于问项目细节，建议优先准备项目
2. react技术栈公司偏多，纯vue 技术栈开发者在当前前端面试市场会比较吃亏
3. 手写题偏向应用应用实践，算法题出现频率比较低
4. 现在是AI 时代，对于 AI 的应用也会贯穿到整个面试中