一、背景

个人情况

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

跳槽原因

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

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

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

技术：趁年轻还是觉得应该多专研技术，倾向于技术团队一些；或者说这个团队会在业务中尝试新技术，比如vue3，比如monorepo...目前所在前端团队偏职能型，技术方面不是很重视
💰：有点感觉自己的付出比收获要大，且一直低base担心可能会影响到后续没有竞争力

二、面试准备

个人优劣势分析

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

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

跳槽目标

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

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

准备简历

Tips：可以找身边厉害的大佬帮忙看看自己的简历，能发现不少问题这个我就不写了，感觉我现在也写的不怎么好

复习规划

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

三、面试记录

小红书社区

一面

挨个问简历项目：微前端怎么做的，性能优化怎么做的，UI&交互统一怎么做的；感觉像聊天大概半小时
以下输出是什么，把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);
  });
};

网络请求封装怎么做
会二叉树嘛，直接说不会，面试官说那考考一个简单的算法，青蛙跳
手写promise.all
Vue发请求在哪个生命周期
React 17版本有什么特性
Class写法与hook写法的优劣比较
hooks有什么问题嘛

二面

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

三面

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

HR

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

猿辅导智能硬件

一面

做过哪些性能优化
webpack渐进式聊

webpack常见配置参数是什么？
常用的loader有哪些？
有没有自己写过一个plugin，暴露的生命周期有哪些清楚嘛
webpack的原理，从执行到结束的过程

babel实现原理是什么
手写可以缓存的接口封装

// 考察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);
  }
}

map数据结构怎么用，为什么可以用非字符串作为key值
手动实现一个模版字符串

// replace不会改变原字符串
// 正则表达式：. 匹配除换行符 \n 之外的任何单字符；* 匹配前面的子表达式零次或多次； ? 匹配前面的子表达式零次或一次，或指明一个非贪婪限定符
function template(str, context) {
  return str.replace(/\$\{(.*?)\}/g, (match, key) => {
    return context[key]
  });
}

从设计理念上说一下Vue VS React
小程序了解的多嘛
前端职业规划
你对前端的看法

二面

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

网易有道——智能硬件

一面

以下是否有语法错误，输出结果是什么

const arr = [1,2,3,4,5] // 无语法错误
const arr1 = arr.push(6) // 6

在react constrictor里面写settimeout，this指向什么
如何自己设计一个image，实现懒加载的组件
如何实现页面缓存，keep-live实现原理，对应的react如何实现
做过哪些首屏优化
以下能看到页面变化嘛

document.body.style = 'background: red' 
document.body.style = 'background: black'

二面

工作中遇到过什么技术难题解决不了
微前端是怎么实现的，跟qiankun有什么不同
说一下react跟vue的区别
做过什么性能优化
找出出租中出现次数最多的字符串

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
}

实现'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
}

欧科云链

一面

hooks为什么不能放在if里
useContext
useMemo
自定义hook
数字精度问题
检测数据类型
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

输入框获取焦点边框高亮
列表表头吸顶
一个父级div，有两个子div，一个固定高度，另一个高度填充满
手写算法

[{ 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;
}

二面

问简历中做多端组件库做了那些组件，有没有遇到什么问题
重绘&重排，那些操作可以导致
浏览器渲染过程
component、PureComponent区别
以下输出

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()

哪些样式可以继承
e.target e.currentTarget有什么区别
图片懒加载，路由懒加载实现原理是什么
hooks你们实践的经验是什么
手写深拷贝，循环引用问题如何解决

微软北京

一面

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

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

字节

一面

根据简历问项目

二面 tiktok架构组

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

三面 tiktok直播组

根据简历问

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

HR

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

总结

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

面经｜两年前端第一次跳槽的面试记录

一、背景

个人情况

跳槽原因

二、面试准备

个人优劣势分析

跳槽目标

准备简历

复习规划

三、面试记录

小红书社区

一面

二面

三面

HR

猿辅导智能硬件

一面

二面

网易有道——智能硬件

一面

二面

欧科云链

一面

二面

微软北京

一面

字节

一面

二面 tiktok架构组

三面 tiktok直播组

HR

总结