【社招面经】22年裁员潮下的前端面经分享

简介：今天给大家带来一篇社招面经。近期大厂裁员的风声不断，作者也是在这段时间进行了面试，目前已入职Tiktok。
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

今天给大家带来一篇社招面经。

近期大厂裁员的风声不断，作者也是在这段时间进行了面试，目前已入职Tiktok。他记录了在这6个公司的面试经历，大家一块来看看吧。

一、背景

个人情况

  • 20届前端，正式工作经验到22年7月满两年，带上实习经验差不多三年（猝不及防感觉自己要老了）
  • 20届京东校招生，晋升过2两次，绩效中等偏上
  • 在职期间待过两个部门，京东科技&京东零售，在京东科技遇见了给我很多指导的mentor、让我在刚开始工作的时候有了一些工程化的思想，独立带外包负责过项目；而在京东零售，参与过很多项目、跟主站打通的商城项目，有幸主管给机会参与&推动一些团队基础建设

跳槽原因

Tips：跳槽前可以先想一下，首先是check下自己到底是否应该跳槽了，而不是单纯的干的不爽，换个工作能否解决现在的问题；还有就是一般面试hr面都会问这个，需要准备下

主要有三个：

  • 业务

目前部门所负责的业务不是很有发展前景，个人不太看好，且自身工作时间不长，处于一个快速学习成长的阶段，不太允许我花长时间去等一个好项目。

举一个我身上真实的例子：21年8月我从科技异动到零售的时候，虽然当时我选择异动有各方面原因吧，比如我的mentor离开了京东，但是绝大部分原因是我不看好当时所做的业务，当时主管还有挽留，我比较直，直接说了不太看好业务，主管当时还说我的目光短浅了，但是22年整个二级部门的业务都没了，之前那个组的前端同事要么是异动到其他部门，要么是离开了，就很被动吧...其实无关对错、无关谁看得准，首先得需要自己认可这份业务，才能干的开心

  • 技术

趁年轻还是觉得应该多钻研技术，倾向于技术团队一些；或者说这个团队会在业务中尝试新技术，比如vue3，比如monorepo...目前所在前端团队偏职能型，技术方面不是很重视

  • 收入

有点感觉自己的付出比收获要大，且一直低base担心可能会影响到后续没有竞争力。

二、面试准备

个人优劣势分析

Tips：可以提前分析个人优劣势，针对性制定面试准备计划

  • 优势：有多项专利，有不错的项目亮点，工程化（比如微前端、monorepo等）实践比较多，0-1做过组件库、团队lint规范
  • 劣势：框架不够深入（一直在vue、react两者中切换）；算法没有刷过；工作经验相对不足（不到两年）

跳槽目标

Tips：这个也挺重要的，投递的时候看好业务、部门；公司一般都只能在一个流程里面，结束流程才能面其他的部门，且都是有面评的，最好是一次性选择好面完

  • 公司：大厂
  • 业务：感兴趣
  • 团队：前端团队，技术氛围不错
  • 个人：有机会独立负责一些“大”事情，毕竟社招了

准备简历

Tips：可以找身边厉害的大佬帮忙看看自己的简历，能发现不少问题

这个我就不写了，感觉我现在也写的不怎么好。

PS：这儿再给”前端面试题宝典“的增值服务：“简历指导”和“模拟面试“打波广告，有需求的小伙伴，可以联系小助手（微信号：interview-fe）了解详情哦~

复习规划

根据有劣势分析，所以我将重点放在框架上，主要准备了react的理论知识，以及刷常见的算法

三、面试记录

下面进入面经分享环节

欧科云链

一面

  1. hooks为什么不能放在if里
  2. useContext
  3. useMemo
  4. 自定义hook
  5. 数字精度问题
  6. 检测数据类型
  7. Promise链式调用，以下分别输出什么
Promise.reject(1)
        .then((num) => {
            console.log(num);
        }).catch((num) => {
            return num + 1;
        }).then((num) => {
            console.log(num);
        });
// 2
Promise.resolve(1)
        .then((num) => {
            console.log(num);
        }).catch((num) => {
            return num + 1;
        }).then((num) => {
            console.log(num);
        });
        
// 1
// undefined
  1. 使用CSS实现：输入框获取焦点时边框高亮（使用:focus）
  2. 列表表头吸顶（使用position: sticky;）
  3. 一个父级div，有两个子div，一个固定高度，另一个高度填充满
  4. 手写算法

[{ price: 1, size: 2 }, { price: 2, size: 2 }, { price: 1, size: 1 }]] 依次按照price、size降序排序

function sort(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i].price === arr[j].price && arr[i].size < arr[j].size) {
                [arr[i], arr[j]] = [arr[j], arr[i]];
            } else if (arr[i].price < arr[j].price) {
                [arr[i], arr[j]] = [arr[j], arr[i]];
            }
        }
    }
    return arr;
}

二面

  1. 问简历中做多端组件库做了哪些组件，有没有遇到什么问题
  2. 重绘&重排，哪些操作可以导致
  3. 浏览器渲染过程
  4. component、PureComponent 区别
  5. 以下输出
var name = "global";
var obj = {
    name: "ngnce",
    log:()=> {
        console.log(this.name);
    }
}
obj.log()

var obj = {
    name: "ngnce",
    log:()=> {
        console.log(this.name);
    }
}
obj.log()
  1. 哪些样式可以继承
  2. e.target 和 e.currentTarget 有什么区别
  3. 图片懒加载，路由懒加载实现原理是什么
  4. hooks 你们实践的经验是什么
  5. 手写深拷贝，循环引用问题如何解决

小红书社区

一面

  1. 挨个问简历项目：微前端怎么做的，性能优化怎么做的，UI&交互统一怎么做的；感觉像聊天大概半小时
  2. 以下输出是什么，把async、await用promise怎么改，async、await的本质是什么
console.log(1);

let b = new Promise((resolve, reject) =>{
  console.log(2);
}).then((x) => {
  console.log(3);
})

setTimeout(() => {
  console.log(4)
}, 100);

let c = async() => {
  setTimeout(() => {
    new Promise((resolve, reject) => {
      console.log(6);
    })
  }, 0);
  let x =  await new Promise((resolve, reject) =>{
    console.log(5);
    resolve(7)
  })
  console.log(x);
  console.log(8);
}

console.log(9);
c()
console.log(10)

// 1
// 2
// 9
// 5
// 10
// 7
// 8
// 6
// 4


let c = () => {
  setTimeout(() => {
    new Promise((resolve, reject) => {
      console.log(6);
    });
  }, 0);
  new Promise((resolve, reject) => {
    console.log(5);
    resolve(7);
  }).then((res) => {
    console.log(res);
    console.log(8);
  });
};
  1. 网络请求封装怎么做
  2. 会二叉树嘛，直接说不会，面试官说那考考一个简单的算法，青蛙跳
  3. 实现 Promise.all
  4. Vue发请求在哪个生命周期
  5. React 17版本有什么特性
  6. Class写法与hook写法的优劣比较
  7. hooks有什么问题吗

二面

  1. 做过哪些工程化相关的东西
  2. 为什么要用 monorepo ，有没有遇到依赖相关的问题，比如隐式依赖
  3. webpack构建打包自己做过哪些事情
  4. react常用的hooks、自定义了哪些hooks
  5. 举例说明 useCallback 跟 useMemo 的使用场景
  6. 写一个括号的题
  7. 职业未来规划

三面

  1. 简历微前端相关
    • 为什么要用微前端
    • 你们用的微前端是什么
    • 除了qiankun你还知道其他解决方案嘛
    • 京东的micro-app跟qiankun有什么不同
    • 为什么没用京东的
  2. 能说一个你觉得比较有意思的专利嘛
  3. 算法题

HR

  1. 为什么要跳槽
  2. 目前薪资待遇
  3. 绩效怎么样
  4. 平常加班嘛，对小红书大小周怎么看
  5. 有没有其他面试流程，面的什么部门，什么进度
  6. 跳槽（选择offer）主要考虑哪些方面
  7. 有没有很多朋友、同学在北京

猿辅导智能硬件

一面

  1. 做过哪些性能优化
  2. webpack渐进式聊
  • webpack常见配置参数是什么？
  • 常用的loader有哪些？
  • 有没有自己写过一个plugin，暴露的生命周期有哪些清楚嘛
  • webpack的原理，从执行到结束的过程
  1. Babel的原理是什么
  2. 手写可以缓存的接口封装
// 考察Map用法
function httpRequest(url, options) {
  return Promise((resolve, reject) => {});
}

const reqMap = new Map();
const waitTime = 1000;

function request(url, options) {
  if (reqMap.has(url)) {
    const req = reqMap.get(url);
    if (Date.now() - req.time < waitTime) {
      return reqMap.get(url).response;
    }
  } else {
    const res = {
      response: httpRequest(url, options),
      time: Date.now(),
    };
    reqMap.set(url, res);
  }
}
  1. Map数据结构怎么用，为什么可以用非字符串作为key值
  2. 手动实现一个模版字符串
// replace不会改变原字符串
// 正则表达式：. 匹配除换行符 \
 之外的任何单字符；* 匹配前面的子表达式零次或多次；? 匹配前面的子表达式零次或一次，或指明一个非贪婪限定符
function template(str, context) {
  return str.replace(/\\$\\{(.*?)\\}/g, (match, key) => {
    return context[key]
  });
}
  1. 从设计理念上说一下Vue VS React
  2. 小程序了解的多吗
  3. 前端职业规划
  4. 你对前端的看法

二面

自我介绍刚开始，临时有事，直接跟面试官说抱歉结束面试了，我不礼貌了，希望那位面试官看到了能原谅我😭

网易有道——智能硬件

一面

  1. 以下是否有语法错误，输出结果是什么
const arr = [1,2,3,4,5] // 无语法错误
const arr1 = arr.push(6) // 6
  1. 在react constructor 里面写 setTimeout，this指向什么
  2. 如何自己设计一个image，实现懒加载的组件
  3. 如何实现页面缓存，keep-live 实现原理，对应的react如何实现
  4. 做过哪些首屏优化
  5. 以下能看到页面变化嘛
document.body.style = 'background: red' 
document.body.style = 'background: black'

二面

  1. 工作中遇到过什么技术难题解决不了
  2. 微前端是怎么实现的，跟qiankun有什么不同
  3. 说一下react跟vue的区别
  4. 做过什么性能优化
  5. 找出数组中出现次数最多的字符串
const getMostStr = (arr) => {
    let obj = {}
    let mostObj = {
        str: '',
        count: 0
    }
    for (let i = 0; i < arr.length; i++) {
        if (obj[arr[i]]) {
            obj[arr[i]]++
        } else {
            obj[arr[i]] = 1
        }
        if (mostObj.count < obj[arr[i]]) {
            mostObj.count = obj[arr[i]]
            mostObj.str = arr[i]
        }
    }
    return mostObj.str
}
  1. 实现'get-element-by-id' -> 'getElementById‘
const transStr = (str) => {
    const arr = str.split("-")
    let res = arr[0]
    for(let i = 1; i < arr.length; i++){
        res += arr[i].slice(0,1).toUpperCase() + arr[i].slice(1)
    }
    return res
}

微软北京

一面

  1. 项目中有遇到什么难以解决的问题、怎么解决的；针对项目详细问了不少
  2. code 我写了半个小时才写出来

之前约的是电话面试，由于没提前看邮箱，我以为会打电话过来，最后面试官打电话提醒我的，有点尴尬，就是说面试千万不要迟到！加上code半小时，果不其然挂了

字节

一面

根据简历问项目

二面 tiktok架构组

  • 根据简历问项目，主要针对以下聊
    • 团队怎么落地的
    • 如何衡量lint对代码规范的效果，比如说规范了百分之多少的代码（可以用 CI、CD这种，我没有想到）
    • 目前这个规范还有什么可以改进的嘛
    • 多版本怎么管理
    • 私有化怎么更新
    • 多工程公共模块处理方式
    • lint规范怎么做的
  • 算法：实现一个调度器
  • 算法：JSON转JSX

三面 tiktok直播组

主要根据简历问

  1. 组件库
    • dropItemMenu，想实现一个用户点击非浮层区域也能关闭，怎么实现
    • 介绍一个你觉得最难的组件，如何设计并实现的（由于这块没有总结过，回答的明显有点磕巴，面试官根据组件延伸了不少问题）
    • 你在组件库承担的什么角色（有点紧张，没有把自己做的事情讲出来）
  2. 移动端熟悉吗
  3. webpack性能优化
  4. tree shaking原理
  5. external与dll区别
  6. 没有问算法了

HR

  1. 没有让自我介绍，问对面试流程体验怎么样
  2. 跳槽你会考虑哪些
  3. 那现在你面试字节的这个岗位，符合你的预期吗
  4. 你是怎么判断出符合的
  5. 看你不是计算机专业为什么做前端(其实我是学的计算机，只是在一个文科学校学的计算机，每个hr都要这么问我>_<)
  6. 不是有技术鄙视链嘛，为什么做前端而不是后端啥的
  7. 绩效怎么样

总结

  • 简历非常重要，大部分都是根据简历来问，写上去的东西一定要想好怎么说，有些即便你做过很多，但是没说出来也很可惜
  • 八股文就适当的准备就ok，其实这次的跳槽感觉也是对自己知识体系的一个梳理，慢慢发现，从业越久对各个知识点贯通的越好，相比八股文更重要的是实际工作中的解决的问题，有无亮点
  • 算法，还是得准备，算法没写出来，感觉基本就挂了
  • 面试需要自信，不自信面试效果不好，这个是我做的不够的，可能一部分是对自己技术心虚、菜，还有一部分原因是今年的大环境，会让我有点畏手畏脚，害怕没机会
  • 面了几家后其实会感觉面试有些累，就是重复讲一些东西的感觉，面不动的感觉，所以面了几家之后我就放弃了一些基本我不会考虑的公司的面试，比如搜狐、猿辅导、欧科，其实给到我的好的面试机会不多，大厂除了字节跟微软，其他投递了都没有面试邀请，应该是今年环境不好加上我资历浅，直接简历pass了？建议面试安排的松散一点，选择性面试即可

面试官点评

其实从分享的面经中，可以看到不同的公司，几乎都对项目经验比较关注，项目相关的问题较多。我们在面试准备的过程中，一定要好好准备简历，突出自己熟悉的领域，引导面试官往相关方向提问。

还有一点是算法题，这几家公司的面试中都有涉及到，大家记得多刷LeetCode。

原文作者：jjjona0215

原文链接：https://juejin.cn/post/7100982054996672543