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

文章来源于 https://juejin.cn/post/7335721246929780771 作者：Hh, 已授权转载

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

阿里巴巴飞猪

飞猪是提前在线上做题，写一个旅游相关的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点

腾讯证券系统

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

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

美图秀秀

深圳，海外事业部

前端一面（通过）

• 自我介绍
• 介绍之前做过的一些项目
• 现在是在职吗
• 看机会的原因
• 你现在主要是做 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 的总包，期望涨幅太高了，挂！