2022-2023 六年前端中大厂面试总结（仅题目，无答案）

站长

2023年03月13日 20:21 · 阅读数 29

本人是个伤心🦐仔，从去年年底被裁员后断断续续面试了三个月，暂时可以告一段落了

给自己总结用的，大家可以当做参考。本科毕业差几个月满六年，但不代表六年平均水平，轻喷。具体的面试题肯定是和面试者的个人经历以及回答有关（比如我的项目中用到Vite所以很多面试官问了Vite）不一定具有普适应。如果发现我的面试题比较简单，别惊讶，那只是我比较菜而已。

为什么不写答案，主要是很多我也不会（QAQ不然你以为我为啥offer都没有……）

如果您对某个问题有自己的见解希望能在评论区点拨一下，非常非常感谢! 拯救一个很菜（但很帅）的少年就靠您了！

东方甄选

这家刚刚面完不久，把这家放在第一我多少是有点个人情绪的。这家是线下面试，而且不是一次面完，去一次只能面第一面。

我四点面试，三点半到楼下找了二十分钟找到了入口（路痴专有技能~）并按时到了前台。

在前台等了会面试官来了，把我带到小桌子旁坐下，我带着忐忑开始了面试。

平时布局都用什么？（我：“一般用 flex，float 和 position”）
flex 都有什么相关属性？
flex 居中怎么实现？
如何实现三栏布局，中间自适应。（回答了 flex）
有其他的实现方法吗？
position 都有什么属性？
flex……算了flex问太多了，咱们问js吧。看你用过 vue，说一下 vue 的通讯方式。
vuex都用来做什么？
vuex有什么方法？（我一下没反应过来，“什……什么意思？”）算了，那你说一下数组都有什么方法吧（我“啊这…pop push shift unshift splice join”）
才说这么几个不够吧，至少说十几个（我：map forEach find……）
那你说一下 map 返回什么？
JS有哪几种数据类型。（回答number，string，boolean，undefined，null，symbol，bigint）bigint？你有用到过吗？
那number和Java中的int或者单精度双精度有什么区别？（我之前提到了用过Java）
为什么在2^53范围内是安全的？
说一下防抖和节流
面试官：“咱们来一道算法题吧，你带电脑了吗？”（我背了个包去的，刚好带了电脑）“那你用自己电脑写吧，写一个数字每三位用逗号分割的算法。”我：“考虑小数吗？”面试官：“考虑吧。” （我打开电脑创建文件……搁那写了一会……这个时候他在看自己的电脑，我写完后把电脑递给他看）面试官：“你这段代码是干什么的？” 我：“小数点后也要逗号分开”，面试官笑了下说行吧。
面试官把自己电脑拿给我，问我，“你的博客有多少东西是原创的？”，我：“都是原创啊”，面试官：“真的吗？”，我：“真的啊……”，面试官：“那我可要搜了？”，我：“你搜呗……”。面试官当着我的面在我的博客拜托，二分哪有那么难？（JavaScript版）中找了一句话去搜索引擎中搜了一下，确定没有重复的之后，他又说，“那你把二分给我写一遍吧。” 我敲了一遍二分查找，他看了遍确定没问题之后才说“好吧”。
面试官：你有啥想问的吗？我随便问了下。
面试官：“你之前几点下班？” 我：“七点下班。”，面试官：“虽然我们这里上市了，但是也算是创业阶段，所以会有些加班”，我问：“那是双休吗”，他：“双休，偶尔加班，不过也有调休”。
他问我，“你还有什么需要补充的吗？比如你认为哪个回答不够好。”我：“我没啥想补充的。”我都准备收拾东西回家了。
面试官：“你大学什么专业？”，我：“计算机科学与技术”，他：“那你都有什么专业课？”，我：“计算机基础，工数，模电数电，操作系统，编译原理，计算机网络，计算机组成原理”，他：“好的”。（我还以为接下来要问我考多少分呢）
然后我就走出了他们大楼，全程40分钟不到。

字节一面

问了一个小项目的具体做了什么。
CSS display 有哪些值、哪些用法？
其中 inline 和 inline-block 什么区别？
flex 相关属性。
HTTP 缓存，协商缓存，强缓存。
有了解过 TypeScript 吗，讲一下泛型？
infer 关键字。
void 和 never 区别。
介绍一下函数节流，什么时候会用到，和防抖的区别。
算法题：一道一维 DP 题目，简单题。

限制函数并发数的题目，大概说一下，具体题目记不清了。

// countLimit 是一个函数，执行fn，执行的并发度是 2，返回一个 Promise
let countLimit = pLimit(fn, 2)
countLimit(a) // 立即执行
countLimit(b) // 立即执行
countLimit(c) // 前两个函数执行完再执行

// 求实现函数 pLimit

介绍项目，问了一些项目细节，项目是如何推进的。

Moka一面

编程题：扁平结构转嵌套结构

点击查看代码

// 扁平结构
const list = [
  {
    name: '数据1',
    parent: null,
    id: 1,
  },
  {
    name: '数据2',
    id: 2,
    parent: 1,
  },
  {
    name: '数据3',
    parent: 2,
    id: 3,
  },
  {
    name: '数据4',
    parent: 3,
    id: 4,
  },
];

// 树形结构
const tree = [
  {
    name: '数据1',
    id: 1,
    children: [
      {
        name: '数据2',
        id: 2,
        children: [
          {
            name: '数据3',
            id: 3,
            children: [
              {
                name: '数据4',
                id: 4,
              },
            ],
          },
        ],
      },
    ],
  },
];

能说说你对 Promise 的理解吗？
如何处理多个 .then 导致代码一大坨很丑怎么解决？（回答了用 async/await）
async/await 和 Promise 什么区别？
async/await 怎么实现的？（我没回答出来，这个也不知道怎么回答，知道的大佬教教我~~）
怎么理解 React 中的受控组件和非受控组件？
在平时怎么写一个组件？（可能ta的意思是考虑上一个问题，我没反应过来）
怎么理解 JS 的异步？
异步的一些 API，比如 setTimeout，setInterval，requestIdleCallback 和 requestAnimationFrame 还有 Promise，这几个有什么区别？
你是怎么理解 JSX 的？
React 组件是怎么渲染为 DOM 元素到页面上的？
React 中 setState 调用以后会经历哪些流程？
如何进行数据管理？
你提到了 React Context，说一下它的原理。
能说一下 Redux 的原理吗？
使用过哪些 React Hooks？
useState 是怎么实现的？
页面数据，表格特别多的时候，是怎么解决的。
编辑表格更新是怎么实现的。
数据获取是用的哪个 API？回答 Axios。Axios 中有做哪些全局处理吗？
Webpack 有做过 Loader 和 Plugin 吗？
项目排期的管控。

小红书一面

（这个面试官感觉就是在题库随机选题目，问完，然后再随机下一道）

浏览器输入 URL 到渲染页面的过程。
position 定位的方式。说一下 sticky。
ES6 新增了哪些数据类型，说一下用法。
说一下事件循环机制。
一个有 Promise 和 setTimeout 和 await/async，写输出顺序的题目。
JS 里面如果实现拖拽的功能。
CORS 如何实现跨域？
简单请求和非简单请求的区别。
说一下 React 中的 Diff 算法。
说一个 Fiber 架构。
说一下使用 Webpack 的优化。
说一下 CommonJS 和 ES Module 的差异。
算法题，一个二维 DP 的题目，写完后又让做了一个滚动数组的优化。

猿辅导一面

先介绍一下项目
Vue2 和 Vue3 有哪些区别
是否用过 Vue3 的 hooks
同一个请求发送多次，如何保证获取的是最后一次的结果（这个当时没有想清楚）
说一下事件循环
一段代码写输出顺序

实现一个深拷贝，拷贝对象，要考虑循环引用

function deepCopy() {
}

const a = { a: null, c: 123, e: {} }
const b = { b: a, d: 456 }
a.a = b

生成一个随机数，4-6，保留两位有效数字
算法题，股票买卖求最大收益，只买卖一次

猿辅导二面

介绍项目，问了项目的推广范围
Webpack 和 Vite，Vite 为什么快？
Vue2 中的 mixin 是否了解，原理是什么？
你怎么看 React 和 Vue？
Vue3 和 Vue2 的本质区别？
同一个请求发送多次，如何保证获取的是最后一次的结果（一面没回答上，二面又问了一次=_=# 我也没查，不过还好二面回答出来了）
Eslint 代码检查的过程
husky 的配置，配置过什么
面试中有遇到过什么比较好的问题？为什么？（emmm）
项目中请求的错误处理是怎么做的？
如果有多个错误如何保证只触发一次弹窗？（防抖）
上线后怎么提示用户刷新当前页面？

百度二面

（百度一面忘记记录了，主要也都是问了一些简单的基础题）

介绍一下项目A
针对项目A做了一些题目
问了一下项目B，项目是做什么的，问了项目部署
问了一下项目C
技术选项和架构设计
Vue2 和 Vue3 的区别，如何考虑使用哪一个
再挑前一个公司的一个项目说一下
项目怎么部署的
pm2 原理
微服务是否有了解过，为什么没有用？
对 Node 是否有了解？如何读取一个 20G 大小的文件
Node 中 master 和 slave 是否了解

理想一面

之前所在的部门业务介绍
问了一个项目
发版是怎么做的？
模块联邦有什么优缺点？
项目有什么监控，比如性能类的。（回答了sentry）
sentry推送信息是什么方式？
有做过什么基建工具？
flex: 1 代表什么？flex-basis可以设置哪些值，和 width 哪个优先级更高？
flex 实现两个元素垂直方向居中怎么实现？
space-between 和 space-around 区别，是否能调整他们间隙的值？
align-content 和 justify-content 区别？
less 和 sass 什么区别？
script标签，defer 和 async 什么区别？
UDP 协议有什么优点？
协商缓存如何判断命不命中？
HTTP 103是什么意思？
如何处理跨域？
iframe中，外面如何获取里面的真实高度？跨 iframe 通信是否了解过？
浏览器内存泄漏是否可以通过开发者工具看到，如何看到？
0.1 + 0.2 是否等于 0.3，如何解决？
JS 严格模式有什么了解？有什么不一样的地方？
有什么方法可以改变 this 指针？
数组操作 map 和 forEach 有什么区别，是否可以打断循环？
filter 和 find 返回值有什么区别？
十万个数组取第1万和第6万个元素速度有什么区别吗？为什么？
数组的 sort 默认是按什么排序的？使用的什么算法？
generator 函数和 async 函数有什么区别
Promise.all 如果有报错，是在 then 还是 catch 接收数据？接收的是什么样的数据？
ES6 中的 Set 和 Map 有什么区别？可以遍历吗，如何遍历？
真实数组和伪数组有什么区别？
WeakSet 和 WeakMap 有什么区别？是否可以遍历？
订阅发布和观察者模式有什么区别？
单例模式和工厂函数有什么区别。
React 的 HOC 是什么？
React 中 Fiber 有了解过吗？
React 里面有一个 A 组件，里面包裹了 B 子组件，A 组件是 10 个属性，B 只引用了其中两三个，如何提升性能？ShouldComponentUpdate。
PureComponent
useCallback 和 useMemo 有什么区别
hooks 可以放在函数的内部吗？为什么？
React Router 如何实现权限拦截？
Webpack 是否写过 Plugin 和 Loader？
Webpack 如何实现热更新？
Webpack 和 Vite 热更新区别？
最近有了解哪些新技术吗？
Babel 中的 stage0,1,2,3 是指什么？
Webpack 项目中通过 script 标签引入资源，在项目中如何处理？
如果打包100个文件，只有某个文件发生变化，有办法单独做更新吗？

小红书一面

介绍下项目A
- 项目有什么效果，如何判断效率提升率？（本地测还是统计数据发送到服务端？）
- 项目后续规划，现在有什么问题？风险怎么处理？
- 项目中有什么是收获很多的？
- 推广过程中遇到什么困难？
- 重新做一遍你觉得有哪些你觉得可以做得做好的事情？
- 用到一些插件的原理
怎么看 Vue 和 React
Vue3 的 hook 和 React 的差别
介绍一下 Vue3 的新特性，相对 Vue2 来说
前端路由的实现方式
是否用过 TS，用到什么功能
any 和 unknow 的区别
定义了一个 interface 只用到之前的 interface 的某几个字段则怎么办
Pick 怎么实现，写一下
HTTP 和 HTTPS有什么区别？
使用 HTTPS 一定是安全的吗？
介绍一下 flex 布局。
flex-basis是做什么的，和 width 哪个优先高？
flex 中如果有剩余元素或者空间不够会怎么办？
平时怎么学习前端技术？
CommonJS 和 ES Module 有什么区别？
代码题，写一个发布订阅

小红书二面

介绍项目 A
Tree Shaking 的原理，CommonJS能用吗，Tree Shaking 有什么副作用吗？
介绍一下项目 B，问了一个项目的问题如何优化。
async 和 defer 区别，使用 async 需要注意什么？（回答下载后立刻执行，如何文件的依赖还没有下载完则会报错）那么 Webpack 是如何解决这个问题的？（我不会哇！）
HTTP1.1 和 HTTP2 做了什么？队头阻塞有没有了解过，在 HTTP2 中有这个问题吗？
有了解过 HTTP3 吗？为什么使用 UDP？
代码题，已知数据格式，实现一个函数 fn ，给一个 id 找出链条中其对应的所有的父级 name （用DFS写了一遍）能用广度优先写一遍吗？

点击查看代码

// 输入 45dss 返回 ['广东省', '深圳市']
const cityData = [
  {
    id: 'axzx',
    name: '广东省',
    children: [
      {
        id: 'sdsd',
        name: '深圳市',
        children: [
          {
            id: '45dss',
            name: '南山区',
          },
          {
            id: 'sdsd11',
            name: '福田区',
            children: [
              {
                id: 'ddrr2',
                name: 'A街道',
              },
            ],
          },
        ],
      },
      {
        id: '2323d',
        name: '东莞市',
        children: [
          {
            id: 'xxs2',
            name: 'A区',
          },
          {
            id: 'kklio2',
            name: 'B区',
          },
        ],
      },
    ],
  },
];

const cityData = [
  {
    id: 'axzx',
    name: '广东省',
    children: [
      {
        id: 'sdsd',
        name: '深圳市',
        children: [
          {
            id: '45dss',
            name: '南山区',
          },
          {
            id: 'sdsd11',
            name: '福田区',
            children: [
              {
                id: 'ddrr2',
                name: 'A街道',
              },
            ],
          },
        ],
      },
      {
        id: '2323d',
        name: '东莞市',
        children: [
          {
            id: 'xxs2',
            name: 'A区',
          },
          {
            id: 'kklio2',
            name: 'B区',
          },
        ],
      },
    ],
  },
];

Vue 的 nextTick 是用来做什么的？它的原理是什么？
Vue 中 $set 是做什么的。写一个 $set 的伪代码。
我写代码的时候用了 Object.create(null)，问了一下它是做什么的。

====过年分割线:D====

上面是2022年底下面是2023年初

过年复习了一下，后面的面试感觉状态更好一些。基本每一个面试都会花一些问项目，下面的关于项目的问题很多就略过了，如果某场面试问题比较少大概就是都在讨论项目的问题。

美团一面

（先问了下平时用 Vue 还是 React 回答 Vue 后就只问了 Vue 相关的问题）

介绍一下 Vue2 和 Vue3 的区别
Proxy 和 Object.defineProperty 区别
Vue2 和 Vue3 响应式的性能有区别吗？为什么？
Vue3 有什么其他的优化，比如静态节点的优化。
Vue2 和 Vue3 的 diff 用了什么算法库？
Vue 中的数据状态管理用的什么？Vuex 的作用和用法。
Vue.extend 有用过吗？什么原理？
Vue 的路由模式哪几种，实现原理。history 服务端需要做哪些配置？
Vue2 里面 data 为什么是一个 function ？
属性发生变化，视图会同步渲染吗？
详细说一下 Vue2 和 Vue3 diff 算法的详细过程。这两个算法的复杂度。
是否做过 Vue 相关的性能优化
nextTick 实现原理（回答的时候顺便说了一下事件环）
JavaScript 事件循环机制
给了一道相关题目（Promise和setTimeout什么的），说出打印顺序和为什么。
问了下博客是不是你原创？怎么维护的？
说了一下项目相关的事情。
出了一道算法题，找一个字符串中最长的不含重复字符的子串，滑动窗口可做。

美团二面

介绍一下 Vue 的主要原理
在 Diff 过程中怎么做的，Diff 算法有了解过吗？
2.0 和 3.0 算法差异速度提高多少有了解过吗？
数据列表渲染，动态添加一些事件有了解过吗？
通过下标指定 key 的话会有什么问题？
这个问题出现在 diff 算法的哪个节点？
Vue Router 的原理，hash 和 history 有什么区别？
KeepAlive 有用过吗？实现机制。
如果一个组件既在 exclude 又在 include 会被缓存吗？为什么这么设计？
Webpack 和 Vite 的构建流程有什么差异。
Webpack 和 Vite 热更新有什么区别？
问了下项目，如何保证项目的正确性，稳定性。

高德一面

你认为一个五年的前端工程师应该需要哪些能力？你哪方面做的好或不好？
说一下你用过 meta 标签
async 和 defer 什么作用，
this 有哪几种指向。

给一段代码，求输出

var length = 5
function a() {
  console.log(this.length)
}
function b(fn) {
  fn()
  arguments[0]()
}
b(a, 1)

实现一个获取一个对象嵌套属性的函数。
说一下防抖节流定义，写其中一个函数，我写了防抖。
如果防抖在首次触发怎么写？
如果有多个异步函数，怎么串行执行？回答 async/await
如果不使用 async/await 怎么实现？写一下。
每次获取一个对象的属性都会打印 获取对象xxx的xxx，比如获取 obj.a.b，怎么实现？
有关注 Vue 什么的最新动态吗？
Vue3 和 Vue2 有什么区别？怎么把 Vue2 项目升级到 Vue3？
说一个挑战比较大的事情和项目。然后具体问了项目的事情。
还有什么有亮点的项目。
如果用户白屏但是你的电脑是正常的，你要怎么处理？
项目是怎么部署的？怎么监听服务，怎么灰度上线。

电信安全一面

如果想实现一个吸顶功能怎么实现，回答 position: sticky;，那么不用 CSS 怎么实现。
讲一讲 TS 泛型
TS中，如果声明了一个对象，又声明了一个对象和之前的对象大部分key是相同的，怎么做。
JS 数组去重怎么实现。（回答 Set）如果要对对象去重怎么做。
HTTP的请求头你知道的有哪些。和缓存相关的有哪些？强缓存和协商缓存同时存在哪个优先级高？
大文件断点下载。
flex:1 的含义。
Webpack 和 Vite 的特点和区别。
Vite 中你们怎么使用的模块联邦。
有没有什么样式冲突的问题。
对 React Hooks 的理解
useEffect 的返回值有什么作用，执行时机。
useMemo，useCallback，useRef 的作用。
对 React 的 Fiber 架构有什么了解吗？中间的节点怎么通过链表连接起来。
Vue 双向绑定原理。
TS 中 any 和 unknow 的区别。
写过泛型吗？说一下对泛型的理解。（问了两遍……）
一个对象，每一个 {key:value} 单独取出来声明一个联合对象？
JS 里面时间循环的过程，浏览器和 Node 的。
怎么做技术选型。

滴滴一面

Vue 写一个弹窗
如果不引用组件，如何在一个函数内打开一个弹窗
(中间有几道题忘了)
Vue2 和 Vue3 的区别
在响应式上有什么区别？如何拦截 for...in
页面上的性能优化

JS代码题控制并发量

//function fetch(url) {
//  return Promise.resolve(url);
//}

// let urls = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
// promiseLimit(urls, 3).then(resList => console.log(resList));
// 并发量限制

function promiseLimit(urls, limit) {
  // ... 具体实现
}

如果 url 是实时变化的，且有优先级，怎么做

滴滴二面

说一下 Vue2 和 Vue3 的区别？
defineProperty 有什么问题，处理一个对象 a.b.c 是怎么处理的？
Proxy 是怎么处理的？
Proxy 和 Reflect 有什么关系？
React 没有响应式，是怎么实现的？
React hooks 和 Vue3 的 compose api 有什么区别？
Vue 或 React 中我们连续三次赋值，比如 this.a，会怎么实现？
Webpack的初始化流程？
module，chunk，bundle 是什么意思。
你可以说一下对 Webpack，Vite，EsBuild，SWC的理解。
如何进行选择？
打包速度慢怎么解决？
Webpack 和 Vite 区别。

小红书一面

很有趣的一场面试，面试官比较有个人风格，感觉上了一堂课……

HTTP1.1和HTTP2的区别？（我回答提到了哈夫曼编码的方式实现首部压缩）
哈夫曼编码的原理。
浏览器对队头阻塞有什么优化？
浏览器接收到HTML到渲染页面的过程是什么？
说一下link和script标签的加载过程中会对DOM树构建有什么影响？
JS的基本数据类型。
怎么理解值类型和引用类型。（我说了堆栈什么的……接下来和面试官探讨了下栈和堆和V8什么的……）
说一下V8的垃圾回收机制
从垃圾回收的标记清除原理来理解一下闭包。（hhhh我回答的不是很清晰，然后面试官给我讲了一遍，什么是GO，AO，比如在 setTimeout 里引用函数变量）
编程题：判断一个只包含左右括号的字符串中，括号是否匹配？
NodeJS 里面的模块化是什么？
CommonJS 和 ES Module 有什么区别？
为什么 ES Module 需要把 import 放在顶部，CommonJS 不需要？（我哪知道啊，然后又被面试官上了一课）

字节一面

输入url到渲染页面背后发生了什么事情？
域名解析之后如何找到目标主机？
HTTP3的协议一定是TCP
HTTP1.1和HTTP2的区别
HTTPS如何保证安全性
JS中0.1+0.2是否等于0.3
介绍一下Vue的生命周期
组件销毁的时候一般会进行什么样的操作
编程题：一个数组中找到和等于指定值target的两个元素，并输出他们的下标
如何优化一个网站的性能
如何在前一个页面对下一个页面进行优化

字节二面

问了一些monorepo的问题（我简历有提到）
Vue编写时有哪些优化手段
防抖和节流的区别
编程题：实现防抖和节流，平时我写的都是很简单的，面试官特意要求的加上对上下文的处理。
编程题：给定由 []{}() 组成的字符串，判断括号是否正确匹配。
排期和手头工作冲突怎么做？平时主要工作内容

字节三面

问了下项目和工作经历，然后对于项目问了下亮点难点和现有问题，以及再做一次有什么优化的地方。然后就是两道编程题。

编程题一：（注意复杂度要求）

构造两个以整型数字为值的链表，其中的值是单调递增的。
将两个链表合并，保持递增。
要求空间复杂度O(1)

编程题二：

标题
单链表每隔k个元素做一次反转

题目描述
给定一个链表，每隔k个元素做一次反转

Example:
Inputs: 1->2->3->4->5->6->7->8->NULL and k = 3
Output: 3->2->1->6->5->4->8->7->NULL.

Inputs: 1->2->3->4->5->6->7->8->NULL and k = 5
Output: 5->4->3->2->1->8->7->6->NULL.

HR面

不同公司大差不差，简单总结一下常见问题

说一下你的优点
说一下你的缺点
最近几份工作的主要内容
你这几份工作的离职原因
你认为你做的最有亮点的事情
有什么事情是你认为你做的不够好的
什么事情是你认为比较有成就感的
和产品或其他人出现分歧怎么办
你找工作更看重什么/对新工作有什么期待
未来的发展方向
工作强度大能接受吗

其实这些问题都是在看你的能力、匹配度和稳定性，很想去要表现的积极一些，让HR能够确认你的意向很强。

Q&A

Q：有 offer 了吗有了。不过具体去哪和薪资不想说，希望大家也别问了。谢谢。
Q：感受到的环境怎么样？面试机会少，经常三面完不回复，过了也全是降薪平薪，要么就是很卷的公司，大小周。
Q：有什么面试经验把自己会的内容掌握好比会很多但是都不精更好。有好的项目真的很重要，把项目亮点好好想一想，相关技术栈多了解一些。没有好项目好难QAQ（我就是）。
Q：加好友一起学习？我社恐别加了>_<。希望大家都能找到理想的工作。