一年外包經(jīng)驗(yàn)入職字節(jié)

寫(xiě)在最前

我是晨霜，于20年畢業(yè)于一所雙非本科，在經(jīng)歷了一個(gè)月左右的面試流程之后，如愿以?xún)數(shù)哪玫搅俗止?jié)的offer，本篇主要記錄此次面試經(jīng)歷，希望能夠?qū)δ阌兴鶐椭?/p>

準(zhǔn)備面試

機(jī)會(huì)是留給有準(zhǔn)備的人的。

筆者之前在阿里巴巴本地生活做外包，由于外包工作性質(zhì)的特殊性，遂在三月底就已經(jīng)開(kāi)始準(zhǔn)備面試了，主要準(zhǔn)備的是算法和React。

準(zhǔn)備算法

先來(lái)講講算法吧，當(dāng)時(shí)筆者是一個(gè)算法小白，連時(shí)間復(fù)雜度都不會(huì)算的那種，下面先來(lái)講講筆者是如何學(xué)習(xí)算法的。

個(gè)人認(rèn)為算法的難度確實(shí)偏大，如果一上來(lái)就看諸如《算法導(dǎo)論》的書(shū)籍或者相關(guān)文章， 肯定會(huì)一頭霧水，甚至可能會(huì)適得其反，那么此時(shí)就需要一個(gè)非常好的入門(mén)課程來(lái)學(xué)習(xí)。這里推薦ssh大神都推薦的波波老師的視頻教程 玩轉(zhuǎn)算法面試^[1]，真的非常贊，波波老師會(huì)從最基礎(chǔ)的講起，還會(huì)用動(dòng)畫(huà)的形式來(lái)幫助你理解算法。筆者大概花了一個(gè)月的時(shí)間學(xué)完了該課程，跟著視頻刷了100多道leetcode，學(xué)完之后，思維真的提升了很多。

順便放一個(gè)github地址 JavaScript算法與數(shù)據(jù)結(jié)構(gòu)^[2]，這個(gè)比較全面，但不適合入門(mén)。

可能會(huì)有人認(rèn)為不進(jìn)大廠(chǎng)就不需要學(xué)習(xí)算法，我個(gè)人認(rèn)為學(xué)習(xí)算法是一定有用的，只要你是一個(gè)稍微有點(diǎn)追求的程序員，就一定會(huì)去學(xué)習(xí)算法。綜合來(lái)看筆者過(guò)去一個(gè)月的面試，雖然算法在面試中占的比例不高，但卻非常關(guān)鍵，例如筆者在面阿里的時(shí)候首先就是做算法題，做過(guò)了才有后續(xù)面試。

準(zhǔn)備React

首先是hooks，都2021年了，hooks已經(jīng)成為人手必備的技能了吧，這里推薦Dan的 useEffect完整指南^[3]，看完這個(gè)，hooks相關(guān)的問(wèn)題都能迎刃而解。

React這里推薦卡老師的 React技術(shù)揭秘^[4]，你想知道的React知識(shí)都在里面，例如React為什么要費(fèi)力做Concurrent Mode，F(xiàn)iber是什么(非常高頻的一個(gè)考點(diǎn))，React更新流程又是什么，hooks的原理等等。u1s1，卡老師沒(méi)有出小冊(cè)而是選擇免費(fèi)開(kāi)放給大家，瑞思拜。

一些其他

在準(zhǔn)備完算法+React之后，還需要準(zhǔn)備一些其他的，這里就直接放鏈接了，不過(guò)更多的還是在于平時(shí)的積累。

• webpack的面試題總結(jié)^[5]
• 神三元同學(xué)的面經(jīng)^[6]
• 死磕36個(gè)JS手寫(xiě)題^[7]
• 精讀《Dom diff 原理詳解》^[8]
• TianTianUp同學(xué)的面經(jīng)^[9]

面試過(guò)程

字節(jié)的面試用的是牛客網(wǎng)，形式是視頻面試+在線(xiàn)寫(xiě)代碼，第一次面試還是比較緊張的。

一面

一面面試官是一個(gè)很年輕的同學(xué)，因此問(wèn)的問(wèn)題也會(huì)比較年輕一些。

• React17更新了哪些內(nèi)容？
• React的fiber是什么？解決了哪些問(wèn)題？
• setTimeout為什么最小只能設(shè)置4ms，怎么實(shí)現(xiàn)一個(gè)0ms的setTimeout?
• 看你簡(jiǎn)歷上有寫(xiě)到rem和vw，能講講嗎？為什么你選擇使用rem而不是vw？
• 當(dāng)時(shí)回答是rem兼容性更好，且px轉(zhuǎn)rem后可以避免過(guò)長(zhǎng)小數(shù)。
• 瀏覽器對(duì)于小數(shù)單位是怎么計(jì)算的？
• 當(dāng)時(shí)沒(méi)答上來(lái)，只說(shuō)了句四舍五入，后續(xù)查閱相關(guān)資料得知不同瀏覽器策略不同，有的會(huì)四舍五入，有的會(huì)直接取整。不管什么單位，瀏覽器最后都會(huì)Computed為px后再進(jìn)行渲染。
• interface和type的區(qū)別是什么？你日常工作中是用interface還是type？
• ts的逆變和協(xié)變有沒(méi)有了解過(guò)？
• 沒(méi)有
• 能不能講講小程序的原理？
• 網(wǎng)上很多相關(guān)文章，把雙線(xiàn)程講出來(lái)就行。
• 看你之前有做過(guò)Taro，能不能講講React是怎么跑在小程序里面的？
• 大概把Taro3的原理講了一遍，主要是jsx->vdom->json->wxml，具體可以看這里 Taro預(yù)渲染^[10] 和 Remax實(shí)現(xiàn)原理^[11] ，之前寫(xiě)過(guò)demo，所以對(duì)這塊還是比較了解。
• 你剛才講到j(luò)son->wxml這一步可以有兩種方式(template遞歸和自定義組件遞歸)，能不能講講兩種方式的優(yōu)劣？
• 簡(jiǎn)單講了一下，template遞歸是純視圖層的操作，性能肯定更好，但是由于微信小程序wxml編譯器的限制，template不能遞歸調(diào)用自己(支付寶小程序無(wú)此限制)，所以Taro在微信環(huán)境中把同一個(gè)template寫(xiě)了n份，只有id不同，就是為了遞歸渲染。
• 而自定義組件遞歸還要涉及到邏輯層，例如生命周期等，性能會(huì)差一些，同時(shí)還有Shadow DOM引起的樣式問(wèn)題，目前kbone使用的是自定義組件遞歸。
• 小程序有沒(méi)有HMR，能不能講講HMR的原理？
• 小程序沒(méi)有HMR，當(dāng)時(shí)只講出來(lái)了保存代碼小程序是怎么刷新的，HMR沒(méi)有講出來(lái)。
• 講講z-index
• 講講position
• 實(shí)現(xiàn)一個(gè)ts Include
• 不會(huì)
• 實(shí)現(xiàn)一個(gè)useInterval
• 寫(xiě)的不是太對(duì)
• js event loop執(zhí)行順序
• 實(shí)現(xiàn)一個(gè)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)
      }
    }
  }
  

• 這里給一個(gè)大佬的實(shí)現(xiàn)，我實(shí)現(xiàn)的太菜

一面到這里就結(jié)束了，可以感受出來(lái)，字節(jié)對(duì)于前沿技術(shù)和底層還是很看重的。當(dāng)時(shí)手寫(xiě)題部分確實(shí)寫(xiě)的不太好，甚至以為自己涼涼了，結(jié)果還是給過(guò)了。

二面

一面結(jié)束后第二天就收到了hr打來(lái)的約二面的電話(huà)，當(dāng)時(shí)心里還是很開(kāi)心的，二面是交叉面試，面試官年紀(jì)稍微大一點(diǎn)。因?yàn)槭窃谕砩希院芏鄦?wèn)題記不太清楚了。

不同于一面面試官，和二面面試官聊了一段時(shí)間的項(xiàng)目相關(guān)的問(wèn)題，根據(jù)自己情況有啥說(shuō)啥就行。

• options請(qǐng)求是什么？有什么作用？
• cdn的原理是什么，是在網(wǎng)絡(luò)哪一層起的作用？
• 項(xiàng)目性能是如何做優(yōu)化的？
• 我主要從網(wǎng)絡(luò)，緩存，js，css，接口合并等幾個(gè)方面講的，該題比較寬泛，可自行發(fā)揮。
• 動(dòng)態(tài)創(chuàng)建script標(biāo)簽并插入到頁(yè)面上，說(shuō)執(zhí)行時(shí)機(jī)
• 給你一個(gè)“A2B3”這樣的字符串，輸出“AABBB”
• 接上題“C4(A(A3B)2)2”，帶嵌套的，這兩題都不是原題，但是類(lèi)似
• 寫(xiě)一個(gè)curry，要求 add(1)(2)(3)(4) 打印10
• 一開(kāi)始我洗的add(1)(2)(3)(4)()，面試官問(wèn)我能不能把最后的()去掉，最后尋求提示，他說(shuō)console.log是怎么打印函數(shù)的，豁然開(kāi)朗，復(fù)寫(xiě)toString即可。

二面肯定不止問(wèn)了上面這些問(wèn)題，但是我能記住的只有這些了。。。

我最后問(wèn)了二面面試官業(yè)務(wù)相關(guān)問(wèn)題，他說(shuō)你去找三面面試官問(wèn)，當(dāng)時(shí)我就知道過(guò)了，哈哈。

三面(涼涼)

沒(méi)錯(cuò)，第一次三面涼涼了，甚至都已經(jīng)收到面試失敗的郵件，后面會(huì)聊，先看問(wèn)題。

• loader和plugin的區(qū)別是什么？
• webpack打包優(yōu)化，我還提到了vite，順便講了下vite
• 小程序原理，以及Taro原理
• xss和csrf
• http2
• Tree Shaking原理
• 最長(zhǎng)回文子串
• 大數(shù)相加

這次面試非常快，因?yàn)榇_實(shí)很多都沒(méi)答上來(lái)，面完之后我就知道，結(jié)束了??。

三面

大概幾天后吧，hr打電話(huà)跟我說(shuō)換個(gè)leader重新面試，理由是我一二面表現(xiàn)還不錯(cuò)，后來(lái)才知道，真正的原因是我現(xiàn)在的leader執(zhí)意把我撈起來(lái)的。

• 聊了很多工程化相關(guān)的問(wèn)題，主要是項(xiàng)目從開(kāi)發(fā)到上線(xiàn)這一整套流程，聊完之后他也指出了我說(shuō)的這一套流程有什么不完善的地方。
• React fiber
• http2
• Tree Shaking原理
• 項(xiàng)目?jī)?yōu)化和網(wǎng)絡(luò)優(yōu)化
• 股票最大收益
• 大數(shù)相加

其實(shí)在這場(chǎng)面試之前，面試官特意讓我等了10分鐘，應(yīng)該是在看我之前沒(méi)寫(xiě)出來(lái)的問(wèn)題，所以在問(wèn)的時(shí)候特意問(wèn)的和第一次三面比較重疊。

總結(jié)

進(jìn)來(lái)之后leader和我說(shuō)之所以把我撈起來(lái)是因?yàn)橛X(jué)得我有潛力，他也指出其實(shí)我面試表現(xiàn)并不是太好，還是有很多可以繼續(xù)改進(jìn)的地方，他說(shuō)優(yōu)秀的人是會(huì)自驅(qū)的，你第一次沒(méi)答上來(lái)，如果你是一個(gè)優(yōu)秀的人，你第二次一定能答上來(lái)，非常感謝我現(xiàn)在的leader。

如果你跟筆者一樣，工作經(jīng)驗(yàn)少，學(xué)歷不夠好，擔(dān)心投大廠(chǎng)被拒，相等幾年再投，那我建議你大可不必，隨著你工作經(jīng)驗(yàn)的增加，大廠(chǎng)對(duì)你的要求也會(huì)增加，你能確定這幾年你的成長(zhǎng)速度能跟上大廠(chǎng)對(duì)你的要求嗎？種一棵樹(shù)最好的時(shí)間是十年前，其次是現(xiàn)在。

寫(xiě)在最后

筆者目前就職于字節(jié)跳動(dòng)-抖音電商部門(mén)，目前團(tuán)隊(duì)在北京和上海都還有非常多的hc，有興趣的可以投遞簡(jiǎn)歷到[email protected]或者加我微信suchangvv找我內(nèi)推。祝大家都能找到心儀的工作。

參考資料