【面试】2022被裁之后的面经-详细篇

一篇挂面

# 结果

https://www.yuque.com/docs/share/994bde68-0b74-4116-bd07-a2c764697c29?# 《俊劫的面试结果》链接有效期至 2022-05-19 11:51:36 (opens new window)

失效的话，博客主页加我好友，盯一下我哈

# 面经

这次计划比较失败，面的公司太多了，很多不想去。只记录了一部分问题，各位看官老爷们按需查看哈

# 字节广告

1 面

为什么用 monoRepo + lerna？
项目中的难点？JSONschema 校验？ajv 原理？
web worker 支持跨域吗？通信可以跨域，js 脚本不可以
service worker、web worker、其他浏览器 woker 作用，使用场景？
webpack loader 和 plugin？有没有写过？没写过，简单描述了一些原理
两个都写过，谈谈开发中 react 和 vue 的区别？
不用 redux 这类东西，怎么做组件之间的数据传递？
node bff 做了什么？
react useState 原理
vue 响应式原理
vue keep-alive 原理？memo 原理？两者实现区别？
keep-alive 缓存的是什么？会对 computed，data 缓存吗？
项目中做过哪些优化？
云打印？node 怎么给打印机发指令？
promise 并发实现，那依次执行呢？
实现一个 eventEmitter
实现一个惰性柯里化，sum() sum(1,2)() sum(1,2)(3,4,5)() 2 面
项目介绍
项目中的角色，有哪些难点，项目还存在哪些问题？
权限系统设计
站在推销员的角度，向我介绍下微医这个医生工作站
cookie、sessionStorage、localStorage 区别? sessionStorage 跨标签页共享？除了 Window.open? a 标签设置 rel=noopener
输入输入

setTimeout(() => {
  console.log(1);
}, 0);

new Promise((resolve, reject) => {
  console.log(2);
  for (let i = 0; i < 10000; i++) {
    if (i === 9999) {
      resolve();
    }
  }
  console.log(3);
}).then(() => {
  console.log(4);
});

console.log(5);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

promisify 实现

// 原有的callback调用
fs.readFile("test.js", function (err, data) {
  if (!err) {
    console.log(data);
  } else {
    console.log(err);
  }
});

// promisify后
var readFileAsync = promisify(fs.readFile);
readFileAsync("test.js").then(
  (data) => {
    console.log(data);
  },
  (err) => {
    console.log(err);
  }
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

add 函数, 奇数次执行输出 1，偶数次执行输出 0

// 写个add函数, 奇数次执行输出1，偶数次执行输出0
// add() 1
// add() 0
// add() 1
// add() 0

1
2
3
4
5

# 字节飞书

自我介绍
项目介绍
项目难点
第一题：const a: number = 1 讲一讲 ts 的编译过程
第二题：字符串匹配及优化（a 串在 b 串中第一次出现的位置）
- 两个字符串“ababceekabc” “abc” 找 abc 出现的第一个位置
第三题：给个 class A 和 class B，B extends A。用 es5 的方法实现一下

class A {
  constructor() {
    console.log("a");
  }

  test() {
    console.log("a.test");
  }
}

class B extends A {
  constructor() {
    super();
    console.log("b");
  }

  test() {
    super.test();
    console.log("b.test");
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

第四题：一个 node 数据结构，取所有 num 的值作计算，考虑数据量大，children 无线嵌套的情况

const node = {
  num: 1,
  // children 无限个
  children: [
    {
      num: 3,
      // children的子项都是一样的数据结构
      children: [{}, {}],
    },
    {
      num: 9,
      children: [{}, {}],
    },
  ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Daraz

1 面

// 题目1
var name = "map";
function print() {
  console.log(this.name);
}

var object = {
  name: "object",
  getNamePrinter: function (fn) {
    fn && fn();
    return () => {
      console.log(this.name);
    };
  },
};

const arrowFunction = object.getNamePrinter(print);
arrowFunction();

const getNamePrinter = object.getNamePrinter;
const arrowFunction1 = getNamePrinter(print);
arrowFunction1();

// 题目2
// 宏任务微任务，输出相关的

// 题目3
// 实现一个防抖函数，需要支持事件对象event传递

// 题目4
// 实现两个对象的深比较

// 题目5
// 两数之和

// 题目6
// 大数相加

// 题目7
// 一道全英文leetcode题，二维数组相关操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 乐刻

电话 1 面

实现一个深拷贝？
判断类型的方法？object.prototype.toString.call 判断，如果修改了目标 prototype，判断结果还准不准？
箭头函数和普通函数区别？
new 原理？
函数字面量声明和直接声明，通过 new 出来的对象有什么区别？
map 和对象的区别？es6 之前没有 map 怎么办？
JSBridge 的原理？
setState 是同步还是异步？为什么加了 setTimeout 就变成同步的？
class 中 setState 和 hooks 中 useState 里第二个参数的区别？
fiber 的理解？
浏览器渲染流程？重排会影响生成的 DOM 树吗？（不考虑 js 和 css 操作）DOM 树和渲染树节点是一样的吗？比如 head 会不会存在渲染树中？
ts 的泛型理解？
ts 枚举的作用？
webpack 项目大了以后打包时间比较久，怎么优化？
Node Bff 做了什么？鉴权怎么做的？
你有什么自己的亮点我没问到的?
你有什么想问的？

# 税友

1 面

xxx

2 面

项目介绍，node bff 做的一些事情，怎么做容灾处理？（不了解，就说了 pm2）
hooks 优缺点
js 为什么单线程？多线程怎么设计？event loop？
js 设计异步的优点？
微任务中有 1000 个任务，会依次清空还是会执行宏任务？
setTimeout 中无线嵌套 1000 个 setTimeout，和直接 setInterval 1000 次，有什么区别？
执行到 setTimeOut 的代码，是立刻添加到执行队列还是会等倒计时结束添加？
ajax 是同步还是异步？结合之前聊的同步异步机制
一个场景，闭包中声明了 x 和 y，return 函数只使用了 x，y 会不会被垃圾回收掉？为什么？
如果让你做架构师，前端先不管，从后端运维方面说说怎么做性能优化？
DDD 设计

# 同花顺

webpack entry 会限制文件类型吗？
loader 执行顺序？
ts pick 实现
const a: keyof any
js 实现 setTimeout
nextTick 原理
prmise 错误处理？then 里面抛出的异常会被 catch 捕获吗？

# 众安保险

1 面

for in of 区别，of 能不能遍历对象？
computed 如何传递参数？
Vue 如何监听子组件的生命周期？hook？
如何快速生成一个随机字符串？toString？
0.1 + 0.2 为什么不等于 0.3，中间做了哪些转换？
call 是如何修改 this 的？箭头函数里面打印 argument 是什么？怎么获取箭头函数的参数？

# Zoom

视频 1 面

项目介绍
看了你的掘金，让你写 Java，说说你对 Java 的理解，和前端的区别？
你觉得项目中存在哪些问题？
埋点的原理了解多少？
如何判断浏览器当前 tab 是不是激活状态？用户是不是活跃状态？
站在统一的视角，怎么设计收集接口的响应值？
antd 表单系统怎么设计？
表单之间的传值底层用的什么？
设计一个用户引导组件？选择器设置为 class 还是 id？怎么高亮？
用一个哈希算法把一个具有一万个字符的字符串，哈希一下？
如果让你做一个迷宫，左上角到右下角，怎么设计？
类似 pop 的组件为什么把弹窗元素插入到 body 最下面？
其他 xxx 问题

# 小红书

1 面

event loop
commonJs 和 esModule 区别
es5 原型继承
ts private protected 作用和区别
ts 中的 super
项目中的性能优化、遇到的难题
web worker
hooks 和高阶组件对比
react hooks 中 useDebounce 会有什么问题？怎么解决？
react setState 什么时候是同步，什么时候是异步
输入顺序：react setState 相关

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0,
    };
  }
  componentDidMount() {
    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val); // 第 1 次 log

    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val); // 第 2 次 log

    setTimeout(() => {
      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val); // 第 3 次 log

      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val); // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

算法题: 实现一个计算器 III："3+2*( 9/3 )" hard 难度
实现 set 方法

set(user, 'name', '张三')
set(user, 'image.url.host', 'xxxx')
set(user, 'image.width', 300)
输出:
user={
    name:'张三',
    image:{
        url:{
            host:'xxxx'
        },
        width:300
    }
}
并且支持拓展，例如：set(user, 'image.url.host.abc.acd', 'xxxx')

1
2
3
4
5
6
7
8
9
10
11
12
13
14

vue 插槽原理？
浏览器缓存对应的响应头？
dev 阶段如何检测文件是否变动？
埋点曝光原理？
微前端 js 隔离和 css 隔离，css in js？
微前端优缺点？

# 美餐

先来一道 js 编程题，主要用到数组的一些 api 使用，扁平化、去重、排序。
自我介绍
工作中遇到的一些问题，有挑战的一些事情
打印主要了解哪些东西？云打印实现？如何和蓝牙设备通信？
为什么要用 monoRepo？好处、缺点
lerna 一般使用哪些功能？
为什么要用 web worker，怎么用的？service worker 有没有了解过？PWA 实现有没有了解过？
BFF 主要做了什么事情？
Node 如何与 Java 服务通信？
说说你的 git flow 流程
聊一聊跨域？复杂请求的 options 请求每次都会发吗？怎么避免？ Access-Control-Max-Age 服务端是怎么根据 options 请求返回支持的方法的？
webpack 打包优化？
浏览器缓存，怎么实践资源的强缓存？max-age 一般设置多久？
结合刚开始的编程题，怎么解决 flat 这类比较新的技术的兼容性？babel polyfill 怎么配置？实现原理？怎么做按需加载？
输入 URL 到页面加载的过程，说一声你知道的浏览器渲染进程相关的东西。为什么浏览器一个 tab 崩溃，其他页面没事？

# 深信服

promise 并发
数组交集 ii https://leetcode-cn.com/problems/intersection-of-two-arrays-ii/
pickRequire 实现
css3 动画和 js 动画，layout 之后的合成层，css 动画会触发回流与重绘吗？
nextTick 内部再次 nextTick
vue 更新视图的时候渲染的是整个 template 还是局部变量
monoRepo pnpm

# 擎郎智能

项目 xxx 聊了聊
微前端相关
node bff 层做了哪些东西
h5 布局方式？flex，grid 不知道要问的是不是这个
es6 以及以后新特性
promise 原理
symbol 使用场景
new 构造函数的过程
css3 新特性，脑子抽了，只想起来 animation，translation
css 实现一段快速 -> 匀速 -> 减速动画
new vue 过程
vue 双向绑定原理
react setState 原理
webpack 优化？有没有写过 loader
Nginx 了解哪些，proxy，负载均衡，gzip 配置，http2 配置啥的
输入 URL 到页面渲染的过程，浏览器渲染原理？用了几个进程？
浏览器缓存聊聊，强缓存协商缓存，
有哪些排序算法？选一种说下 JS 实现，时间复杂度多少？

# 古茗

你觉得 CRM 为什么不行了，说说你的理解？竞争力，客户付费意愿，带来的效益不好直观看出来，产品无法带来流量，只有私域
Promise 控制请求并发数与失败重试等机制
海报服务优化。为什么要做这个？你觉得什么情况下才需要发起这样的架构输出？业务通用性，服务复杂度？怎么衡量这个服务带来的价值？
权限模型表结构设计？RBAC 是什么？
聊了聊项目，主要就是背景、解决方案、自身的价值、整个架构带来的价值？
如何将 Typescript 定义解析成 ts-json-schema 的？只是说用了一个库，接着问原理，扯了扯 AST，具体不知道。。。schma 有什么用？
如果让你搭建 qa/pre/prod 多环境，你会怎么做？qa 中不同服务带上不同请求头，nginx 根据标识转发到对应 docker 容器。接着问 docker 的一些问题？直接说不知道
职业规划？提到了前端工程化，接着问。今天面了几个都说要做前端工程化，说说你的理解，为什么这么多人都要做这个？公司需求不同，对应着工程化实践不同。接着问了个啥，我没答出来，面试官自己笑了，说这个是压力题
你有什么想了解的？我说了下公司对技术的重视，面试大哥直接说了：公司会重视某个产品，但是这个谁来做，并不关心。我扯了一些团队开源，团队影响力相关的东西，面试官自己说这个我得思考下，还谢谢我的提醒。。。。

#面试

最近更新时间： 2023/02/16 14:45:33

← 【面试】前端求职之路【逃离一线】被裁后的面经与感慨→