一年外包经验入职字节

写在最前

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