首页 > 字节跳动前端工程师社招面经

字节跳动前端工程师社招面经

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

更多模拟面试

全部评论

(1) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

近期精华帖

热门推荐