笔记&收藏&学习

Appearance

本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com

点击上方 三分钟学前端，关注公众号

回复交流，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

写在最前 ​

我是晨霜，于 20 年毕业于一所双非本科，在经历了一个月左右的面试流程之后，如愿以偿的拿到了字节的 offer，本篇主要记录此次面试经历，希望能够对你有所帮助。

准备面试 ​

机会是留给有准备的人的。

笔者之前在阿里巴巴本地生活做外包，由于外包工作性质的特殊性，遂在三月底就已经开始准备面试了，主要准备的是算法和 React。

准备算法 ​

先来讲讲算法吧，当时笔者是一个算法小白，连时间复杂度都不会算的那种，下面先来讲讲笔者是如何学习算法的。

个人认为算法的难度确实偏大，如果一上来就看诸如《算法导论》的书籍或者相关文章， 肯定会一头雾水，甚至可能会适得其反，那么此时就需要一个非常好的入门课程来学习。这里推荐 ssh 大神都推荐的波波老师的视频教程 玩转算法面试 [1]，真的非常赞，波波老师会从最基础的讲起，还会用动画的形式来帮助你理解算法。笔者大概花了一个月的时间学完了该课程，跟着视频刷了 100 多道 leetcode，学完之后，思维真的提升了很多。

顺便放一个 github 地址 JavaScript 算法与数据结构 [2]，这个比较全面，但不适合入门。

可能会有人认为不进大厂就不需要学习算法，我个人认为学习算法是一定有用的，只要你是一个稍微有点追求的程序员，就一定会去学习算法。综合来看笔者过去一个月的面试，虽然算法在面试中占的比例不高，但却非常关键，例如笔者在面阿里的时候首先就是做算法题，做过了才有后续面试。

准备 React ​

首先是 hooks，都 2021 年了，hooks 已经成为人手必备的技能了吧，这里推荐 Dan 的 useEffect 完整指南 [3]，看完这个，hooks 相关的问题都能迎刃而解。

React 这里推荐卡老师的 React 技术揭秘 [4]，你想知道的 React 知识都在里面，例如 React 为什么要费力做 Concurrent Mode，Fiber 是什么 (非常高频的一个考点)，React 更新流程又是什么，hooks 的原理等等。u1s1，卡老师没有出小册而是选择免费开放给大家，瑞思拜。

一些其他 ​

在准备完算法 + React 之后，还需要准备一些其他的，这里就直接放链接了，不过更多的还是在于平时的积累。

  • webpack 的面试题总结 [5]

  • 神三元同学的面经 [6]

  • 死磕 36 个 JS 手写题 [7]

  • 精读《Dom diff 原理详解》[8]

  • TianTianUp 同学的面经 [9]

面试过程 ​

字节的面试用的是牛客网，形式是视频面试 + 在线写代码，第一次面试还是比较紧张的。

一面 ​

一面面试官是一个很年轻的同学，因此问的问题也会比较年轻一些。

  • React17 更新了哪些内容？

  • React 的 fiber 是什么？解决了哪些问题？

  • setTimeout 为什么最小只能设置 4ms，怎么实现一个 0ms 的 setTimeout?

  • 看你简历上有写到 rem 和 vw，能讲讲吗？为什么你选择使用 rem 而不是 vw？

  • 当时回答是 rem 兼容性更好，且 px 转 rem 后可以避免过长小数。

  • 浏览器对于小数单位是怎么计算的？

  • 当时没答上来，只说了句四舍五入，后续查阅相关资料得知不同浏览器策略不同，有的会四舍五入，有的会直接取整。不管什么单位，浏览器最后都会 Computed 为 px 后再进行渲染。

  • interface 和 type 的区别是什么？你日常工作中是用 interface 还是 type？

  • ts 的逆变和协变有没有了解过？

  • 没有

  • 能不能讲讲小程序的原理？

  • 网上很多相关文章，把双线程讲出来就行。

  • 看你之前有做过 Taro，能不能讲讲 React 是怎么跑在小程序里面的？

  • 大概把 Taro3 的原理讲了一遍，主要是 jsx->vdom->json->wxml，具体可以看这里 Taro 预渲染 [10] 和 Remax 实现原理 [11] ，之前写过 demo，所以对这块还是比较了解。

  • 你刚才讲到 json->wxml 这一步可以有两种方式 (template 递归和自定义组件递归)，能不能讲讲两种方式的优劣？

  • 简单讲了一下，template 递归是纯视图层的操作，性能肯定更好，但是由于微信小程序 wxml 编译器的限制，template 不能递归调用自己 (支付宝小程序无此限制)，所以 Taro 在微信环境中把同一个 template 写了 n 份，只有 id 不同，就是为了递归渲染。

  • 而自定义组件递归还要涉及到逻辑层，例如生命周期等，性能会差一些，同时还有 Shadow DOM 引起的样式问题，目前 kbone 使用的是自定义组件递归。

  • 小程序有没有 HMR，能不能讲讲 HMR 的原理？

  • 小程序没有 HMR，当时只讲出来了保存代码小程序是怎么刷新的，HMR 没有讲出来。

  • 讲讲 z-index

  • 讲讲 position

  • 实现一个 ts Include

  • 不会

  • 实现一个 useInterval

  • 写的不是太对

  • js event loop 执行顺序

  • 实现一个 immutable

    function immutable(obj) {  return {    set(path, val) {      const paths = path.split('.')      const lastK = paths.pop()      this.get(paths.join('.'))[lastK] = val      return this    },    get(path) {      const paths = path.split('.')      return paths.reduce((a, k) => a[k], obj)    }  }}

  • 这里给一个大佬的实现，我实现的太菜

一面到这里就结束了，可以感受出来，字节对于前沿技术和底层还是很看重的。当时手写题部分确实写的不太好，甚至以为自己凉凉了，结果还是给过了。

二面 ​

一面结束后第二天就收到了 hr 打来的约二面的电话，当时心里还是很开心的，二面是交叉面试，面试官年纪稍微大一点。因为是在晚上，所以很多问题记不太清楚了。

不同于一面面试官，和二面面试官聊了一段时间的项目相关的问题，根据自己情况有啥说啥就行。

  • options 请求是什么？有什么作用？

  • cdn 的原理是什么，是在网络哪一层起的作用？

  • 项目性能是如何做优化的？

  • 我主要从网络，缓存，js，css，接口合并等几个方面讲的，该题比较宽泛，可自行发挥。

  • 动态创建 script 标签并插入到页面上，说执行时机

  • 给你一个 “A2B3” 这样的字符串，输出“AABBB”

  • 接上题 “C4(A(A3B)2)2”，带嵌套的，这两题都不是原题，但是类似

  • 写一个 curry，要求 add(1)(2)(3)(4) 打印 10

  • 一开始我洗的 add(1)(2)(3)(4)()，面试官问我能不能把最后的 () 去掉，最后寻求提示，他说 console.log 是怎么打印函数的，豁然开朗，复写 toString 即可。

二面肯定不止问了上面这些问题，但是我能记住的只有这些了。。。

我最后问了二面面试官业务相关问题，他说你去找三面面试官问，当时我就知道过了，哈哈。

三面 (凉凉) ​

没错，第一次三面凉凉了，甚至都已经收到面试失败的邮件，后面会聊，先看问题。

  • loader 和 plugin 的区别是什么？

  • webpack 打包优化，我还提到了 vite，顺便讲了下 vite

  • 小程序原理，以及 Taro 原理

  • xss 和 csrf

  • http2

  • Tree Shaking 原理

  • 最长回文子串

  • 大数相加

这次面试非常快，因为确实很多都没答上来，面完之后我就知道，结束了😭。

三面 ​

大概几天后吧，hr 打电话跟我说换个 leader 重新面试，理由是我一二面表现还不错，后来才知道，真正的原因是我现在的 leader 执意把我捞起来的。

  • 聊了很多工程化相关的问题，主要是项目从开发到上线这一整套流程，聊完之后他也指出了我说的这一套流程有什么不完善的地方。

  • React fiber

  • http2

  • Tree Shaking 原理

  • 项目优化和网络优化

  • 股票最大收益

  • 大数相加

其实在这场面试之前，面试官特意让我等了 10 分钟，应该是在看我之前没写出来的问题，所以在问的时候特意问的和第一次三面比较重叠。

总结 ​

进来之后 leader 和我说之所以把我捞起来是因为觉得我有潜力，他也指出其实我面试表现并不是太好，还是有很多可以继续改进的地方，他说优秀的人是会自驱的，你第一次没答上来，如果你是一个优秀的人，你第二次一定能答上来，非常感谢我现在的 leader。

如果你跟笔者一样，工作经验少，学历不够好，担心投大厂被拒，相等几年再投，那我建议你大可不必，随着你工作经验的增加，大厂对你的要求也会增加，你能确定这几年你的成长速度能跟上大厂对你的要求吗？种一棵树最好的时间是十年前，其次是现在。

写在最后 ​

笔者目前就职于字节跳动 - 抖音电商部门，目前团队在北京和上海都还有非常多的 hc，有兴趣的可以投递简历到 suchangv@bytedance.com 或者加我微信 suchangvv 找我内推。祝大家都能找到心仪的工作。

参考资料 ​

[1]

玩转算法面试:https://coding.imooc.com/class/82.html

[2]

JavaScript 算法与数据结构:https://github.com/trekhleb/javascript-algorithms

[3]

useEffect 完整指南:https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/

[4]

React 技术揭秘:https://react.iamkasong.com/

[5]

webpack 的面试题总结:https://juejin.cn/post/6844903877771264013

[6]

神三元同学的面经:https://juejin.cn/post/6844904106537009159

[7]

死磕 36 个 JS 手写题:https://juejin.cn/post/6946022649768181774

[8]

精读《Dom diff 原理详解》:https://juejin.cn/post/6947856296771223589

[9]

TianTianUp 同学的面经:https://juejin.cn/post/6945625394154307592

[10]

Taro 预渲染:https://taro-docs.jd.com/taro/docs/prerender/

[11]

Remax 实现原理:https://remaxjs.org/guide/implementation-notes

作者：晨霜

来源：https://juejin.cn/post/6985884324037918733

最后 ​

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

号内回复：

「网络」，自动获取三分钟学前端网络篇小书（90 + 页）

「JS」，自动获取三分钟学前端 JS 篇小书（120 + 页）

「算法」，自动获取 github 2.9k+ 的前端算法小书

「面试」，自动获取 github 23.2k+ 的前端面试小书

「简历」，自动获取程序员系列的 120 套模版

》》面试官也在看的前端面试资料《《

“在看和转发” 就是最大的