2020最新：字節跳動前端面試題分享（已拿offer）（含解題思路）

轉眼又到一年畢業季，論文答辯完成后，有不少同學想必已經開啟了找工作模式。受疫情影響，今年的你可能就業壓力有點大。數據顯示，2020年應屆畢業生將創新高，達到874萬！面對如此眾多的競爭對手，你準備好了嗎？

俗話說，知己知彼，方能百戰百勝。只有做足面試前的功課，才能讓你更勝一籌！今天要為大家分享的是《字節跳動2020前端面試題（社招）》。其中包含：1、2、3面以及終面，該同學目前已拿到offer。下面會給到大家一些參考思路。

字節跳動一面

在字節跳動的一面，主要是和面試官互相交流技術。

1、項目難點【描述】

2、如何設計權限系統，如何維護和定義、表的數據結構是怎樣的【舉例】【描述】

我們的項目是rbac1類型的權限系統。展示是樹形結構，但權限是扁平化的，只需要勾選權限，可以達到靈活修改權限

3、中間人劫持，怎么防止。x-frame-option?白屏的喔，怎么辦？也不一定嵌入iframe啊，可以嵌入腳本、圖片，怎么阻止【描述】

x-frame-option、重定向、https，請求前加密（https、加密代理）、請求中規避（請求拆包）、請求后彌補（前端做一些邏輯）。嵌入非iframe的，如果已經突破了前面兩關，走前端邏輯：觸發DOMNodeInserted、DOMContentLoaded、DOMAttrModified事件。或者是給能src的標簽加上自己的data-xx屬性標記區分。

4、class組件和function組件對比。寫過安卓嗎，那對class組件有什么看法【描述】

各自特點對比羅列一下。我也不知道有什么很好的，問題都放在這里，說明對方傾向于class組件的，所以一定不能說太多class組件不好，吹捧hook

5、hook缺點，hook代碼難維護怎么解決【描述】

這種開放性和經驗積累的題目真的是最難的，平時大家知道標準答案的題目和這種對比起來，沒得比的。這個需要團隊的積累，我們這邊暫時沒什么很大問題，所以感受不到。最基本的，eslint一定要開啟，不然會莫名其妙的dep導致更新。其次是根據情況來說一下，function的場景。經驗之談，這里可以講一篇文章。

6、redux為什么每次reducer要返回一個新對象，面對大量節點如何優化【描述】

新的props導致更新。大量節點使用immutable

7、immuatable和shouldupdate配合、immuatable數據一些對比問題【描述】

這是黃金搭配的方案了，用過的人應該能理解到。幾個看代碼判斷 === 是否是true的問答題，原則：只要一個節點變了，那么從他開始回溯的父節點全都是變的

8、http緩存、離線包原理、移動端首屏幕加載速度優化、webview冷啟動、預熱【描述】

很基礎的了，送分題

9、一個很牛逼很多功能的class組件，里面有業務生命周期（獲取數據前后、彈出窗口前后...），怎么在函數組件里面直接復用它【舉例】

先注入到函數組件的props，再到useeffect關鍵節點里面執行業務生命周期

給定一個整數數組 a，其中1 ≤ a[i] ≤ n （n為數組長度）, 其中有些元素出現兩次而其他元素出現一次。【編程】

10、找到所有出現兩次的元素。你可以不用到任何額外空間并在O(n)時間復雜度內解決這個問題嗎？(限時5分鐘)

輸入:

[4,3,2,7,8,2,3,1]

輸出:

[2,3]

這種題，其實看見不用空間、o(n)時間，通常潛臺詞就是，用原地哈希來做。做過這題的肯定是秒殺，沒做過的慌得一逼，我當時就是沒做過的。遍歷的時候把數字放到index下（比如數字4放在數組的第4個位置），如果發現后面的數的n,arr[n]已經滿足了arr[n] === n那就結果算一個。lc標準答案：和我交換位置不一樣，lc的是讓那個數變成負數，如果后面發現arr[n]是負數那就算一個，比我的交換index簡單很多。

字節跳動二面

通過一面之后，接下來是二面。面試過程中收獲還算很大的，了解到了一些很強的技術和全球化相關的技術。途中暴露了一些計算機基礎不行的缺點了，面試官也給了我一些提示才答出來。因為我非科班出身，所以計算機基礎方面就明顯不行了，他也建議我回去補一下。

1、cdn原理【描述】

答案很容易搜到

2、為什么多域名部署【描述】

http1和瀏覽器的問題，同一時間6個連接

3、單元測試、e2e測試【描述】

概念性，容易搜到

4、event loop【描述】

送分題

5、項目介紹一下【描述】

6、客戶端mock怎么支持【描述】【舉例】

客戶端 => 協議轉換服務 => 中轉服務 => mock服務（接入mockjs）

7、怎么mock真數據，我需要真的id怎么辦，除了寫死【描述】

反向抓包，無需自己填充數據。或者全鏈路監控里面撈出一個id

8、什么情況用ts、什么時候不用【描述】

公共組件、庫一定要，不重要的業務代碼、節奏快的業務代碼不用

9、單元測試和ts結合【描述】【舉例】

有ts的話，輸入參數很容易可以知道有沒有問題

10、全球遠程調度機器實現自動化測試【描述】

請求 => 分發 => 海外機器 => 調起當地機器 => 自動化腳本(如puppeteer) => 跑ui流程 => 上報結果 => 系統展示

11、cjs實現esm【偽代碼】

參考webpack把esmodule的import轉成wepack_require的樣子

字節跳動三面

3面的感覺就是對方氣場挺強的，問問題也很老練。

1、項目介紹。權限系統業界內怎么設計，常見的幾種【描述】

rbac0～3、前端簡單判斷、后端按需返回

2、工作量體現到什么地方，現在工作量大嗎【描述】

重構、樹結構組件、各平臺數據適配、技術輪子的推廣

3、最困難的環節【舉例】

一個能光速開發內部系統的公共組件設計、推廣自己做的平臺給公司其他團隊用

4、優點缺點、未來規劃

5、怕被人挑戰嗎，怎么應對

四面加面

1、經過前面對了解，你知道我們這邊做什么了嗎，描述一下【描述】

2、我們的技術棧差不多，如果你來上班，如何快速過渡和上手適應【描述】

內部系統 => todev系統，針對人群不一樣，技術棧類似，容易解決。

3、對b和c端業務對理解【描述】

簡單來說，b端ui要求低、架構復雜；c端ui要求高、架構簡單。詳細的點，引申出去還有很多很多。

4、tob業務架構設計、技術選型【舉例】

先出結構圖、流程圖，再給出表結構設計，確定了方案，組件、模塊劃分。技術選型一般就是三大框架+配套的標準ui了，如vue與ele-ui，react與antd，加上狀態管理、路由等。如果復雜的混雜多項目多系統，使用微前端，spa或者iframe兩種取其一，如果沒有歷史包袱可選spa、如果有歷史包袱使用iframe嵌入，但需要和其他前端進行對協議（前端和前端聯調????）這里可以講20分鐘

5、項目開發流程、生命周期【舉例】

6、自動化測試設計思路【描述】

用例、斷言、輸出結果

最后建議如果說希望去字節跳動的，建議放最后，他們流程過快。其他公司都很慢，你等不了其他公司的offer來argue了。其次，面多幾家你底氣和經驗會更充足，狀態更好，那個時候再過來和字節剛一波。

想要高薪掌握一門技術，這是最便捷的一條通道！千鋒12大學科緊跟IT發展脈搏，名師大咖指點迷津讓你少走彎路，更有企業內推大廠名額，關注千鋒教育知乎賬號即可領取千鋒教育所有的視頻學習教程，包括HTML5大前端、JavaEE+分布式開發、Python全棧+人工智能、全鏈路UI/UE設計、云計算、全棧軟件測試、大數據+人工智能、智能物聯網+嵌入式、Unity游戲開發、網絡安全、互聯網營銷、Go語言開發等學科學習資料和免費試聽網課選擇。