2 年前端面试心路历程（字节跳动、YY、虎牙、BIGO）(3)

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

• webpack 的按需加载实现

• 你写的脚手架其中有一个模板是针对销售快速迭代的情节，能介绍一下吗

• • 介绍项目背景：页面多，迭代快，管理混乱，并且 webpack 配置不一样

• 使用只需要在 page 里面新建文件，然后放入 main 和一些配置文件，输入命令：npm run page=[文件夹名称] env=[环境] method=[dev|build]

• 介绍一下 node 如何实现，和 webpack 配置合并策略

• 图片编辑器做的性能优化

• • 图片变化通过矩阵变化，移除 html2Canva

• 抽离 Matrix.js 里面的三元一次方程求解公式来取代传统的克拉默法则

• 自定义栈，通过可逆矩阵，亮度，饱和度，色差的逆公式，做出返回效果，而不是每次结果用 base64 保存，消除内存消耗

• webwork 的尝试和数据测试，证明在计算量不大情况下反而更慢

• window.performance.mark 埋点，和 1px 的 gif 上传关键步骤时间优化

• 能介绍一下缓存策略吗

• • 强缓存 cache-control、express

• 协商缓存 304、ETag、modify

• 301、302、307、308的区别

OK，搞完上面问题，开始做题：

• 1. 两数之和：5 分钟内就做完

技术征文图

• 洗牌算法：5分钟内写完

做完上面 2 道题后：

面试官：emm…面试时间还没结束再做一道题目吧！

• 215. 数组中的第K个最大元素

技术征文图

• 花了点个大顶堆，然后很快就求出来

• 面试官：emm。。。。还有点时间，你还有想到别的办法吗

• 又写了个快排解法，写完之后面试官说顺便写个归并排序，我就改了一下写出来

好了，面试结束，然而这才是噩梦的开始。由于算法题做的太快，不知面试官写了我啥评价，后面的面试基本变成做各种题。

2 面

• 图片编辑器做的性能优化（以上）

• redux-saga 和 mobx 的比较

• • saga 还是遵循 mvc 模型，mobx 是接近 mvvm 模型

• 介绍项目为何要使用 mobx 更合适

• 由于是直播相关的 electron 项目，存在音视频流，和一些底层 OS 操作，那么我们是否可以以麦克风视图开关对于音频流的处理为例子，把 OS 的一些操作与数据做一个映射层，就像数据和视图存在映射关系一样，那么数据的流动就是 view -> 触发action -> 数据改变 -> 改变视图 -> 进行 os 操作

• 然后说了一下 mobx 大概实现的原理，如数据劫持，发布订阅。

• https 有了解吗

• • 简单讲了一下非对称加密的握手过程

• 证书签名过程和如何防止被串改

• 跨域有了解过吗

• • webpack-dev-server 原理和如何处理跨域

• nginx 转发

• CROS 中的简单请求和非简单请求

• 非简单请求下发起的 options

• localstorage、sessionStorage 和 cookie 的区别

• cookie 跨域时候要如何处理

然后就开始做题：

• 70. 爬楼梯

技术征文图

（又是 5 分钟写完）

• 面试官：那我们改编一下题目，改成 746. 使用最小花费爬楼梯。

技术征文图

• 我：修改一下之前的答案，很快做出来。

• 面试官：还有点时间，我们再做一题稍微难一点的 72. 编辑距离

技术征文图

我：这题居然说稍微难点？？？还好之前做过，那方法真的不是一般人想得出来。然后又做出来了。

面试结束了，感觉都是在做题。

3 面

• 自我介绍

• 介绍项目

• electron 的主进程，渲染进程之间区别和他们通信手段

• • ipcMain、ipcRenderer

• localStorage

• webView 和 Iframe 区别

• • webView 应用和嵌入内容之间的交互全部都是异步的

• 应用和嵌入内容之间的交互全部都是异步的

• 你这个 PC 应用做了哪些优化

• • 录屏优化

• 大型文件上传优化

• 用 mobx 重写之前的 redux-saga，引入 os 层概念

• electron-update 失效紧急处理办法

• 大型文件上传

• • 文件切片

• 用 web-work 单独线程计算文件的 hash 值

• 上传由于和其他接口同一域名，所以要做并发数处理

• 进度条

• 对于已经传过的文件进行跳过秒传，对于失败做失败重传处理

• 然后有说了一下感觉还能改进的地方

• 要发挥 electron 能使用 node 的优势，文件切片，hash 计算和上传都可以用 node 实现，并且开不同的进程处理。由于上传是用 node 模块，不会有浏览器同一域名下 6 个连接的限制。为何没做，因为在写别的更加紧急的东西。。。。

• 录屏优化

• • 需要对整个屏幕进行录制

• 对比了 FFmpeg 和 mediaSource 的性能差异，如 CPU 和内存消耗

• 又对比一下 mediaSource 的各种编码性能差异 vp8、daala、h264、opus 和 mpeg

• 一开始是把视频流写在一个变量里面，这样会造成很大的性能问题

• 解决办法是每个 10s 把流用 node 的 file 写在硬盘里面，然后结束录制时候，把每个 10s 的小视频片段用 FFmpeg 合成一个大的文件

开始做题，做了一题比较偏冷的题目，看概念我都要理解几分钟的。

技术征文图

虽然做出来，但是不是用数组实现，而是用链表，面试官问我如何再优化，我就是说改成跳表，空间换时间，但是其实正确答案是二分查找……

4 面

四面就比较轻松，问了一下项目就开始做题。

先从简单开始 112. 路径总和

技术征文图

做完后在此基础上，改变成

• 路径不需要从根节点开始，也不需要在叶子节点结束

虽然题目不难，我也做了减枝的处理，但是面试官说还能优化，如何减少重复计算。这就难倒我了，我知道需要用一个 map 来保存中间的结果，但是这个 map 的 key 如何设计一时想不出来。想了很久说没思路面试就结束了。

虎牙

1 面

• http 的 get 和 post 区别

• 缓存策略

• https 的握手过程

• http2 的特点

• • 二进制传输

• Header 压缩，顺便吹了一下哈夫曼编码

• 多路复用

• 服务器推送

• weak-Set、weak-Map 和 Set、Map 区别

• mvvm 模型和 mvc 模型区别

• 如何实现一个 mvvm 模型

• • 数据劫持 + 发布订阅

• 为何你用 mobx 重构了 saga，说说两者之间的区别

• • 简单说了一下 mobx 的实现原理

• 说说 vnode 的了解

• • vnode 是作为数据和视图的一种映射关系

• vue 和 react 的 diff 算法有相同和有不同，相同是都是用同层比较，不同是 vue使用双指针比较，react 是用 key 集合级比较

• 讲讲 webpack 的性能优化

• • 体积：讲了一下 tree-shaking 了解

• 打包速度：cache-loader、dll、多线程

• 有写过 plugin

• • 没有，但是了解他的原理，讲了一下大概有哪些 compiler 钩子

• 了解 webpack-dev-server 的 HMR 实现原理吗

• 手写一下防抖和节流

2 面

• 你做过直播，能介绍一下 webRTC 或者现在使用直播方案吗

• • 虽然我是使用声网的 SDK，但是大概了解过一般直播的直播方案

• 讲了一下 NAT、STUN、RTP、SDP 的基本概论

• 然后两个信令服务器，一个是声网用来控制进房间媒体流的 socket，一个是业务逻辑的 socket

• 编码方面有了解过吗，能解释一下码率吗

• 对于 P 帧、I 帧、B 帧有了解过

• • I 帧：关键帧。可以单独解码成一幅完整的图像。

• P 帧：参考帧。解码时依赖于前面已解码的数据

• B 帧：前后参考帧 B 帧后面的 P 帧要优先于它进行解码，然后才能将 B 帧解码

• RGB 和 YUV 区别

• 有了解过哪些直播协议

• • httpflv 传输方式：http 流，格式：flv，连续流

• rtmp 传输方式：tcp 流，格式：flv，连续流

• hls 传输方式：http，格式：TS 文件，移动端兼容但 PC 不兼容

• dash 这个不太常见只知道传送方式是 http

• flv 和 mp4 区别有了解过吗

• • 他们都是属于容器，区别在于文件头信息

• flv 是属于流式文件是可以边传边解的，不需要通过索引分包，但是 mp4 是需要依赖索引表

• MediaSource 规范有了解过

• • 没怎么了解，但是还是扯了一下不同码率视频切换是怎么做的

然后还问了一下别的东西，但是我不是很懂就不知清楚了，感觉这一轮面试好奇怪。前端基本没面，反而音视频处理问了很多。

3 面

• webSocket 和 ajax 的区别

• xss、csrf 有了解过吗，如何防范

• 有了解过 React 的 fiber

• • fiber 诞生的背景，为何 react 有时间切片而 vue 不需要

• 能简单介绍一下 react 执行过程吗

• • performUnitOfWork

• beginWork

• completeUnitOfWork

1. jsx 经过 babel 转变成 render 函数

2. create update

3. enqueueUpdate

4. scheduleWork 更新 expiration time

5. requestWork

6. workLoop大循环

7. Effect List

8. commit

• 能介绍一下 hook 吗

• • 比起 hoc，hook 的复用性高

• useState、useEffect、useRef 用法

• 优化 usecallback、useMemo

• 情景题，做一个直播弹幕

• • 字幕的速度，大小

• requestAnimationFarme 和 setTimeout 区别

• 弹幕节流问题

• socket 和轮询优缺点，弹幕池的设计

• 如何避免弹幕碰撞（这个我答得不好，后来搜索一下有一个飞机场算法）

4 面

这一面就是聊人生，扯得比较远。讲了一下产品一般盈利套路，如何拉新、留存、激活、转换和收益。以前在网易 CC 电竞做的事情。对中国电竞前景的看法。

Bigo

1 面

由于是年前面的，所以在会议室面

• 自我介绍

• 介绍项目

• 你项目用到线形代数，我来考考你记不记得可逆矩阵的逆矩阵求法。

• • 当场白板可逆矩阵的逆矩阵求法

• 求一下三个三元一次方程

• • 当场白板用克拉默法则求出方程 x,y,z 的解

• 然后写一下 matrix.js 里面的优化方程（虽然我也不知道他是什么原理）

• 如何使用尽可能少的空间做矩阵的转置

• • 本质上就是867. 转置矩阵

技术征文图

然后有白板写了一下

• 能讲讲欧拉角和旋转矩阵吗，还有他们的相互转换

• • 我：？？？不过之前做项目有 AR 集成，调用接口时候用到，所以勉强讲了一点，但是转换公式我就不会写了

做到上面，我就十分懵逼，我是不是面错岗位了。

技术征文图

然后是情景题，当场设计系统。

情景以下：

• 这是一个多人在线协同网页

• 主要做的是视频标识系统，用来训练 AR 用的模型

• 并且同一时间，用一视频帧可以有多个人标识

emm。。。。那我大概知道为何之前问我这么多数学问题

这个项目的难点有以下

• 视频的时间帧的确定

• • 由于视频中会存在 I 帧、P 帧、B 帧作为干扰，所以一个视频 25 帧的话，但是实际上不是每一秒都是 25 帧的，每秒帧的数目是动态的

• 但是视频信息又对应地方 DTS 即解码时间戳，这个时间戳的意义在于告诉播放器该在什么时候解码这一帧的数据，和 PTS 即显示时间戳，这个时间戳用来告诉播放器该在什么时候显示这一帧的数据。我们只需要拿到 PTS 就可以了

• 绘画过程中 canvas 的优化

• • canvas 应该分两层，一层是没有选择的图形，一层是选中的图形，当图形选中时候会提升到编辑区域的 canvas

• 对于不规则图形，选择判断方法使用射线法思路，带入公式就可以知道图形是否被选择

• 多人协同问题，他们之间如何互相通知

• • 使用信令服务器，用 websocket 连接

• 如果两个人以上同时对一个标签做处理，这种冲突如何处理

• • 其实这个在我做在线白板时候会遇到的问题，这种问题可以类比成游戏中的状态同步和帧同步这两种解决办法，就和面试官扯了一下。

面完情景题，就做算法题，题目也是很奇怪的。

• 第一题：洗牌算法，这个可以

• 第二题：假设有偶数位的整数，将整数分开两边，然后对每边的每个数组的每一位求总和，当两边的总和相对就认为这组数符合要求，求2n位数的符合要求数占总数的多少。。。。。有点晕

• 例子：287962 可以分成 287 962，其中 2 + 8 + 7 = 9 + 6 + 2，那么他就是符合要求的。

2 面

可能一面比较难，二面就比较随便：

• 浏览器缓存策略

• 跨域处理

• https 握手

• http2 特性

• tcp 三次握手

• 从 url 到页面显示

• redux 和 mobx 的差异

• tree-shaking

• 项目的性能优化

• css 的 BEM 规范

• 当场设计一个 toast

• LRU 实现

• DNS 的路径选择用了啥算法

3 面

聊得比较广，没啥重点

YY

1 面

• mvvm 和 mvc 模型区别

• mvvm 的实现

• 了解 fiber 吗

• • 答案之前有

• 了解 hook 吗

• • 答案之前有

• 为何 react 点击事件放在 settimeout 会拿不到 event 对象

• • react 的事件合成

• setState 是异步还是同步

• • 本质上都是同步，只不过改变 state 的时机不同

• 由一个是是否批量更新变量来决定

• 放在 setTimeout 就能实时改变

• 有用过 node 吗，讲讲流

• koa2 和 express 区别

• • express 是大而全有路由等，koa2 小而精通过中间件

• koa2 能使用 async await，express 不能

• koa2 有洋葱模型和 ctx 上下文，express 没有

• 讲讲洋葱模型

• 实现一个函数 compose([fn1,fn2,fn3…]) 转成 fn3(fn2(fn1()))

• • 这个本质上就是中间件实现逻辑，之前看了 Koa2 一点源码，还好记得

• koa2 和 egg 的区别

• • egg 是在 koa2 上的封装

• egg 有 controller，service，router

• 约定了文件目录结构

• 鉴权有了解过了

• • Seesion/cookie

• Token

• OAuth

• SSO

• 还好项目都涉及过，虽然不是我用node写的，是后端写的，但是那时候好奇问了一下，并且查了一些资料，勉强答出来

2 面

• 浏览器缓存策略

• 跨域处理

• https 握手

• xss 和 csrf 攻击

• Typscript 有了解吗，能讲讲吗

• • 接口

• 枚举

• 泛型

• webpack 优化

• tree-shaking

• HMR 实现原理

• nginx 有了解吗

• • 扯了一下跨域如何配置/转发

• 缓存策略配置

• 地址重定向配置

• 场景题，做一个页面下雪

• • 写一个粒子 Class，里面有粒子、大小、图片，每秒移动的距离

• 一个粒子控制器 Class，包含粒子数量、分布情况，粒子的下落速度

• 用 requestanimationframe 绘画动画

• 用 css3 开启硬件 GPU 加速

3 面

三面也是聊得很广，基本木有前端。

学习过程

---

其实也没有太过特意去准备面试，其实都是靠平时积累的，在 2019 年开始我就制定了自己的学习计划了，并且每天都坚持学习。可参考 lien的每日学习

以下会分为：

1. 计算机基础

2. 前端专业知识

3. 学习心得

顺序有优先度之分，之所以把计算机基础放在第一位，是因为经过这些面试发现计算机基础考察还有比前端还要多，甚至有些公司面试都不怎么问我前端了。

计算机基础

tip：里面涉及很多都是极客时间的课程，然而我并没有打广告。推荐是因为我看完后真心觉得讲的好，当然好是指容易让初学者了解和上手，深度还是去看专门的权威书做普通吧。

数据结构和算法

学习办法不是一开始就刷题，要先学点入门。

1. 入门方式有很多种看书看视频，边看边敲。

2. 然后就可以上网看别人面经和一些 leetcode 大神总结的经典题目，按照分类开始刷了。

3. 每道题至少做 3 次，第一次时候遇到不会就不要想很久，8 分钟没有思路就看答案。因为大家一开始都是没啥思路，只有做多多总结才会慢慢有思路。做完后一周后再做第二次。准备跳槽时候再做第三次。

4. 算题顺序为算法面试通关 40 讲、剑指 offer、字节跳动专栏、自己总结的高频题。

我刷的题目也不多，就 100 来道，和别人比起就差远了。

技术征文图

但是我做的题目范围比较广，而且都是自己总结高频再去做，命中的几率比较大。

基本数据结构

• 数组

• 队列和栈

• 链表

• 二叉树

• hash

• 堆

常见的算法

• DFS

• BFS

• 滑动窗口（双指针）

• 回溯

• 动态规划

• 贪心（其实动态规划可以解决）

• 排序

• 二分查找

参考资料：

• JavaScript版 数据结构与算法，这个适合新人学习，入门基本。

• 极客时间- 数据结构与算法之美 在有基础上看这个会更好，里面github有js实现方式，自己动手敲一遍

• 极客时间- 算法面试通关 40 讲这门课真的是好，里面都是高频经典的题目。

• leetcode 字节跳动专栏

• leetcode 剑指 offer

blog:

• awesome-coding-js用 JavaScript 实现的算法和数据结构

• labuladong这个动态规范讲得真的好

• YaxeZhang/Just-Code针对面试训练算法题， 目前包括字节跳动面试题、 LeetCode 和剑指 offer

网络

网络是前端重要中的重要，也是面试高频的范围。很多人都是一开始就去看计算机网络、TCP/IP 协议、这些书入门，也不是说不好，但是对于新手入门门槛可能太高，还没看几页就放弃了。可以一开始看点视频跟着作者一起来抓包，慢慢熟悉。

观看顺序：

• 极客时间-透视 HTTP 协议HTTP 作为前端最经常接触而且相对独立，可以先学习这个，再学期其他层。

• 极客时间-趣谈网络协议作者生动用例子解释网络各层的作用和他们之间的关系，在此形成一个整体的架空，方便后面细节的学习

• 极客时间 - Web 协议详解与抓包实战。这门课从高层到底层，讲解每一层的细节，由于里面讲解很详细也有很多理论知识，如 RSA 算法、基于椭圆曲线的 ECDH 算法等等可以考虑跳过

最后补充的书籍

• 图解 http 协议

• 图解 tcp 协议

• TCP/IP 详解（第一卷）

tips：

对于前端来说，http，http2，https 的握手是高频题，要主要复习。

其他

本来想聊聊计算机组成原理、操作系统和编译原理，但是一个我学得不精，第二面试也没有怎么问，操作系统就问 linux 的一些简单指令和写一下 Jenkins 的脚本而已。或者后端对这方面会问得比较多。

前端专业知识

前端基础-JS

以下必须要十分熟悉：

• 类型，涉及以下：

• • 类型种类
    前端资料汇总

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
ng-js用 JavaScript 实现的算法和数据结构

• labuladong这个动态规范讲得真的好

• YaxeZhang/Just-Code针对面试训练算法题， 目前包括字节跳动面试题、 LeetCode 和剑指 offer

网络

网络是前端重要中的重要，也是面试高频的范围。很多人都是一开始就去看计算机网络、TCP/IP 协议、这些书入门，也不是说不好，但是对于新手入门门槛可能太高，还没看几页就放弃了。可以一开始看点视频跟着作者一起来抓包，慢慢熟悉。

观看顺序：

• 极客时间-透视 HTTP 协议HTTP 作为前端最经常接触而且相对独立，可以先学习这个，再学期其他层。

• 极客时间-趣谈网络协议作者生动用例子解释网络各层的作用和他们之间的关系，在此形成一个整体的架空，方便后面细节的学习

• 极客时间 - Web 协议详解与抓包实战。这门课从高层到底层，讲解每一层的细节，由于里面讲解很详细也有很多理论知识，如 RSA 算法、基于椭圆曲线的 ECDH 算法等等可以考虑跳过

最后补充的书籍

• 图解 http 协议

• 图解 tcp 协议

• TCP/IP 详解（第一卷）

tips：

对于前端来说，http，http2，https 的握手是高频题，要主要复习。

其他

本来想聊聊计算机组成原理、操作系统和编译原理，但是一个我学得不精，第二面试也没有怎么问，操作系统就问 linux 的一些简单指令和写一下 Jenkins 的脚本而已。或者后端对这方面会问得比较多。

前端专业知识

前端基础-JS

以下必须要十分熟悉：

• 类型，涉及以下：

• • 类型种类
    前端资料汇总

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-WsaUgcXd-1713018117123)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！