2 年前端面试心路历程

字节跳动

1 面 

对tree-shaking 的了解

虽然生产模式下默认开启，但是由于经过babel 编译全部模块被封装成 IIFE

IIFE 存在副作用无法被 tree-shaking 掉

需要配置{ module: false }和 sideEffects: false

rollup 和 webpack 的 shaking 程度不同，以一个 Class 为例子

Common.js 和 es6 module 区别

commonJs 是被加载的时候运行，esModule 是编译的时候运行

commonJs 输出的是值的浅拷贝，esModule 输出值的引用

webpack 中的 webpack_require 对他们处理方式不同

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 如何设计一时想不出来。想了很久说没思路面试就结束了。