大家好，我们在上一篇《【面经】5 年前端 - 历时 1 个月收获 7 个 offer 》中介绍了一位同学面试滴滴、58 同城等公司的经历，今天继续来分享他在 UMU、网易、快手、虾皮、字节的面经。

UMU (offer)

前两面都是远程，终面去了公司现场。

到了之后先做了一份测试题，大概就是考察基本认知能力的。完事后 CTO 来面试，直接在现场小黑板上写题。大佬对各种技术都能侃侃而谈，确实很厉害。

不过听说周六可能要加班，而且担心稳定性，就没选择这里。

一面

除了项目, 基本都是问的日常开发相关的东西, 比较实在。

• Node.js 如何调试？
• charles map local/map remote
• chrome devtool 如何查看内存情况

二面

• koa 洋葱模型
• 中间件的异常处理是怎么做的？
• 在没有async await 的时候，koa是怎么实现的洋葱模型?
• body-parser 中间件了解过吗
• 如果浏览器端用 post 接口上传图片和一些其他字段, header 里会有什么? koa 里如果不用 body-parser，应该怎么解析?
• websocket 的连接原理
• https 是如何保证安全的? 是如何保证不被中间人攻击的?

终面

• 【代码题】 给一个字符串, 找到第一个不重复的字符

ababcbdsa
abcdefg

• 时间复杂度是多少?
• 除了给的两个用例, 还能想到什么用例来测试一下?

网易

一面直接挂掉, 代码题整体写的乱七八糟, 挂掉理所应当...

一面

• 你觉得 js 里 this 的设计怎么样? 有没有什么缺点啥的
• vue 的响应式开发比命令式有哪些优势？
• 装饰器
• vuex
• generator 是怎么做到中断和恢复的？
• function 和 箭头函数的定义有什么区别? 导致了在 this 指向这块表现不同
• 导致 js 中 this 指向混乱的原因是什么?
• 浏览器的事件循环
• 宏任务和微任务的区分是为了做什么? 优先级?
• 【代码题】 实现 compose 函数, 类似于 koa 的中间件洋葱模型

// 题目需求

let middleware = []
middleware.push((next) => {
    console.log(1)
    next()
    console.log(1.1)
})
middleware.push((next) => {
    console.log(2)
    next()
    console.log(2.1)
})
middleware.push((next) => {
    console.log(3)
    next()
    console.log(3.1)
})

let fn = compose(middleware)
fn()


/*
1
2
3
3.1
2.1
1.1
*/

//实现compose函数
function compose(middlewares) {

}

• 【代码题】 遇到退格字符就删除前面的字符, 遇到两个退格就删除两个字符

// 比较含有退格的字符串，"<-"代表退格键，"<"和"-"均为正常字符
// 输入："a<-b<-", "c<-d<-"，结果：true，解释：都为""
// 输入："<-<-ab<-", "<-<-<-<-a"，结果：true，解释：都为"a"
// 输入："<-<ab<-c", "<<-<a<-<-c"，结果：false，解释："<ac" !== "c"

function fn(str1, str2) {

}

快手 (offer)

整体面试的感觉很专业, 面试态度也很认真, 考察的比较全面, 不过比较蛋疼的是 HR 面结束后拖了好久, 我 Shopee、腾讯、字节口头 offer 都拿到了, 快手最后才给的口头 offer, 也可能是想对比一下其他家的价格吧。

一面

• 小程序的架构? 双线程分别做的什么事情?
• 为什么小程序里拿不到dom相关的api？
• 下面代码的输出是什么？

console.log(typeof typeof typeof null);
console.log(typeof console.log(1));

• this 指向题

var name = '123';

var obj = {
 name: '456',
 print: function() {
  function a() {
    console.log(this.name);
  }
  a();
 }
}

obj.print();

• 【代码题】 实现一个函数, 可以间隔输出

function createRepeat(fn, repeat, interval) {}

const fn = createRepeat(console.log, 3, 4);

fn('helloWorld'); // 每4秒输出一次helloWorld, 输出3次

• 【代码题】 删除链表的一个节点

function deleteNode(head, node) {}

• 【代码题】 实现 LRU 算法

class LRU {
 get(key) {
 }

 set(key, value) {
 }
}

二面

• Promise then 第二个参数和catch的区别是什么？
• Promise 的 finally 怎么实现的？
• 什么是作用域链？
• Electron 架构
• 微前端
• webpack5 模块联邦
• Web Worker

三面

没有记录，应该都是问的项目

高德

一面直接挂掉, 面试官一直怼着各种 api 考察记忆力, 都是一些非常偏非常不常用的 api。

• 比如 css 有没有用过 xx 属性，是做什么的?
• Promise 有个 xx 方法，你知道是做什么的吗?

最终就是挂在了 css 的各种属性背诵上, 麻了, 面试的时候让候选人从头背这些 api 真的有意义吗?

一面

• symbol
• useRef / ref / forwardsRef 的区别是什么?
• useEffect 的第二个参数, 传空数组和传依赖数组有什么区别？
• 如果 return 了一个函数, 传空数组的话是在什么时候执行? 传依赖数组的时候是在什么时候执行?
• flex 布局
• ES5 继承
• ES6 继承, 静态方法/属性和实例方法/属性 是什么时候挂载的
• Promise 各种 api
• 各种 css 属性

Shopee (offer)

面试比较痛快，一共两面，一下午直接搞定。

一面结束后直接约了一个小时后二面，二面结束后直接约了一个小时后的 HR 面。

但是最后谈薪的时候 HR 也是比较磨叽，一直说要等快手或者字节的价格出来，他们才会给价格，说是这样才更有竞争力。

一面

• 各种缓存的优先级, memory disk http2 push?

• 小程序为什么会有两个线程? 怎么设计?

• xss? 如何防范?

• 如果大量日志堆在内存里怎么办?

• 【代码题】 深拷贝，需要手写一个深拷贝函数deepClone，输入可以是任意JS数据类型

const deepClone = (obj, m) => {

};

• 【代码题】 二叉树光照，输出能被光照到的节点, dfs 能否解决?

输入: [1,2,3,null,5,null,4]
输出: [1,3,4]

输入: []
输出: []

/**
 * @param {TreeNode} root
 * @return {number[]}
 */
function exposedElement(root) {

};

• 【代码题】 输出顺序题

setTimeout(function () {
  console.log(1);
}, 100);

new Promise(function (resolve) {
  console.log(2);
  resolve();
  console.log(3);
}).then(function () {
  console.log(4);
  new Promise((resove, reject) => {
    console.log(5);
    setTimeout(() =>  {
      console.log(6);
    }, 10);
  })
});
console.log(7);
console.log(8);

• 【代码题】作用域

 var a=3;
 function c(){
    alert(a);
 }
 (function(){
  var a=4;
  c();
 })();

• 【代码题】 说说下面代码的输出是什么？

function Foo(){
    Foo.a = function(){
        console.log(1);
    }
    this.a = function(){
        console.log(2)
    }
}

Foo.prototype.a = function(){
    console.log(3);
}

Foo.a = function(){
    console.log(4);
}

Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

终面

• 错误捕捉
• 前端稳定性监控
• 前端内存处理
• 【代码题】 好多请求, 耗时不同, 按照顺序输出, 尽可能保证快, 写一个函数.

const promiseList = [
 new Promise((resolve) => {
  setTimeout(resolve, 1000)
 }),
 new Promise((resolve) => {
  setTimeout(resolve, 1000)
 }),
 new Promise((resolve) => {
  setTimeout(resolve, 1000)
 })
]

fn(promiseList);

• 【代码题】 一个数组的全排列

输入一个数组 arr = [1,2,3]
输出全排列

[[1], [2], [3], [1, 2], [1, 3], ...., [1,2,3], [1,2,4] ....]

腾讯 (offer)

腾讯的整体流程是最长的，一共面了 5 次，整体面试难度倒不高，只有前三轮是正经问技术问题，后面更像是在聊天聊项目。

因为当时整体其他 offer 都快到 ddl 了，就赶紧催 hr 给个数字，最终薪资不及预期就没去了。

一面

• 普通函数和箭头函数的 this 指向问题

const obj = {
 fn1: () => console.log(this),
 fn2: function() {console.log(this)}
}

obj.fn1();
obj.fn2();

const x = new obj.fn1();
const y = new obj.fn2();

• promise 相关的特性
• vue 父子组件，生命周期执行顺序 created mounted
• vue3 添加了哪些新特性?
• xss 的特点以及如何防范?
• Http 2.0 和 http3.0 对比之前的版本，分别做了哪些改进?
• Http 3.0 是基于 udp 的，那么它是如何保证传输可靠性的?
• TCP 和 UDP的区别是什么？
• CSP 除了能防止加载外域脚本，还能做什么?
• typescript 中的 is 关键字有什么用？
• 【代码题】 多叉树, 获取每一层的节点之和

function layerSum(root) {

}

const res = layerSum({
    value: 2,
    children: [
        { value: 6, children: [ { value: 1 } ] },
        { value: 3, children: [ { value: 2 }, { value: 3 }, { value: 4 } ] },
        { value: 5, children: [ { value: 7 }, { value: 8 } ] }
    ]
});

console.log(res);

二面

没记录，应该是和前面遇到的面试题重复了

• 【代码题】 虚拟 dom 转真实 dom

const vnode = {
    tag: 'DIV',
    attrs: {
        id: 'app'
    },
    children: [{
            tag: 'SPAN',
            children: [{
                tag: 'A',
                children: []
            }]
        },
        {
            tag: 'SPAN',
            children: [{
                    tag: 'A',
                    children: []
                },
                {
                    tag: 'A',
                    children: []
                }
            ]
        }
    ]
}

function render(vnode) {

}

三面

• 前端安全 xss 之类的
• Https 中间人攻击
• 前端 History 路由配置 nginx

【代码题】 有序数组原地去重

四面(gm?忘记了)

• 如何估算一个城市中的井盖数量

终面

都是项目

字节 (offer)

之前听说字节各种 hard, 给我吓惨了, 不过可能是运气好, 碰到的题都很简单。

一面

• 【代码题】 二叉树层序遍历, 每层的节点放到一个数组里

给定一个二叉树，返回该二叉树层序遍历的结果，（从左到右，一层一层地遍历）
例如：
给定的二叉树是{3,9,20,#,#,15,7},
该二叉树层序遍历的结果是 [ [3], [9,20], [15,7]
]

• 【代码题】 实现一个函数, fetchWithRetry 会自动重试 3 次，任意一次成功直接返回

• 【代码题】 链表中环的入口节点

对于一个给定的链表，返回环的入口节点，如果没有环，返回null

二面

• 截图怎么实现
• qps 达到峰值了，怎么去优化
• 如果要实现一个类似“谷歌图片”的系统，你会有哪些方面的考虑？
• 最小的k个数
• 节流防抖
• sleep 函数
• js 超过 Number 最大值的数怎么处理?
• 64 个运动员, 8 个跑道, 如果要选出前四名, 至少跑几次?
• 前端路由 `a -> b -> c`这样前进，也可以返回 `c -> b -> a`，用什么数据结构来存比较高效
• node 服务治理
• 【代码题】 多叉树指定层节点的个数

三面

• 【代码题】 叠词的数量

Input: 'abcdaaabbccccdddefgaaa'
Output: 4

1. 输出叠词的数量
2. 输出去重叠词的数量
3. 用正则实现

写在后面

最近的整体行情好像更差了，Shopee 也传出了很多毁 offer 的事情，当时幸亏没去...

不过劝想看机会的大伙还是骑驴找马，可以先简单试试水，看看行情到底如何，不要只听网友怎么说。

最终愿大家变成 offer 收割机，每个人都能拿到自己心仪的 offer。

最后，还给“前端面试题宝典”的辅导服务打下广告，我们目前有面试全流程辅导、简历指导、模拟面试、零基础辅导和付费咨询等增值服务，感兴趣的伙伴可以联系小助手（微信号：interview-fe）了解详情哦~

原文作者：路从今夜白丶

原文地址：https://juejin.cn/post/7142690757722243102