两年经验前端社招中大厂面经(下)-技术圈

文章来源于 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 的总包，期望涨幅太高了，挂！