一年外包经验入职字节啦

落日映苍穹つ 2022-09-03 01:24 223阅读 0赞

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

## 写在最前 ##

我是晨霜，于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

**如果觉得这篇文章还不错**

**点击下面卡片关注我**

**来个【分享、点赞、在看】三连支持一下吧![3bd5993424532b70747cbf24dae3e45d.png][]**

![051528fc2b29b9e17434aca62a4d25c3.png][]

**“分享、点赞、在看” 支持一波** ![ba7c5e6b7d98be097a28a09e977fbace.png][]

[3bd5993424532b70747cbf24dae3e45d.png]: /images/20220829/71eccee9c875495e94ce5dcc4380dacd.png
[051528fc2b29b9e17434aca62a4d25c3.png]: /images/20220829/ef97ba5b8d8e4a9281ff4546b8439a04.png
[ba7c5e6b7d98be097a28a09e977fbace.png]: /images/20220829/8f295d9d124c425398571629af7d4809.png