page contents

面经||【字节跳动】前端岗-2 年前端前面试心路历程

1 面 对tree-shaking 的了解 虽然生产模式下默认开启,但是由于经过babel 编译全部模块被封装成 IIFE IIFE 存在副作用无法被 tree-shaking 掉 需要配置{ module: false }和 sideEffects:...

attachments-2022-01-9IvBItDr61d64d02d7949.png

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,搞完上面问题,开始做题:

两数之和:5 分钟内就做完

洗牌算法:5分钟内写完

做完上面2 道题后:

面试官:emm….面试时间还没结束再做一道题目吧!

数组中的第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 跨域时候要如何处理

然后就开始做题:

爬楼梯

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

以上就是本次分享内容,更多大厂面试经验持续关注六星社区

想要高效学习,指路微信公众号——【python编程学习圈】每日分享学习干货,关注即可免费领取整套Python零基础到入门资料及学习教程,走过路过,千万不要错过!!快行动起来!!

attachments-2022-05-ZwUUz0Co628f2e3079c7b.jpeg

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
小柒
小柒

1470 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1470 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章