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語言開發等學科學習資料和免費試聽網課選擇。