一年外包經驗前端怎麼入職字節

寫在最前

我是晨霜，於20年畢業於一所雙非本科，在經歷了一個月左右的面試流程以後，如願以償的拿到了字節的offer，本篇主要記錄這次面試經歷，但願可以對你有所幫助。javascript

準備面試

機會是留給有準備的人的。css

筆者以前在阿里巴巴本地生活作外包，因爲外包工做性質的特殊性，遂在三月底就已經開始準備面試了，主要準備的是算法和React。html

準備算法

先來說講算法吧，當時筆者是一個算法小白，連時間複雜度都不會算的那種，下面先來說講筆者是如何學習算法的。java

我的認爲算法的難度確實偏大，若是一上來就看諸如《算法導論》的書籍或者相關文章，確定會一頭霧水，甚至可能會拔苗助長，那麼此時就須要一個很是好的入門課程來學習。這裏推薦ssh大神都推薦的波波老師的視頻教程玩轉算法面試，真的很是贊，波波老師會從最基礎的講起，還會用動畫的形式來幫助你理解算法。筆者大概花了一個月的時間學完了該課程，跟着視頻刷了100多道leetcode，學完以後，思惟真的提高了不少。react

順便放一個github地址 JavaScript算法與數據結構，這個比較全面，但不適合入門。webpack

可能會有人認爲不進大廠就不須要學習算法，我我的認爲學習算法是必定有用的，只要你是一個稍微有點追求的程序員，就必定會去學習算法。綜合來看筆者過去一個月的面試，雖然算法在面試中佔的比例不高，但卻很是關鍵，例如筆者在面阿里的時候首先就是作算法題，作過了纔有後續面試。git

準備React

首先是hooks，都2021年了，hooks已經成爲人手必備的技能了吧，這裏推薦Dan的 useEffect完整指南，看完這個，hooks相關的問題都能迎刃而解。程序員

React這裏推薦卡老師的 React技術揭祕，你想知道的React知識都在裏面，例如React爲何要費力作Concurrent Mode，Fiber是什麼(很是高頻的一個考點)，React更新流程又是什麼，hooks的原理等等。u1s1，卡老師沒有出小冊而是選擇免費開放給你們，瑞思拜。github

一些其餘

在準備完算法+React以後，還須要準備一些其餘的，這裏就直接放連接了，不過更多的仍是在於平時的積累。web

面試過程

字節的面試用的是牛客網，形式是視頻面試+在線寫代碼，第一次面試仍是比較緊張的。

一面

一面面試官是一個很年輕的同窗，所以問的問題也會比較年輕一些。

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預渲染和 Remax實現原理，以前寫過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找我內推。祝你們都能找到心儀的工做。