进入2021年之后，就感觉身上的压力越来越大，一是要买房子，二是要结婚，另外老家还需要装修，老东家部门效益不好，所以整个人感觉压力好大。虽然错过了金三银四，但丝毫不能影响我上进（捞钱）的决心。近期面试总结奉上，需要自取
滴滴 + 有赞 + 字节 + 涂鸦 + 网易
滴滴出行
一面技术
- Vue响应式原理
- vue nextTick原理
- 接触过的跨端项目，跨端项目的框架了解哪些
- 跨端项目js调用原生能力的实现原理
- 解释下微任务宏任务
- 你所了解的性能优化方面，有哪些用在了你的项目中
- 服务端渲染怎么做到写的代码既能跑在服务端，又可以跑在浏览器
- 你认为vue3最大的改变是什么
- 节流函数，如何优化
- 算法：一个数组里都是数字，找出数组里面只出现一次的元素的和，如何优化
- 你认为你作为前端，你有什么优势
- 最近有了解新技术吗？聊一聊你对以前前沿技术的了解及看法
二面 + 三面技术
- 介绍下你做的搭建平台
- node有用过吗？node的异步是怎么实现的
- 过往的项目你感觉成就感最大的是哪个
- 一个跨端支持了android、iOS、HTML5如何拓展使其支持小程序
- webpack源码看过吗？webpack怎么实现的，如果让你设计一个webpack，你有什么思路
- 一个taobao.com，一个tianmao.com，输入taobao.com并登陆，然后输入tianmao.com，刷新页面，怎么使tianmao.com也在登陆状态
- 伪类和伪元素的区别
- css梯形怎么画，他原理是什么
有赞
一面技术
- flex常用属性
- flex-grow、flex-shrink什么作用，值是什么
- 简述原型链
- 简述闭包，闭包会导致什么问题，业务场景中什么情况下闭包会造成内存泄漏
- 浏览器垃圾回收机制
- js继承方式，原型链继承具体怎么实现
- 简述浏览器事件循环
- Vue响应式原理
- 虚拟DOM是什么，有什么作用
- 简述vue的diff算法
二面（视频）
- 解析URL中的参数
// 解析 URL 中的 queryString，返回一个对象 解析异常的 展示 ’{}‘
// 返回值示例：
// {
// name: 'coder',
// age: '20'.
// callback: 'https://youzan.com?name=test',
// list: [a, b],
// json: {str: "abc", num: 123}, // json key 是固定
// }
- 查找对象中的字符个数
/**
* 问题 2
* 统计一个复杂对象中的英文字符 a-z以及A-Z个数，
* 输入：
* {
* name: 'code',
* obj: {
* name: 'CODE',
* age: [12, 45, 20],
* info: {
* nick: 'haha!'
* }
* },
* hooby: ['a', 'B']
* }
* 输出：14
*/
- 时区划分
/**
* 问题 3
* 将一天24小时按每半小划分成48段，我们用一个位图表示选中的时间区间，例如`110000000000000000000000000000000000000000000000`，
* 表示第一个半小时和第二个半小时被选中了，其余时间段都没有被选中，也就是对应00:00~01:00这个时间区间。一个位图中可能有多个不连续的
* 时间区间被选中，例如`110010000000000000000000000000000000000000000000`，表示00:00-1:00和02:00-02:30这两个时间区间被选中了。
*
* 要求：写一个函数timeBitmapToRanges，将上述规则描述的时间位图转换成一个选中时间区间的数组。
* 示例输入：`"110010000000000000000000000000000000000000000000"`
* 示例输出：`["00:00~01:00", "02:00~02:30"]`
*/
字节跳动
一面（视频）
- 项目介绍
- 解释下面输出结果
async function async1() {
console.log('1')
await async2()
console.log('2')
}
async function async2() {
console.log('12')
await async3()
console.log('3')
}
async function async3() {
console.log('13')
}
console.log('4')
setTimeout(function() {
console.log('5')
new Promise(function(resolve) {
console.log('6')
resolve()
}).then(function() {
console.log('7')
})
})
setTimeout(function() {
console.log('8')
}, 0)
async1()
new Promise(function(resolve) {
console.log('9')
resolve()
}).then(function() {
console.log('10')
})
console.log('11')
-
手写promise.all
-
实现merge函数，合并两个有序数组
let arr1 = [1,2]
let arr2 = [-1,2,8,9]
merge(arr1,arr2) // 返回[-1,1,2,2,8,9]
二面（视频）
- 自我介绍
- 问项目（超详细）
- 模拟 lodash 中的 _.get() 函数
/**
* --- 题目描述 ---
*
* 补充函数的 TODO 部分，模拟 lodash 中的 _.get() 函数。
*
* --- 测试用例 ---
*
* 输入：
* const obj = { selector: { to: { toutiao: "FE Coder"} }, target: [1, 2, { name: 'byted'}]};
* get(obj, 'selector.to.toutiao', 'target[0]', 'target[2].name')
* 输出：
* ['FE coder', 1, 'byted']
*/
- 一下那种方式性能好一点
init: <body><div>0</div></body>
A. document.innerHtml = '<body><div>1</div></body>;
B div.innerText = '2'
- document.innerHtml = document.innerHtml;会发生重排或重绘吗
- css的引入方式，link和@import有什么区别，各自的优缺点是什么
- Object.defineprototype和proxy的优缺点分别是什么
- 单页应用及多页应用的优缺点
- 实现以下函数
写一个加法函数sum，支持sum(1)(2)(3,4)(5,6,7....)
console.log(sum(1,2,3)(4).run()) => 输出 10
console.log(sum(1,2,3)(4)()) => 输出 10
涂鸦（当时没记录，大都忘了）
一面（电话）
- URL输入到页面显示过程（尽量详细）
- 原型及原型链
二面（现场）
略（忘记了）
网易
一面（电话）
- weex和rn的区别
- rn和h5有什么区别
- rn和h5在渲染层面有什么区别
- 首屏加载速度优化策略
- 长列表实现原理
- 长列表滑动太快，会导致白屏，怎么解决
二面（视频）
- 追问项目实现细节（超详细）
- 子元素垂直水平居中
- ssr到浏览器具体的渲染细节
- script加载阻塞渲染
- webpack基本实现原理
- webpack.config.js里有哪些常见的配置
- loader和plugin的区别
- AMD、CMD、ESModel区别
- vite基本实现原理
- vue.esm.js中esm是啥意思
- 移动端设计稿常用尺寸是多少，为什么是这个尺寸
- rem布局原理
- dpr是什么意思
- requestAnimation和requestAnimationFrame有什么区别
- vue中数据改变到页面重新渲染的过程
- vuex是干什么的，vuex数据流转的顺序是什么
- vue源码你都看了什么
三面（视频）
- vuex实现原理
- vuex怎样将store实例注册到每个组件之中的
- h5中，webview进入app后台，倒计时会挂起，怎样保证倒计时的准确性
- 移动端适配，使用px单位时，如何去完成适配的
总结
这次面试周期大概两个月，前期断断续续准备差不多一个月；字节本来二面过了的，奈何当天太晚，三面约到了第二天，然后第二天就告诉我二面挂了，哈哈😂，想来还是因为自己太菜
最终获滴滴、涂鸦、网易offer，本来想再试试阿里和腾讯，实在没精力了，太累了，到现在放贷的事情还没办完，所以最后再三权衡，选择了网易云音乐（饭是真的香）
生命不息，奋斗（捞钱）不止，与君共勉之
