两年经验前端社招中大厂面经

作者：Hh

https://juejin.cn/post/7335721246929780771

接上篇：两年经验前端社招中大厂面经（上）

阿里巴巴飞猪

飞猪是提前在线上做题，写一个旅游相关的demo：有 tab 切换、商品信息等，做完之后约的一面

总体来说，问的都很基础，只是自己答得不好，非常菜~

前端一面（挂）

• 什么是原型对象，以及你对原型的机制了解是什么样子的

• JS的继续，你会用哪些方式去实现呢？

• 有哪些方式可以隐藏页面的元素

• 你说的这几种方式 哪些会引起页面的重排

• 哪些操作会引起页面的重排

• 那如果要操作dom元素的话，你有什么方案去减少 重排和重绘？

• 如果你要做一个长列表的图片，是这种无尽流的这种，然后你有什么方式可以 提升交互的体验，优化一下页面的性能呢？图片的懒加载：三种方案

• 那你的后面是这两种方法：是怎么实现的图片懒加载呢？

• 你用的 React 比较多是吧

• React hook 解决了哪些问题，以及有哪些常用的hooks

• useCallback 和 useMemo 的区别

• React 项目的页面上有非常多的组件，你有什么方式加快首屏渲染？

• 你刚才 提到了 SSR，SSR的渲染速度它 其实 取决的因素还是挺多的，那如果你的整个页面的内容非常的多，接口也比较慢的话，那你有什么方式 可以进一步加快 SSR的首屏呢？

• 可能你的页面有5 、6 屏，你的接口也非常慢，其中有两个模块接口非常慢，那这种情况下 你有什么方案优化首屏呢？

• 网络和浏览器相关的：计算机网络的五层结构

• https 是怎么保障安全的？

• CDN 具体是 怎么实现的吗？

• 低代码项目经历：balabala

• 你在这个项目做了多久

• 你能讲一下这一个的整个实现链路吗？低代码的实现链路

• 那你们这个 组件的打包构建是 你们自己做的吗？

• 那你讲一下你做的这些项目里面，刚才提到的点之外，还有哪一个技术对你来说，是比较难的，也比较有挑战性的

• 所以你主要负责那一个模块呢？

• 你有做过移动端的东西吗？

• 小程序也没有是吗？

• 你为什么想换工作呢？

• 反问

  • 工作地点：杭州

  • 工作节奏

挚文集团（探探）

算法有一步没写出来，有测试用例没有通过

前端一面（挂）

• 自我介绍

• 基础知识

• 移动端的实际开发经验有吗？移动端相关的技能

• 聊一聊你对前端代码的语义化了解

• CSS BFC 的了解，你可以随便发散

• display：flex 介绍它的相关属性，还有它平时怎么使用

• 平时做过的项目有对兼容性有要求吗？是谷歌为主吧，那谷歌文字最小是多少px？

• 12px，有什么方法缩小吗？

  • transform: scale 缩小，存在的问题：比如说 我正好有一个文案，正好有4个字，后面跟了一个 icon图标，那如果说我要设置 8px， 16px 需要缩小50% 对吧，那它和后面的 icon的距离怎么办，它和后面的 icon 又不连续了

  • 这个问题比较偏于实战，处理的方法很多，比如 单独特殊处理 icon，或者整体把 他们缩小，

• 说 一些数组的常用方法

• 举一个场景：这个数组先取出 特殊的属性，从一个对象数组变成 一个 字符串数组，我只要对象里面的一个key，key值是一个字符串。返回key 得到一个字符串数组，然后基于这个 key 做一些过滤

  • 这个代码有什么好处，有什么缺点：复杂度太高了？map 和 filter 底层是循环

  • 但是数组的其他方法也可以解决：reduce

  • 第一种 和 第二种区别：灵活性更高，第一个是 有好处的，语义化更好。。。

arr.map(() => {}).filter(() => {});  // 这段代码由优化的吗？
arr.reduce(() => {})
 
const userList = [
  {
    id: 1,
    username: 'john',
    sex: 1,
    email: 'john@163.com'
  },
  {
    id: 2,
    username: 'jerry',
    sex: 1,
    email: 'jerry@163.com'
  },
  {
    id: 3,
    username: 'nancy',
    sex: 0,
    email: 'nancy@163.com'
  }
];
let result = userList.reduce((pre, current) => {
  return {...pre, [current.id]: current};
}, {});
 
console.log(result);

• JS 闭包

• 什么是内存泄漏

• 那 V8 引擎的垃圾回收机制

• 从整个 V8 垃圾回收机制来讲：你还有什么要说的、有补充吗？

• 简单讲一下js的执行原理：Even Loop

• 做题：事件循环题目输出顺序

• 说一下浏览器的缓存机制

• Etag 和 last-modified ：为什么 会出现 Etag， Etag 比 last-modified 好在哪里？Etag 它解决了什么问题？

• JS Bridge ：web 和 native 通信的桥梁，原理能讲一下

• 项目相关的问题：balabala

• 说一下 你这个几个项目比较有成就感的、比较复杂的问题， 挑一个 详细讲一下，就行

• 项目相关的问题：balabala

• 那我这有一个问题：后端的数据 怎么跟组件 关联起来的呢？比如你现在渲染一个下拉菜单，菜单里有a/b/c ，下拉组件 select 怎么 a/b/c关联起来的

• 项目相关的问题：balabala

• 算法：最长不重复字符串的长度

• 反问

  • PC、移动、Vue、React 看不同的项目

  • 简单介绍业务

  • 非常感谢你投递探探，今天就到这里，后续的话，如果有二面其他的，hr 会联系您

腾讯云智

腾讯云智（深圳）TEG 客服系统

前端一面（通过）

• 自我介绍

• 离职还是在职？

• 在这个项目中主要负责哪些模块

• 主要用的前端哪一些技术实现的呢？

• 你们低代码，它是怎么的一个流程？

• 有没有考虑过，其他的UI框架，或者说，其他的渲染模式呢？

• 也就是说你们现在是基于React做了一些开发是吧，还没有扩展到Vue、或者是原生的JS？或者说是一些其他的框架上是吗？

• 你们的数据结构变更，有做什么版本管理的东西吗？

• 有没有类似于 diff 的功能：撤回、重做

• 版本管理是有的，有没有做过性能方面的监控呢？比如用户做了一些某一些组件，生成了某一些页面，运行方面的数据，性能这方面有吗？

• 性能优化

• 它的运行的时候，出现的异常是怎么捕获的？

• 除了你刚才说的，你有做过一些业务吗？

• 你们用的类组件还是 hook函数组件

• 这个边界你们是怎么判定的呢？什么时候该用类组件，什么时候用hooks

• 类组件 和 hooks 区别

• hooks 组件、hooks怎么去管理组件的状态的？怎么做到哪些不同作用域之间的分割，以及 逻辑复用的问题？

• 你平时会写 JSX 语法多吗？

• JSX 是通过 什么工具 去编译

• JSX 编译之后是什么结构？

• React 生成的节点 它可以通过 ReactDom 去渲染， 你能自己写一个 类似 ReactDom.render 的解析器吗？

• 用 React 创建一个节点，它不一定只能在 react 中使用，你也可以自己写一些解析器，是不是？

• React 为什么需要 ReactDOM？

• 你平时有接触过 Vue 吗？

• React 和 Vue 有一个共同的说法，都说是渐进式的框架？你觉得渐进式是指什么意思？

• React 可以多次调用 ReactDOM.render 吗？

• React 是不是可以用 类似插件的机制，新增一个功能：这就是 React 和 Vue 的渐进式功能所在，可以细化到某一个dom 元素，渐进式特性。它们两者 的都是一样的，你给我一个容器，就可以 基于这个容器实现对应的功能，不用你对整个前端的项目做一个重构吧，可以慢慢的嵌入你的系统，从一个小的节点开发，慢慢的覆盖你的系统。。。渗透到系统其他的地方

• react 的类组件可以写一些公共的类，作为 公共继承的对象吗？

• 在 JS继承有哪些方式，比如ES5

• 平时 用到 类的继承这一种特性吗？或者用到原型链相关的方法

• 你觉得哪一些场景的情况下用继承会比较好

• 实现需求：自动播放轮播图，隔个2s，跳到下一张：怎么去做这个

• 轮播图的切换动效怎么实现

• 它如果还需要 有一个 首位相连的效果怎么实现？比如最后一张切换到第一张

• 反问：

  • 主要的技术栈是React

  • 目前主要做的业务：TEG客服部，打造自己的客服平台，承接所有反馈

  • 工作时间、节奏

前端二面（挂）

全程 50分钟都在问项目，没有八股文。

• 简单的自我介绍

• 你现在是在职吗

• 换工作的原因

• 那你现在在面试哪些公司？有没有拿到offer？

• 你现在做的偏工具类，后续想不想做一下偏业务类的

• 低代码都有哪些组件

• 低代码都有哪些能力

• 有两个下拉框，值发生改变时，在你们低代码里面是怎么实现联动的？

• 你们的schema都有哪一些数据呢？

• 此处省略 N 个项目相关的问题！！！

• 有做什么性能优化吗

• 反问：

  • 部门：腾讯集团下的人工客服服务部

  • 负责项目：各种客服平台系统

  • 技术栈：react

  • 工作节奏：早9.30，晚8点

腾讯证券系统

腾讯（腾卓）证券系统，深圳，光启未来中心

前端一面（挂）

全程聊项目，一个半小时，没有八股文。后因为我有下一场面试，主动取消，并跟面试官说明原因

金蝶

2面需要到深圳现场，主动取消面试

美图秀秀

深圳，海外事业部

前端一面（通过）

• 自我介绍

• 介绍之前做过的一些项目

• 现在是在职吗

• 看机会的原因

• 你现在主要是做 xxx，下一份工作是比较往哪一个方向去发展呢？想尝试哪些方向

• 有技术难点的项目或者是某一个东西，可以跟我分享一下吗？你是怎么去解决这个问题的呀

• 项目问题：balabala

• react 技术栈、用的哪个版本

• 像react的话，一般做性能优化是怎么去做的？

• useState 直接 setState 和 setState 传入一个函数做处理，这个两者的区别

• setState 是同步的还是异步的

• 你觉得 为什么会出现 hooks？它有什么优势吗

• react fiber 有没有 了解？解决了什么问题

• react fiber 和 hooks 有什么关联？

• react 18 的新特性有没有去了解？新特性的出现，它们是解决了什么样的问题？

• node 有使用过吗？node的服务器有玩过

• webpack 5 有什么新的特性

• 介绍一下模块联邦

• 自定义 webpack 做了一件什么事情，解决了什么问题

• 除了 webpack，还了解其他 构建工具吗？

• vite 相关的了解，与 webpack区别

• 像 webscoket 有实践过吗？它是怎么建立连接的？

• csrf 与 xss 的了解

• cookie 的 samesite

• OK，我这边了解得差不多了，你看一下有什么想问我的吗？

• 反问

  • 主要技术栈 react、next、node

  • 主要做的业务和项目：海外事业部，国外用户，多语言限制，没有小程序应用，都是网页或者是原生的客户端

  • AIGC 业务：balabala

  • 工作节奏：1075

• ok，我们今天聊到这，后序有消息的话，会有HR联系你

前端二面（通过）

美图秀秀的二面和百度三面、58二面差不多，聊人生，最前沿的技术、chatgpt等。

HR（通过）

58同城

前端一面（通过）

• 自我介绍

• 目前还是在职，看机会的原因

• 如果后面聊得顺利，多久可以到岗

• 此处省略 N 个项目相关的问题！！

• 你之前又把它和阿里的低代码引擎对比吗？

• 你们在做这个低代码的过程中，是怎么做事件的绑定的？有一个按钮，如果我点了按钮之后想 把一段文字填到一个 dom里面？或者类似于两个组件的交互，绑定数据，并且响应时间，是怎么去做这个事情的

• mirrorx 和 reudx 有啥区别或者优势

• mirrorx 它内部是怎么做的异步？

• 自定义 webpack 插件，解决了什么问题，大概分几步去实现

• 你了解过或者用过 哪些webpack 插件

• 优化 webpack 打包编译 性能 或者体积，可以讲一下吗？

• 性能优化

• 拖拽你们是怎么做的碰撞检测这一块的

• 比如说，你要检测dom 范围内有几层 这个业务组件，你释放的范围内 有哪些业务组件，这个是怎么去监听的

• 比如你拖到了 一个什么组件内了，这个 dom 上面有哪些，第一层是什么，第二层是什么，这个是怎么去监听的

• 比如说 我有一个 input，它是怎么检测到是 div1的、还是 div2 的呢，怎么检测到它的父元素这一块

• 比如说你在拖拽的过程中，是通过这个 元素的长宽 位置这种对比 这种解析到的，还是通过原生的 dom 的api 去做的监听

• 数组扁平方法

• 你们是经常手写一些公共的函数吗？

• 你可以举一个例子，可以体现你的封装能力、设计能力、或者是一些设计模式、或者开发原则 之类的，可以举一个你开发过程中的例子吗？

• 主要用 React、vue用过吗？大学的时候用过

• 我们也是 React为主，react hooks 了解哪些或者你用过哪些

• useEffect 和 useLayoutEffect

• react 18 里面的 useTranslation 有过了解吗，它是做什么的

• react 18 里面的一些新的特性，它对异步事件的处理变化，优先级这一块，有过了解吗 可以讲一讲

• 那它是怎么解决有的任务被顶替 优先级事件上的 ？

• class 组件也有用过，class 组件 发请求是在哪个生命周期

• 它为什么不放在 componentWillMount ？componentWillMount 存在哪些问题？

• 你提到服务端渲染嘛？

• hooks 里面会产生闭包的情况吗：数据更新了，在事件回调里面，或者是某一个使用的绑定的地方，它是没有更新的，类似于setTimeout 或者是一些事件回调里面

• 那面对闭包，你有哪一些方法能够在回调里或者 setTimeout 拿到最新的状态、最新的值

• React的性能优化的手段 有哪些？

• 你们一般是怎么做 函数的节流和防抖吗？

• 你是学软件的吗？工作之后学的前端还是之前也学过

• 你理解为什么引入js 脚本和 css的时候，它们的位置是一头一尾的这种？是从什么方向考虑

• css 解析会阻塞dom的解析吗？

• 你大学学了多久啊，感觉你的基础还挺扎实的

• this 指向

• 整体我感觉还挺好的，而且我们这边也有一些低代码的场景、现在也是正在做

• 我这边的问题就这些，你想了解什么，就直接问

• 反问：

  • 负责的业务或者模块

  • 部门是 xxx 部门，也是中台部门，所以做的一些项目也都是一些中台的项目，包括说SDK类、平台类、还有 node这种数据服务类的，分这几个方向把

  • 具体的业务：审核相关的，机审、人审、还有一些安全相关的，比如说扫描验证码，人脸识别、环境监测之指纹、代码混淆加密、加密签名。。。

  • js代码的加固，都是安全相关的一些项目把

  • 广告、中台

  • 主要技术栈：React、 umi

  • 目前在做的事：低代码方向的尝试、微前端尝试

  • 安全：sdk 项目

  • 平时工作节奏：早上 10点、晚上8 9 点下班

  • 部门多少人：前端 x 人

  • 希望后面有机会可以共事

前端二面（通过）

• 自我介绍

• 技术方案

• 你在这个项目中承担的是一个怎么样的角色？

• 你们项目是怎么分工的？

• 深挖项目

• 都有哪些人在用你们这个平台

• 有没有和阿里、百度的低代码做对比吗？

• 你们的低代码，和市面上其他的相比，有什么异同？

• ............

• 有没有关注最前沿技术

• 聊人生

• 读过哪些书

HR 面（挂）

• 要了 30% 以上的涨幅

• 告知 HR，已经拿了其他的offer，在做对比

• 没有下文

美团

前端一面（通过）

• 自我介绍

• 比较有难点或者是比较有挑战的地方

• 项目相关问题：balabala

• 有没有对比、对标过市面上的同类产品

• 低代码都有什么功能，有哪些能力，有哪些人在使用

• 做过的一些性能优化，展开讲一下

• 用什么技术栈？状态管理用的哪个

• 离职原因

• 学习前端的渠道？你遇到问题是怎么解决的？

• 关注哪些技术博客，哪些公众号，哪些开源项目

• 介绍一下强缓存和协商缓存

• http1、http2、http3的区别

• set 和 weakSet 的区别、是否可以遍历

• 弱引用

• 闭包、v8：balabala

• 垃圾回收机制

• 介绍常用的 Promise 方法

• 简单描述一下如何手写实现 Promise

• Promise.resolve 的相关问题

• react hooks 出现的原因

• 简单介绍一下 react fiber

• react 函数组件和类组件的区别

• react 的生命周期

• react 的严格模式

• 介绍一下常用的设计模式

• 对 node 有了解吗？

• 项目相关问题：balabala

• 对 linux、nginx 有了解吗

• 对 chatgpt、AI 的看法

• 代码题：判断一个IPv4合法性

• 反问：

  • 主要用的技术栈：react

  • 现在做的一些项目和业务

  • 工作节奏：1085

前端二面（通过）

• 自我介绍

• 面试官向我介绍了 他们当前部门的情况，做的业务，技术栈、团队规模等

• 介绍低代码相关的搭建

• 介绍一下你参与过的项目难点、亮点

• 项目相关问题：balabala

• 低代码项目做了多久、项目大概多少人

• 有没有对比过其他低代码产品，了解其他低代码的实现吗？

• react 函数组件和类组件的区别

• react 高阶组件、render props 区别

• webpack 基本原理

• webpack 热更新的原理

• 对 vite 的了解，与 webpack 的区别

• webpack 的构建优化

• loader 和 plugins 的作用

• 怎么自定义webpack 插件？

• 项目中自定义的webpack 插件 解决了什么问题？

接下来做三道题：

• 第一题：闭包相关（做出来了）

function foo(){
    console.log(a);
}
function bar(){
    var a = 3;
    console.log(this.a + a);
    foo();
}
var a = 2;
bar();
bar.call({a: 4})

• 第二题：事件循环，看输出顺序（做出来了）

console.log('1');
async function async1() {
    console.log('2');
    await console.log('3');
    console.log('4');
}
setTimeout(function () { console.log('5') }, 0)
async1();
new Promise(function (resolve) {
    console.log('6');
    resolve(6);
}).then((x) => console.log(x))
console.log('8')

• 第三题：高亮关键词，10 个约束条件，还是有一定的难度的（写了20多分钟，完成 60%-70%）

• 现在在哪个城市，住在哪里

• 现在都在面哪些公司，手上都有哪些公司的offer

• 你对未来的团队有什么期望？喜欢什么样的团队

• 反问

HR 面（挂）

一二面技术通过，HR 面挂，要了将近 dobule 的总包，期望涨幅太高了，挂！

百度托管页

被百度面试官调侃、吐槽两年经验不能手写出 Promise A+ 规范，Promise 这一块知识回答得不好

前端一面（挂）

• 简单介绍自己

• 基本数据类型

• 箭头函数

• 介绍 promise

• 能不能手写出 promise

• promise 相关的题目：值的传递、错误捕获等综合题目

• 看您写了几个项目，你觉得哪一个做的比较好的，聊一聊：说一下亮点

• 你们低代码平台的一个产出是啥？

• 那你们在可视化平台是怎么跟渲染引擎通信的？

• 此处省略 N 个项目相关的问题！！

• 然后你们是怎么做这一个性能的优化的？因为 json 特别大的话，更新

• 有没有低代码悬浮的组件

• 整体页面的自适应你们是怎么做的？

• 你们组件宽高的属性：比如你在画布区拖入一个文本，他会有一个固定的宽高对吧，这个宽高保存到 schema 的时候属性单位是啥？

• 有了解过 你们渲染引擎是 怎么解析你们这个 json schema 的吗？

• 你说的是整体吗？比如说他说怎么把一个组件渲染到页面上的

• 其实我想听的是整体的层次，它是怎么来做的？你刚说的是其中的一个点

• 比如说它有一个通过接口获取的，你说不知道它的真实高度的，然后这种你们是怎么去布局的？

• 你们当时用的 postmessage ，后面迁移到 xxx 技术，这一个的主要原因是什么？当时是 postMessage 遇到了什么瓶颈吗？

• 然后你觉得这一块 还有哪个地方做得比较好的吗？

• 反问

  • 你们的技术栈：基于业务来看，核心是不限技术栈的

  • 主要负责的业务：商业建站

  • 平时的工作节奏：上班时间 10，下班不固定

  • 计划招多少人：目前肯定是有名额

Cvte 视源股份

前端一面（挂）

• 自我介绍

• 毕业的时候一直在 xx 公司，你基本都在做什么项目？

• 你讲一下你主要负责哪一块的？

• balabala

• 你们的 json 是怎么定义组件间的联动的？

• 怎么确定区分两个 input？

• 你们是怎么触发的事件？这一块能详细说一下吗？

• 优化、减少打包体积，这一块可以讲一下吗？webpack 这些都是实际有做的吗？

• 构建优化，打包体积这一块主要是做啥？

• 自定义插件是做了是做了什么？具体是啥？解决了什么问题

• react 函数组件 和 class 组件哪个用的多一点

• 做了重构，你有做哪一些设计吗？或者说遇到复杂的组件，你有做一些可复用的

• 有什么可以讲一下吗？有什么组件可以重构的？还有比较难的可以 讲一下吗？

• 弹窗怎么去做拆分？

• 有没有说一些 解耦方面的 或者说是 复用方面的 做得比较好的组件 可以讲一下？

• 从 class 重构成 function 组件需要注意哪些东西？

• 你在工作中 有遇到什么 坑吗？

• 类组件 和 function 组件 最大的区别？

• hooks 大概的原理你知道吗？

• 比如说 一个hooks ，它是怎么做更新机制的？

• 那有一个问题，setState 是同步的还是异步的？

• React 有哪些优化的方式？

• 路由 的懒加载原理：

• useMemo 和 useCallback 的区别

• hooks的闭包 ，会有什么问题吗？

• hooks的闭包，为什么拿不到最新的值

• http1 http2 有什么区别

• 比如说，我往服务器发送 100个请求，http2 它是怎么发的？

• 聊一下 https

• 非对称不会泄漏，对称会泄漏？

• https 安全？

• https 会有什么安全问题？

• CSRF和XSS怎么防止你知道吗？

• SameSite：严格和 none 有什么区别？

• 那你知道它们（SameSite）分别对应什么场景会发吗？

• 反问