[面经分享] 收获多家大厂offer | 分享我的2022秋招经历

前言

好久不见，我是 LeBron，有段时间没写博客了。最近几个月的大部分精力都放在秋招上了，边实习边秋招还是挺吃力的，总算结果还是不错。

先介绍一下个人情况：2022 届双非本科应届生，项目经验和经历还算丰富，在字节实习至今也快 8 个月了，详细情况可以来我的博客看看哈 : LeBronChao’s Blog

秋招从 7.19 ~ 10.24 历时三个多月，腾讯、阿里、字节、百度、大疆、华为、Shopee、滴滴、美团、拼多多 10 家公司，将近 40 场笔试 / 面试（自我介绍都快念麻了)，基本全部通过收到 offer，借此机会做个总结和大家分享一下面经。

面试前的准备

简历

可以参考前端 Offer 提速：如何写出有亮点的简历

这个其实不用讲太多了，尽量地写出亮点，比如

• 开源项目经验
• 实习经历 & 重点产出
• 技术深度展现 / 知名开源框架 PR
• 技术热情 / 影响力
• 知识产权 / 论文
• 校园项目经验 / 亮点经历
• 等等…
• 重点：Word 格式容易出问题 尽量用 PDF 格式

相应岗位知识

这个其实靠平时积累会比较多一点，面试前可以通过面经做个自测，我面试的大部分是前端岗位主要分为以下几个方面

• 计算机网络

  • TCP / UDP
  • HTTP / HTTPS / WebSocket
  • LB / CDN / DNS / IP
  • 网络安全
  • …

• 操作系统

• 开发技能 & 原理

  • HTML / CSS(LESS) / JS / TS
  • Vue、React、Node、Webpack 等
  • 浏览器 / 小程序 / 跨端
  • 性能优化 / 安全策略
  • 这个根据自己的实际情况来定，不熟悉的不要写到简历里

• 算法题 / 智力题

  • 系统学习数据结构和算法

  • 然后就是刷题了，Hot100 和常见题刷起来吧，主要刷 easy 和 middle，hard 没必要

  • 培养举一反三的能力

  • 题库

    • 力扣
    • CodeTop 企业题库

• 相应的技术广度扩展和深度探索

• 新的技术动态关注程度，比如

  • ES 新特性
  • Vue3 的更新和对比
  • 字节的 Modern.js
  • 阿里的 Kraken
  • …

• 提前想好常见问题的答案和对面试的公司做初步的了解，比如

  • 你的项目有什么亮点和难点
  • 你会从哪些角度去考虑选择毕业后的第一家公司
  • 你觉得 XXX 是一家怎么样的公司
  • 你有什么优点和缺点
  • 为什么想做全栈工程师
  • 你的职业规划是怎么样的
  • …

感兴趣的话可以看看这篇文章：[建议收藏] 初中级前端应该掌握的基础知识

我的公众号、博客里也有挺多相关知识的讲解，感兴趣可以看看：前端 LeBron

欢迎关注我的微信公众号：

自我介绍

你和面试官一般都是初次见面，他只能通过你的简历和自我介绍来了解你。所以说不是特别熟悉的东西不要写到简历里，自我介绍也不要说。面试官一般也基本不会逐字逐句地看你的简历，可能没法发现你的亮点，自我介绍这不是把机会给你了吗（开始装逼哈哈哈。自我介绍可以由你的基本信息、项目经验、技术亮点和解决哪些比较复杂的问题、个人经历的亮点和未来的规划简述组成。也可以尝试引导面试官问你问题，一般面试官都会从简历 / 自我介绍中开始发问。自我介绍要简明干练，一般 1min 左右就好了。

总结

三个多月的秋招生活告一段落，最终选择了留在字节工作。新时期的工作带来了新的挑战，没有躺赢的命那就站起来奔跑吧！努力是会有结果的！

我是一个即将毕业的 22 届双非本科应届生，在字节游戏中台做前端开发工作。希望我的秋招面试经验可以给予正在找工作的你一点帮助，特别是正在奋战秋招/实习的同学、学弟和学妹们。字节游戏中台前端部门求贤若渴，持续招人中。感兴趣的同学可以通过内推链接投递，有问题也可以加微信沟通。Vx:LeBronChao-

游戏中台内推：

• 深圳

  • 社招：前端开发（高级）工程师-游戏中台
  • 校招 & 实习：前端开发实习生 — 有转正机会

• 上海

  • 社招：前端开发（高级）工程师-游戏中台
  • 校招 & 实习：前端开发实习生-独立闭环业务（可转正）

• 【社招总内推链接】

  • https://job.toutiao.com/s/R6qQccL

• 【内推码】

  • 4FCV6BV

• 【我的邮箱】

  • chaoweiwen@bytedance.com

废话不多说，直接上面经 ↓

字节

10.9 实习转正答辩 通过

腾讯

8.17 WXG 游戏一面 60min 通过

0. 实习工作主要负责什么
1. 小程序开发中遇到过什么问题？怎么解决的
2. 实习项目的难点、亮点
3. 字节小程序和微信小程序有什么区别
4. Uni-app 框架做了什么工作、处理？
5. 用 Uni-app 开发的过程中遇到过什么问题？怎么解决的？
6. 从输入网址到整个渲染过程描述
7. 除了 HTTP 缓存还有什么缓存方式？
8. HTTP 缓存、localstorge、sessionstorge、cookie、indexDB 这些方式实现缓存有什么区别、特点
9. 做过 CDN 相关的工作吗？
10. CDN 有什么好处呢？
11. 聊参与的开源项目技术栈、云开发
12. 进程和线程的区别？
13. 进程间通信方式有哪些？
14. 有用过 Mysql？讲解一下什么是事务？
15. 二叉树有哪些遍历方式？哪些属于 DFS?
16. 有用过预处理器吗？有什么特点？
17. 有考虑过多主题样式吗？怎么实现？
18. Node 用过吗？用过哪些相关框架？做过哪些东西？
19. 手撕 jsonStringfy
20. 实现 JSON.parse 的思路？除了 eval 和 new Function（AST、编译原理）
21. 跨端方式有哪几种解决方案？

8.18 WXG 游戏二面 40min 通过

0. 为什么选择做前端？
1. 前端和其他方向相比，比如机器学习，有什么区别和特点
2. 怎么样才算前端做得比较好？
3. 有做过性能优化吗？怎么做得？
4. 小程序是怎么跑在客户端的?
5. 双线程架构有什么好处呢？
6. 如果不使用双线程架构会怎么样？在技术指标上会有什么变化?
7. 体验卡顿问题？一帧大概多少毫秒？
8. JS 和渲染，你觉得一帧各占多少毫秒比较合适？
9. 说一说各种跨端的方式？JSB 是怎么进行桥接的？
10. 除了 JSB 还有什么连接方式吗？
11. 做过性能优化，有哪些操作？首屏渲染优化了多少秒？达到目标了吗？达到你自己的目标了吗？
12. 各个操作分别优化了多少毫秒？
13. CDN 的原理？为什么资源加载快？
14. 如果你是一个 CDN 服务商，你会怎么设计你的 CDN 来吸引开发者。
15. 什么情况下会存在跨域问题？
16. 你在字节感受怎么样？为什么会选择来微信？
17. 你觉得首屏渲染多少秒是一个合格的标准？
18. 之前有投递过腾讯吗？为什么没有来？
19. 后面可以过来实习吗？实习多久？后续在哪个城市发展？
20. 反问环节、业务介绍

8.30 WXG 游戏三面 30min 通过

0. 实习多久了？为什么投递腾讯？
1. 聊实习业务、技术难点、亮点，实习对个人的提升
2. 小程序怎么调用客户端能力？JSBridge 初始化需要多少时间？
3. Faas 和普通的后端工程服务有什么区别和特点？
4. 原子服务之间的调用会有什么问题吗？
5. 你自己起一个 Node 后端项目？需要做什么操作能让它更好更稳定地运行呢？
6. 算法题 LeetCode middle 122 买卖股票的最佳时机 II
7. 反问环节、新人培养、业务了解

9.7 WXG 游戏 hc 不足流程结束

9.14 TEG 腾讯大数据（数平）一面 40min

0. 字节实习项目介绍、难点、亮点、挑战
1. 企业项目性能如何？FCP、FMP 如何?是否进行了分包加载？包体积大小如何？
2. Vue 路由模式有几种？有什么区别？
3. Vue 最大的优点和缺点是什么？
4. 有实战过 React 吗？和 Vue 对比有什么区别和优缺点？
5. Class 组件和函数组件有什么区别？
6. React 组件间数据传递方式
7. 用过打包工具吗？介绍一下 Webpack
8. 用过哪些 Loader 和 Plugin？
9. Plugin 的原理和编写思路是怎么样的？
10. 前端异常和性能监控怎么做？让你设计一个异常和性能监控平台你会怎么设计？
11. LocalStorge 和 cookie 有什么区别？
12. ES6 实现排序有哪几种方式？
13. 了解 Set 吗？介绍一下
14. 解决跨域的方式有哪几种？分别是什么原理和实现形式？
15. 有用过代理工具/抓包吗？
16. 个人职业规划
17. 用过 Node 吗？有哪些应用场景？
18. 字节转正了吗？会因为什么选择一家公司？考虑哪些因素？
19. 反问环节、业务介绍

9.15 TEG 腾讯大数据（数平）二面 60min 通过

0. 物联网工程和计算机是什么关系？

1. 大学学习了哪些课程？计算机系列课程学过吗？

2. 简历上各个项目挨个聊

3. 数组和链表有什么区别和特点

4. 链表有多少种类型？

5. 双向链表的应用场景有哪些?

6. 一道贪心算法题

   有 1、5、10、50、100 面值硬币，输入一个长度为 5 的数组，表示有多少枚对应面值的硬币，再输入一个需要凑齐的数值，输出最少需要多少枚

7. 常见的排序算法有哪些？

8. 快排的实现思路是？时间复杂度是？冒泡呢？

9. 有用过哪些设计模式？介绍一下

10. 常用 Vue 的哪个版本？nextTick 是怎么实现的？什么原理？知道 process.nextTick 吗？

11. Vue 异步更新介绍一下

12. 聊浏览器执行机制、事件循环、多线程架构

13. Vue 怎么实现数据双向绑定和视图更新

14. 有用过 ts 吗？有什么好处和特点？

15. 聊字节实习项目

16. 聊小程序 WebView 预加载、热更新机制

17. 反问环节、业务介绍

9.23 TEG 腾讯大数据（数平）GM 三面 20min 通过

0. 本科期间产出了很多论文和知识产权？是很早就开始做了吗？
1. 你是一个学霸吗？还是实践能力比较强？
2. 聊字节实习项目和工作
3. 聊职业规划、个人发展
4. 为什么想转全栈？
5. 去字节实习的目的是什么？
6. 字节如何评估你的实习工作？
7. 你如何做你的述职答辩？
8. 你如何考虑你的校招去向，会因为哪些因素选择一家公司？目前更倾向哪家公司？说说你的想法
9. 你觉得腾讯和字节有什么不同？
10. 反问环节

9.26 TEG 腾讯大数据（数平） HR 面 20min 通过

0. 为什么不考虑考研？
1. 介绍一下获得国一等奖的项目和发明专利
2. 介绍一下开源项目
3. 你觉得字节是一家什么样的公司？
4. 你觉得腾讯是一家什么样的公司？
5. 你觉得 TEG（技术工程事业群）的价值怎么体现？
6. 你觉得加入腾讯 TEG 工作有什么挑战
7. 为什么想转全栈？
8. 手里还有其他 offer 吗？怎么考虑和选择
9. 哪里人？后续在哪个城市发展？
10. 有无亲属在腾讯
11. 反问环节

阿里

8.13 淘系一面 60min 通过

一面老板直接上了我是没想到的

0. 为什么想来阿里？

1. 聊一下你觉得做得比较好的项目，有什么难点和亮点？

2. 聊负载均衡器项目

   0. Node 进程间通信方式是怎么实现的?
   1. Node 多进程架构是怎么样的？怎么监听同一个端口
   2. 一致性哈希算法的实现原理是？
   3. 最小连接数算法的实现方式是？
   4. 介绍一下 ARP 协议的作用
   5. 你的负载均衡器有用到 ARP 应用吗？怎么应用？

3. 聊企业项目亮点

4. 讲讲 Faas 的理解，优缺点

5. 小程序的技术架构原理是怎么样的？

6. 小程序为什么要使用双线程+JSB 的架构？

7. Vue3 的 hooks 原理？

8. Vue3 有哪些 hooks API？

9. 讲一讲 Webpack 的原理

10. 反问环节

9.7 淘系 拖了一个月告知 hc 不足…

华为

10.16 一面 60min 通过

0. 算法题

   碰撞检测算法，给定一个数组表示一系列行星。对于数组的每一个元素，其绝对值表示行星的大小，正负表示行星移动的方向（正表示向右移动，负表示向左移动）找出碰撞后剩下的所有行星。碰撞规则：两个行星相互碰撞，较小的行星会爆炸。如果两颗行星大小相同，则两颗行星都会爆炸。两颗移动方向相同的行星永远不会发生碰撞

   用例：

   [5, 10, -5] => [5,10]

   [8, -8] => []

   [10, 2, -5] => [10]

   [-2, -1, 1, 2] => [-2, -1, 1, 2]

1. Vue 声明周期有哪些

2. 讲一讲什么是 MVC

3. Vue 和 React 有什么区别

4. Vuex 有哪些使用场景？为什么使用？Vuex 的实现原理是？

5. Vue 的路由模式有哪些？区别和实现原理是？

6. 物联网场景 Web 和常规 Web 场景有什么区别？

7. HTTPS 加密原理是？

8. 讲讲你做的负载均衡器

9. 小程序和 h5 有啥区别？

10. Uni-app 的转译原理介绍一下

11. 反问环节、业务介绍

10.16 二面 45min 通过

0. 算法题

   给定一个数组，里面有 6 个整数，求这个数组能够表示的最大 24 进制的时间是多少，输出这个时间，无法表示输出 invalid。

   输入描述:

   输入为一个整数数组，数组内有六个整数。输入数组长度为 6，不需要考虑其它长度，元素值为 0 或者正整数，6 个数字每个数字只能使用一次。

   输出描述:

   输出为一个 24 进制格式的时间，或者字符串"invalid"。

   备注:输出时间格式为 xx:xx:xx 格式。

   示例 1 输入[0,2,3,0,5,6]

   输出 23:56:00

   示例 2 输入[9,9,9,9,9,9]

   输出 invalid

1. 介绍知识产权（发明专利、实用新型专利、软件著作权），如何产出，团队构成和个人角色。

2. 介绍个人国奖项目

3. 大学四年的规划、经历和职业规划

4. 实习过程中遇到的技术难点、亮点

5. 反问环节、业务介绍

10.24 三面 40min 通过

0. 考虑留在字节吗？从哪些方面考虑选择一家公司？
1. 讲一讲你是怎么学习前端开发的？遇到过哪些难点？怎么解决？学习周期多久？
2. 聊字节实习项目、工作、产出
3. 实习工作合作过程中有遇到什么问题吗？怎么解决这些问题？
4. 合作过程中的沟通时间占比多少？
5. 实习和学业怎么平衡的？
6. 职业规划是怎么样的？
7. 意向城市
8. 反问环节

大疆

8.1 笔试 90min（60min 完成）通过

3 单选

1. 以下判断单链表有环方法错误的是 暴力穷举、找相同尾结点、哈希缓存、快慢指针找交点
2. 根据前序和中序选后续遍历的结果
3. JavaScript 解释器运行到什么阶段可以判断出不需要运行 func2 语法解析、词法解析、语义分析、生成字节码

//已知
//b.js包含如下代码
import { func1 } from './a'
//a.js包含如下代码
export function func1(){}
export function func2(){}

6 多选

1. 空间复杂度为 O（1）的算法有 归并排序、堆排序、冒泡排序、快速排序

2. 关于 HTTP 1.0/1.1/2.0 说法正确的事

   1. HTTP1.0 每次请求需要建立一个 TCP 连接
   2. HTTP/1.1 支持多路复用
   3. HTTP/2.0 支持二进制解析
   4. HTTP/2.0 支持服务端推送

3. Chrome 采用了多进程架构，创建少量 tab 时会启动独立的工作进程，以下关于线程、进程对比描述正确的是

   1. 进程安全性更高，tab 崩溃不会互相影响
   2. 进程启动成本更低，可以快速创建 tab
   3. 进程间通信效率更高，更容易支持插件化
   4. 进程管理更容易，tab 独立渲染更快。

4. 对于 JS 原型链描述正确的是

   1. 任何一个函数都有 prototype 属性
   2. 任何一个非 null 对象都有****proto****属性，等同于 prototype
   3. 原型链属性查找优先级为：实例****proto___ > 实例本身
   4. 严格模式中，全局作用域 this 为 undefined

let a = 2;
function func() {
  let a = 1;
  return (b) => {
    return (c) => {
      const ret = a + b + c;
      a *= 2;
      return ret;
    }
  }
}
​
let f1 = func();
let f2 = func();

console.log(func()(1)(2), func()(1)(2)); // 4 4

console.log(f1(1)(2), f2(1)(2)); // 4 4

console.log(f1(1)(2),f1(1)(2)); // 4 4

console.log(func()(1)(2), func()(1)(2)); // 4 5

1. 对于 Promise、async、await 描述正确的是

   1. Promise 用于解决回调嵌套过深的问题
   2. await 可以以”同步“的方式实现异步的逻辑
   3. Promise rejected 状态可以变为 pending 状态
   4. Promise 执行过程中可以取消

5 问答

1. EventLoop 看代码写输出

new Promise((resolve) => {
  console.log(1);
  setTimeout(() => {
    console.log(2);
    resolve();
  }, 0);
}).then(() => {
  console.log(3);
});
​
console.log(4);
​
setTimeout(() => {
  console.log(5);
}, 0);
​
setTimeout(() => {
  console.log(6);
}, 1);

2. 简述浏览器的垃圾回收机制
3. 介绍 Vue 的双向绑定实现原理及流程

enum WidgetType {
  Button,
  Text,
}
​
class Widget {
  draw() {}
}
​
class WButton extends Widget {
  type: WidgetType = WidgetType.Button;
  draw() {
    console.log("draw Button");
  }
}
​
class WText extends Widget {
  type: WidgetType = WidgetType.Text;
  draw() {
    console.log("draw Text");
  }
}
​
class WButtonText{
  button: WButton
  text: WText
  constructor(button: WButton, text: WText) {
    this.button = button;
    this.text = text;
  }
  draw() {
    this.button.draw();
    this.text.draw();
  }
}
​
function render() {
  let btext = new WButtonText(new WButton(), new WText());
  btext.draw();
}
​
/*
请尝试使用设计模式改写代码，使得render中可以用如下方式调用，得到相同的输出
*/
​
function render() {
  let btext = new WText(new WButton());
  btext.draw();
}
​
​

2. 实现一个搜索器，输入一个二叉树的根节点，调用搜索器的 next()方法，将返回二叉树中下一个最小的数；调用搜索器的 hasNext 方法，将返回是否存在下一个数。二叉树节点是无需整数

附加题：

能不能给非可视化方向的同学一点机会…

1. （可视化方向附加题）简述 WebGL 渲染管线
2. （可视化方向附加题）简述你了解的 3D 场景管理数据结构及其实现原理
3. （可视化方向附加题）在 WebGL 3D 场景中，要实现物体阴影效果，请简述实现原理。假设场景区域很大，要如何优化阴影效果。

8.19 一面 60min 通过

1. 为什么选择来大疆？不留在字节吗？
2. 你会因为什么因素选择一家公司？
3. 有其他公司的 offer 吗？
4. 介绍一下 V8 垃圾回收机制？
5. 知道 V8 垃圾回收机制对比编码有什么好处？
6. 什么情况会出现内存泄漏？
7. 你编码有出现过内存泄漏或者有排查过吗？
8. 怎么防止内存泄漏？排查解决治标不治本
9. 用的什么技术栈？有用过 TS 吗？
10. 介绍一下你的实习项目业务
11. 项目有什么难点？亮点？
12. 多主题的实现你有调研过其他的解决方案吗？这个需求的背景是什么？为什么不调研别的方案？为什么不和组内同时讨论？为什么没去看 antd 的源码实现？
13. 你的项目里面有涉及到权限等级系统的设计吗？
14. 让你设计一个省市区的级联选择器你会考虑哪些点？
15. 说说你的开源项目？
16. 有用过哪些 ES6 新特性，都说一说
17. 箭头函数 this 指向哪里？在不同的地方执行 this 执行会指向不同吗？
18. const 和 let 带来了什好处？
19. 除了块级作用域还有什么作用域？
20. 过渡使用闭包会出现什么问题？
21. promise 出现以前是怎么处理异步编程的？promise 有什么好处？编程思路发生了什么转变？会出现什么问题？
22. 从哪里看到的大疆招聘信息？了解大疆是怎么样的一个企业？
23. 你觉得来大疆做前端你会做哪些工作？
24. ↑ 你觉得你的描述能够吸引人吗？
25. 业务介绍、反问环节

8.26 二面 30min 通过

1. 讲一讲你觉得最能体现你技术水平的项目
2. 聊字节实习工作、项目、负载均衡器项目
3. 通过这些项目 / 字节实习，你学到了什么？
4. 个人的职业规划是怎么样的？
5. 场景设计，单人 / 多人了解，如何做加解密可以做到服务器被攻陷也不会泄漏聊天记录，加解密的流程是怎么样的？
6. 为什么想来大疆？有用过大疆的产品吗？
7. 你能总结一下你个人的优缺点吗？
8. 你的缺点有给你带来困扰和影响吗？
9. 你实习的同事对你评价怎么样？
10. 不考虑在字节留用吗？
11. 你的产品思维怎么样？通过什么事情能够体现？
12. 你平时有什么爱好？水平如何？
13. 反问环节、业务介绍

8.29 三面 50min 通过

1. 了解企业实习工作和业务
2. 最近国家约谈互联网大厂和做出整改你怎么看？动机是什么？面对整改你们做了什么工作?
3. 为什么是国家整改而不是企业主动去做？
4. 你对未来的职业规划包括选择是怎么样的？
5. 你会因为什么去选择一家公司？为什么选择大疆？
6. 你自己做的最满意的一个项目是什么？有什么特点和难点？
7. 自己做的项目和企业项目的区别是什么？实习有什么收获？
8. 你怎么看待大疆？和互联网企业不太一样，有什么特别的想法吗？
9. 你也有提到有用过大疆的产品，感觉体验怎么样？有什么功能建议点？…讨论大疆产品和爱好
10. 如果发了 offer 让你来？你觉得你需要提前做什么准备？
11. 你有遇到过比较大的挫折和困难吗，是怎么面对的？
12. 你的人生目标是什么？最大的优缺点是什么?
13. 有过让自己后悔的决策吗?
14. 字节和大疆都给你 offer 了你会怎么选择呢？
15. 反问环节、企业文化价值观交流

Shopee

7.19 提前批笔试 120min 通过

0. Symbol 相关

1. Proxy 相关

2. instance of 相关

3. %、rem、vh、px 相关

4. liunx 建立新进程的命令

5. 状态码 504 的含义

6. 前端安全，SQL 注入、XSS 攻击、CSRF 攻击、HTTPS、CA 相关

7. IP、子网掩码算广播地址

8. 正则相关，选一个正则不能进行的操作

9. 选一个会触发重绘、回流的情景

10. 不给 cookie 设置有效时间，它的生命周期是？

11. visualbility：hidden、display：none 是否触发重绘回流

12. 使用虚拟 DOM 的好处

13. CSRF 防御方案

14. 可能被 XSS 注入的标签

15. position 定位类型

16. CORS 解决跨域请求头设置 带 cookie

17. 算法：

    0. 找出最后一个只出现一个的字符
    1. ACM 的一道题 仓库拣货，二维数组标记几个点为货物，经过货物四周即为拣货成功。从入口开始，需要转向几次才能拣完所有的货。
    2. 相交数组，找出两个数组重复的项

7.25 提前批一面 50min 通过

0. 重绘重排及优化点
1. CSS 定位方式有哪几种 分别有什么区别
2. 虚拟 DOM 的优缺点
3. TCP 连接可靠性
4. TCP 是否有数据校验
5. TCP 流量控制、拥塞控制
6. Vue data 为什么是个函数
7. 深拷贝、浅拷贝 为什么会有这种概念
8. JS 基本类型、引用类型
9. V8 垃圾回收描述
10. 事件委托、事件代理
11. 算法：括号匹配、二叉树后续遍历
12. 反问环节

8.1 提前批二面 54min 通过

0. EventLoop，写输出和思路

setTimeout(() => {
  console.log("start");
​
  Promise.resolve().then(() => {
    console.log("Promise1");
    setTimeout(() => {
      console.log("setTimeout2");
    });
  });
​
  setTimeout(() => {
    console.log("setTimeout1");
    Promise.resolve().then(() => {
      console.log("promise2");
    });
  });
}, 0);
​
console.log("end");

2. 闭包、块级作用域，写输出和思路

var result = [],
  a = 3;
var total = 0;
function foo(a) {
  var i = 0;
  for (; i < 3; i++) {
    result[i] = function () {
      total += i * a;
      console.log(total);
    };
  }
}
​
foo(1);
result[0]();
result[1]();
result[2]();

3. 手撕防抖，支持立即执行
4. 前端性能优化，聊了静态资源上 cdn，HTTP 缓存，接口聚合，骨架屏/loading，DNS 预解析，preload，prefetch，webpack 优化：Compress、Tenser、HMR、多线程打包、开启缓存、DLL
5. 实现一个组件，无限滚动，要求刷新性能尽可能地好，聊了虚拟列表固定大小和不固定大小分别怎么实现
6. 聊实习项目、亮点、遇到问题、怎么解决
7. ES6 - 最新版本有什么新特性
8. Vite 了解吗，聊一聊，和 webpack 有什么区别，为什么比 webpack 快
9. 反问环节

8.4 提前批 HR 面 20min 通过

0. 自我介绍
1. 字节实习工作内容
2. 做项目遇到什么问题，怎么解决的？
3. 会因为什么选择一个公司？业务？薪酬？大厂背景？
4. 对什么业务比较感兴趣呢？
5. 用三个词形容自己
6. 职业规划，有考虑考研吗？
7. 自身有什么优缺点？
8. 手头还有什么 offer？
9. 有什么兴趣、爱好？

百度

8.19 提前批一面 80min 通过

1. 介绍企业实习项目

2. 项目并发量级这么大，是怎么承受高并发的？怎么更新版本？

3. 前端层面怎么设计可以减轻服务端压力，承受高并发？

4. 介绍一下 HTTP 缓存

5. CDN 有什么好处？原理呢？

6. 离线包有了解过吗？

7. 你的 safeRouter 是怎么封装的？怎么做的？

8. VueRouter 的原理是什么？

9. 个人项目的权限系统是怎么设计的？如果更复杂的权限系统你会怎么设计？

10. 封装一个通用的根据权限渲染不同内容的组件你会怎么设计？

11. 浏览器的时间循环机制描述一下？

12. Node 事件循环和浏览器有什么区别？

13. 遍历一个对象有什么形式？

14. for in 有什么缺陷？怎么避免？

15. for of 可以遍历对象吗？怎么让它能遍历

16. v-model 的原理

17. 怎么实现多个位置绑定同一个 v-model？

18. vue 组件传值有哪些方式？尽可能多地说

19. 工程化了解过吗？Webpack 的 Loader 和 Plugin 有什么区别？

20. Plugin 可以实现 Loader 的功能吗？

21. 拆包有了解过吗？路由懒加载有了解过吗？讲一讲

22. 讲一讲你了解的数据结构

23. 链表的头插法、查询、有序插入时间复杂度是多少？

24. 二叉树的查询复杂度是多少？

25. 快排的时间复杂度是多少？

26. 算法

    1. 数组去重

       1. set
       2. 手动

    2. 爬楼梯

       1. 迭代
       2. 递归
       3. 缓存 + 递归

27. 反问环节、业务介绍

8.21 提前批二面 80min 通过

1. 聊开源项目

2. 聊企业实习项目

3. 项目有什么难点？亮点？

4. 实习有什么收获？

5. 实现一个 repeat 函数，第一个参数是字符串，第二个参数是字符串重复多少次后返回，例如 repeat(‘str’,2)返回 strstr

   1. 实现这个函数你要考虑什么问题？
   2. 一个字符串的最大长度是多少？
   3. 除了问人，可以查文档等各种方式去查、写代码去验证，你会怎么做？（第二个问题）
   4. MDN 文档中文版和英文版有什么不一样吗？可以看一看
   5. 你现在写的是迭代的方式，你可以改成递归的方式吗？
   6. 你一般怎么对代码进行 debug？
   7. 你现在的时间复杂度是多少？可以优化吗？
   8. ok，优化到 logn 了，logn 的迭代形式要怎么改呢？

6. 反问环节、业务了解

8.24 提前批三面 30min 通过

1. 在字节转正了吗？

2. 后续职业规划是怎么样的？考虑考研吗？

3. 聊字节实习项目

4. 实习有哪些成长？

5. 我看你学的是物联网，还获得了不少奖项和知识产权，为什么选择做前端呢？

6. 你会因为哪些因素选择一家公司？

7. 后续考虑在深圳发展吗？

8. 算法设计

   1000 支疫苗，有一支变质了，可以通过试纸检测，反应时间需要一小时，如何在一小时用尽可能少的试纸找到变质的疫苗。一张试纸可以滴多支疫苗，一支疫苗也可以滴在多张试纸。

   1. 将疫苗变成 m _ n 矩阵，m _ n = 1000， m + n 尽量小，需 m + n 张（mn 对应行列）
   2. 将疫苗进行二进制编号，使用 10 张试纸，对应位为 1 则滴，不为 1 则不滴，通过变红的试纸反推编号。

9. 反问环节

滴滴

7.31 提前批一面 70min 通过

1. 聊负载均衡器 实现、算法（个人项目）
2. Node 进程间通信实现，其他进程间通信方式
3. 实习项目介绍，业务理解，亮点
4. Express 和 Koa 的区别，中间件的实现方式 compose
5. 实现一个 compose
6. compose 函数看代码写输出 带 try catch 和抛错
7. 讲讲对 webpack 的理解
8. vue2 和 vue3 的区别
9. vue 组件传值$attr
10. Vue 的插槽有哪几种类型，分别有什么区别
11. 手撕最长公共子串 LeetCode 1143 middle
12. 手撕深拷贝
13. 判断数据类型的方法
14. 手撕发布订阅模式
15. 反问环节

7.31 提前批二面 70min 通过

1. 尽可能多的写出 div 中 img 垂直水平居中的方法。要求至少有一种方法是使用 flex 布局。其中 div 宽高 300px，img 宽高 100px

<div>
  <img />
</div>

2. 画一条 0.5px 的线
3. 宏任务、微任务、EventLoop
4. 看代码写输出

setTimeout(() => {
  console.log(100)
})
console.log(200)
Promise.resolve().then(() => {
  console.log(300)
})

4. 尽可能多的写出数组去重的方法
5. 写一个每隔一秒输出 0、1、2、3、4、5 的方法
6. var const let 块级作用域
7. 写出 console 的结果

var f = (function() {
  var c = "c";
  return {
    a: function() {
      return c;
    },
    b: function(d) {
      c = d;
    }
  }
})()
console.warn(f.a())
console.warn(f.c)
console.warn(f.b("d"))
console.warn(f.a())

7. 闭包
8. 任选一种排序方法进行实现
9. 浏览器 url 从输入到显示出页面的流程（带缓存）
10. 强缓存、协商缓存
11. link 标签引入 css 会阻塞 dom 渲染嘛
12. async 和 defer 的区别
13. node EventLoop 和浏览器有什么区别
14. 进程间通信 domain socket 具体实现流程
15. 箭头函数和普通函数有什么区别
16. 小程序的运行机制（双线程、JSB 相关）
17. redis 怎么实现分布式锁
18. 你认为自己的定位是怎么样的 有什么优缺点
19. 你认为别人眼中的你是怎么样的
20. 反问环节

7.31 提前批三面 70min 通过

1. 自我介绍爱好、特长、特点、亮点、个人定位
2. 大学中的成长历程、怎么接触技术、学习和发展历程
3. 实习项目和做的事情
4. 未来个人职业规划
5. 聊负载均衡器项目（个人项目）
6. 为什么会去做技术分享、目的、怎么选题（字节部门技术分享）
7. 再让你做技术分享你会选什么题目
8. 大学里最有成就感的事情，为什么？
9. 简历上六个项目挨个聊
10. 物联网工程专业和计算机的关系和区别
11. 除了前端还有没有学过别的方向的技术
12. 最擅长的专业课是什么
13. 你怎么给一个非专业的人介绍计算机网络
14. 计算机网络为什么要分层
15. 你的数据结构和算法怎么样 有没有刷题
16. dp 了解吗 讲一讲
17. 写道题吧 对象的 key 全部驼峰转下划线 要求递归 可限制深度 dfs 和 bfs 分别怎么实现
18. 反问环节

美团

8.16 一面 70min 通过

1. 看代码写输出

var name = "windowsName";
var a = {
  name:"Cherry",
  
  func1:function(){
    console.log(this.name);
  }
  
  func2:function(){
    setTimeout(function(){
      this.func1();
    }, 100)
  }
}
a.func2();

2. 说说对闭包的理解，有哪些应用场景
3. 实现一个方法

f(a) -> [a]
f(b) -> [a, b]
f(c) -> [a, b, c]

4. 看代码写输出

const list = [1, 2, 3];
const square = num => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(num * num);
    }, 3000)
  })
}
​
function test(){
  list.forEach(async x=>{
    const res = await square(x);
    console.log(res);
  })
}
​
test();

5. new 的过程中发生了什么
6. 说一下 Promise 的应用
7. async await 是什么的语法糖
8. Promise 有哪些状态，可逆吗？
9. 讲讲 Vue 的双向绑定原理
10. 数组的双向绑定相关，Vue2 直接更新数组某项会进行视图更新吗？
11. 了解跨域吗？讲一讲有哪几种方式
12. TCP 三次握手四次挥手，为什么三次和四次，如何保障可靠性
13. 手写快排
14. 跨端方式交流
15. 反问环节

8.24 二面 45min 通过

1. 可以提前过来实习吗？

2. 字节留用情况？

3. 更看重公司的哪些因素？

4. 有考虑考研吗？

5. 聊字节实习项目

6. 介绍一下你的 HTTP 缓存文章写了哪些内容

7. ETag 是什么？常见的算法有哪些？

8. 负载均衡器项目是怎么实现的？

9. 一致性哈希算法原理是？

10. 最有成就感的项目是哪一个？

11. 介绍一下虚拟 DOM，有什么优缺点？

12. 虚拟 DOM 的底层 patch、diff 有了解过吗？

13. Vue 的 diff 算法，Vue2 和 Vue3 分别是怎么样的？有什么区别？

14. Vue 的双向绑定原理是怎么实现的？

15. 算法

    1. 计算一个数组最长连续自然数个数，要求值连续，位置没有要求

    输入 {100,4,200,1,3,2}
    输出 4
    示例2 输入 {200,201,202,100,4,200,1,3,2,204,203}
    输出 5

    2. 看代码说输出，会报错吗

    let A = () => {
      this.a = 100;
      return {a: 200}
    }
    A.a = 300
    A.__proto__.a = 500
    A.prototype = { a: 600 }
    a = new A()
    console.log(a.a)

16. 箭头函数和普通函数有什么区别？

17. prototype 和**proto** 有什么区别？

18. 能说一下 HTTPS 握手、加解密流程吗？

19. 让你最有收获的专业课是什么？

20. 你觉得自己有什么优点和缺点？

21. 除了前端还学习过什么别的技术吗？

22. 你的知识产权（发明专利、实用新型专利、软件著作权）是怎么产生的？

23. 反问环节

9.1 HR 面 20min 通过

1. 你的专利和软件著作权是通过什么机会去产出的？第几作者呢？
2. 看你项目经验很丰富
3. 你在字节的工作感受如何？压力大吗？
4. 字节是否会给你留用 offer？
5. 你还有投递其他那些公司？
6. 你会因为什么选择一家公司？
7. 你觉得你做的最有成就感的项目是哪个？
8. 你觉得你做的最难的项目是哪一个？难点在哪里？
9. 你的职业规划是怎么样的？
10. 你有哪些优点和优势？
11. 反问环节

拼多多

7.25 提前批笔试 90min（30min 完成） 通过

0. 递归实现和非递归实现哪个更快
1. TCP 和 UDP 的区别是
2. 实操 HTML CSS
3. 实现一个异步加载 js 函数返回一个 promise，成功 resolve，失败/5s 超时 reject
4. 手写 Promise.resolve 和 Promise.reject

8.3 提前批一面 55min 通过

0. 手撕括号匹配

1. 实现一个 promiseTimeout 方法，接收两个参数，第一个参数为 promise，第二个参数为 number 类型；该方法的作用为

   0. 若 promise 在第二个参数给定的时间内处于 pending 状态，则返回一个 rejected 的 promise，其 reason 为 new Error（‘promise timeout’）
   1. 若 promise 在第二个参数给定的时间内处于非 pending 状态，则返回该 promise

2. 浏览器任务循环，看代码写输出

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
​
async function async2() {
  console.log("async2");
}
​
setTimeout(() => {
  console.log("setTimeout");
}, 0);
​
async1();
​
new Promise((resolve) => {
  console.log("promise1");
  resolve();
})
  .then(() => {
    console.log("promise2");
    return new Promise((resolve) => {
      resolve();
    });
  })
  .then((result) => {
    console.log("promise3");
  });
​
console.log("script end");

4. 看代码写输出

// a.js
console.log('a finish');
// b.js
console.log('b finish');
​
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="./a.js" defer="defer"></script>
    <script type="text/javascript" src="./b.js"></script>
    <script>
      console.log("event begin");
      document.addEventListener("DOMContentLoaded", () => {
        console.log("DOMContentLoaded finish");
      });
      window.addEventListener("load", () => {
        console.log("load finish");
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <div id="main" class="bg">
      <script>
        let i = 0;
        while (i < 1000000) {
          i++;
        }
        console.log("compute finished");
      </script>
    </div>
  </body>
</html>
​

5. Vue 双向绑定实现原理
6. Vue.$nextTick 实现原理，是宏任务还是微任务
7. Vue scoped 实现原理
8. 跨域的实现方式
9. 简单请求复杂请求 Option 预请求
10. 从 url 到页面渲染间发生了什么
11. 重绘、回流，优化方式
12. HTTP 缓存 强缓存、协商缓存
13. 手写 Reac Hookst 计数器（自增），闭包陷阱
14. 无限滚动场景，虚拟列表设计
15. 单点登录
16. 前端安全 CSRF

8.7 提前批二面 50min 通过

0. 你觉得 Vue 是个怎么样的框架
1. Vue DSL 是个什么样的模式
2. 什么是 MVVM？
3. MVVM 三层分别做了什么事情
4. Vue 中组件是什么概念？什么场景你会去封装一个组件
5. Vue 组件数据通信有什么方式？分别有什么区别
6. Vuex 异步和同步操作分别用什么，区别在哪里？
7. 算法题：给出一个数组中有多个对象，对象的属性有用户的 id 和操作的时间，给出了时间的起止，输出一个数组，数组中的对象为操作次数和相同操作次数的用户数，按操作次数从大到小排列
8. for in 和 for of 的区别
9. const、let 和 var 的区别
10. 什么是块级作用域
11. 垃圾回收做了什么事情
12. 如何让函数作用域外的访问函数内的变量
13. 什么是闭包，手写个闭包
14. this 在 JS 中是什么
15. 箭头函数和普通函数有什么区别
16. 怎么改变函数的 this 指向
17. 说一下 flex 布局，有哪些常见属性，分别用来干吗
18. 简单写个 flex 布局
19. CSS 有哪些单位 有什么区别
20. rem 有什么使用场景
21. 浏览器拿到 document 后浏览器的渲染流程
22. 什么情况会阻塞渲染，怎么优化
23. async 和 defer 有什么区别
24. 怎么手动测量渲染时间

8.16 提前批三面 70min 通过

0. 算法

/*
请将第二排天上数组，使得第二排每一位数字是对应的第一排数字的次数
0 1 2 3 4 5 6 7 8 9
- - - - - - - - - -
​
例如
0 1 2 3
1 2 1 0
*/

2. 实现一个 HardMan

HardMan("jack")输出
i am jack
HardMan("jack").learn("computer")输出：
i am jack
Learning computer
HardMan("jack").rest(10).learn("computer")输出
i am jack 等待10s
Start learning after 10 seconds
Learning computer
HardMan("jack").restFirst(5).learn("computer")输出
等待5s
Start learning after 5 seconds
i am jack
Learning chinese

3. 介绍项目，难点、亮点、问题、怎么解决
4. HTTP 强缓存、协商缓存
5. localstorge 和 HTTP 缓存有啥区别，你会怎么选择缓存方案
6. 缓存位置在哪儿？策略？
7. 反问环节

8.23 HR 面 20min 通过

0. 自我介绍
1. 职业规划
2. 后续在哪个城市发展
3. 爸妈同意吗？有没有女朋友
4. 会因为什么因素选择一家公司
5. 有什么感兴趣的业务方向
6. 期望薪资是什么水平？
7. 为什么选择做前端开发？
8. 可以过来实习嘛？
9. 工作强度是否了解过？是否能接受？

掘金：前端 LeBron

知乎：前端 LeBron

持续分享技术博文，关注微信公众号 👇🏻