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

作者: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 的总包,期望涨幅太高了,挂!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值