轉(zhuǎn)眼又到一年畢業(yè)季，論文答辯完成后，有不少同學(xué)想必已經(jīng)開啟了找工作模式。受疫情影響，今年的你可能就業(yè)壓力有點大。數(shù)據(jù)顯示，2020年應(yīng)屆畢業(yè)生將創(chuàng)新高，達到874萬！面對如此眾多的競爭對手，你準備好了嗎？
成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)蜀山,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
俗話說，知己知彼，方能百戰(zhàn)百勝。只有做足面試前的功課，才能讓你更勝一籌！今天要為大家分享的是《字節(jié)跳動2020前端面試題（社招）》。其中包含：1、2、3面以及終面，該同學(xué)目前已拿到offer。下面會給到大家一些參考思路。
字節(jié)跳動一面
在字節(jié)跳動的一面，主要是和面試官互相交流技術(shù)。
1、項目難點【描述】
2、如何設(shè)計權(quán)限系統(tǒng)，如何維護和定義、表的數(shù)據(jù)結(jié)構(gòu)是怎樣的【舉例】【描述】
我們的項目是rbac1類型的權(quán)限系統(tǒng)。展示是樹形結(jié)構(gòu)，但權(quán)限是扁平化的，只需要勾選權(quán)限，可以達到靈活修改權(quán)限
3、中間人劫持，怎么防止。x-frame-option?白屏的喔，怎么辦？也不一定嵌入iframe啊，可以嵌入腳本、圖片，怎么阻止【描述】
x-frame-option、重定向、https，請求前加密（https、加密代理）、請求中規(guī)避（請求拆包）、請求后彌補（前端做一些邏輯）。嵌入非iframe的，如果已經(jīng)突破了前面兩關(guān)，走前端邏輯：觸發(fā)DOMNodeInserted、DOMContentLoaded、DOMAttrModified事件?；蛘呤墙o能src的標簽加上自己的data-xx屬性標記區(qū)分。
4、class組件和function組件對比。寫過安卓嗎，那對class組件有什么看法【描述】
各自特點對比羅列一下。我也不知道有什么很好的，問題都放在這里，說明對方傾向于class組件的，所以一定不能說太多class組件不好，吹捧hook
5、hook缺點，hook代碼難維護怎么解決【描述】
這種開放性和經(jīng)驗積累的題目真的是最難的，平時大家知道標準答案的題目和這種對比起來，沒得比的。這個需要團隊的積累，我們這邊暫時沒什么很大問題，所以感受不到。最基本的，eslint一定要開啟，不然會莫名其妙的dep導(dǎo)致更新。其次是根據(jù)情況來說一下，function的場景。經(jīng)驗之談，這里可以講一篇文章。
6、redux為什么每次reducer要返回一個新對象，面對大量節(jié)點如何優(yōu)化【描述】
新的props導(dǎo)致更新。大量節(jié)點使用immutable
7、immuatable和shouldupdate配合、immuatable數(shù)據(jù)一些對比問題【描述】
這是黃金搭配的方案了，用過的人應(yīng)該能理解到。幾個看代碼判斷 === 是否是true的問答題，原則：只要一個節(jié)點變了，那么從他開始回溯的父節(jié)點全都是變的
8、http緩存、離線包原理、移動端首屏幕加載速度優(yōu)化、webview冷啟動、預(yù)熱【描述】
很基礎(chǔ)的了，送分題
9、一個很牛逼很多功能的class組件，里面有業(yè)務(wù)生命周期（獲取數(shù)據(jù)前后、彈出窗口前后...），怎么在函數(shù)組件里面直接復(fù)用它【舉例】
先注入到函數(shù)組件的props，再到useeffect關(guān)鍵節(jié)點里面執(zhí)行業(yè)務(wù)生命周期
給定一個整數(shù)數(shù)組 a，其中1 ≤ a[i] ≤ n （n為數(shù)組長度）, 其中有些元素出現(xiàn)兩次而其他元素出現(xiàn)一次?！揪幊獭?/p>
10、找到所有出現(xiàn)兩次的元素。你可以不用到任何額外空間并在O(n)時間復(fù)雜度內(nèi)解決這個問題嗎？(限時5分鐘)
輸入:
[4,3,2,7,8,2,3,1]
輸出:
[2,3]
這種題，其實看見不用空間、o(n)時間，通常潛臺詞就是，用原地哈希來做。做過這題的肯定是秒殺，沒做過的慌得一逼，我當(dāng)時就是沒做過的。遍歷的時候把數(shù)字放到index下（比如數(shù)字4放在數(shù)組的第4個位置），如果發(fā)現(xiàn)后面的數(shù)的n,arr[n]已經(jīng)滿足了arr[n] === n那就結(jié)果算一個。lc標準答案：和我交換位置不一樣，lc的是讓那個數(shù)變成負數(shù)，如果后面發(fā)現(xiàn)arr[n]是負數(shù)那就算一個，比我的交換index簡單很多。
字節(jié)跳動二面
通過一面之后，接下來是二面。面試過程中收獲還算很大的，了解到了一些很強的技術(shù)和全球化相關(guān)的技術(shù)。途中暴露了一些計算機基礎(chǔ)不行的缺點了，面試官也給了我一些提示才答出來。因為我非科班出身，所以計算機基礎(chǔ)方面就明顯不行了，他也建議我回去補一下。
1、cdn原理【描述】
答案很容易搜到
2、為什么多域名部署【描述】
http1和瀏覽器的問題，同一時間6個連接
3、單元測試、e2e測試【描述】
概念性，容易搜到
4、event loop【描述】
送分題
5、項目介紹一下【描述】
6、客戶端mock怎么支持【描述】【舉例】
客戶端 => 協(xié)議轉(zhuǎn)換服務(wù) => 中轉(zhuǎn)服務(wù) => mock服務(wù)（接入mockjs）
7、怎么mock真數(shù)據(jù)，我需要真的id怎么辦，除了寫死【描述】
反向抓包，無需自己填充數(shù)據(jù)?；蛘呷溌繁O(jiān)控里面撈出一個id
8、什么情況用ts、什么時候不用【描述】
公共組件、庫一定要，不重要的業(yè)務(wù)代碼、節(jié)奏快的業(yè)務(wù)代碼不用
9、單元測試和ts結(jié)合【描述】【舉例】
有ts的話，輸入?yún)?shù)很容易可以知道有沒有問題
10、全球遠程調(diào)度機器實現(xiàn)自動化測試【描述】
請求 => 分發(fā) => 海外機器 => 調(diào)起當(dāng)?shù)貦C器 => 自動化腳本(如puppeteer) => 跑ui流程 => 上報結(jié)果 => 系統(tǒng)展示
11、cjs實現(xiàn)esm【偽代碼】
參考webpack把esmodule的import轉(zhuǎn)成wepack_require的樣子
字節(jié)跳動三面
3面的感覺就是對方氣場挺強的，問問題也很老練。
1、項目介紹。權(quán)限系統(tǒng)業(yè)界內(nèi)怎么設(shè)計，常見的幾種【描述】
rbac0～3、前端簡單判斷、后端按需返回
2、工作量體現(xiàn)到什么地方，現(xiàn)在工作量大嗎【描述】
重構(gòu)、樹結(jié)構(gòu)組件、各平臺數(shù)據(jù)適配、技術(shù)輪子的推廣
3、最困難的環(huán)節(jié)【舉例】
一個能光速開發(fā)內(nèi)部系統(tǒng)的公共組件設(shè)計、推廣自己做的平臺給公司其他團隊用
4、優(yōu)點缺點、未來規(guī)劃
5、怕被人挑戰(zhàn)嗎，怎么應(yīng)對
四面加面
1、經(jīng)過前面對了解，你知道我們這邊做什么了嗎，描述一下【描述】
2、我們的技術(shù)棧差不多，如果你來上班，如何快速過渡和上手適應(yīng)【描述】
內(nèi)部系統(tǒng) => todev系統(tǒng)，針對人群不一樣，技術(shù)棧類似，容易解決。
3、對b和c端業(yè)務(wù)對理解【描述】
簡單來說，b端ui要求低、架構(gòu)復(fù)雜；c端ui要求高、架構(gòu)簡單。詳細的點，引申出去還有很多很多。
4、tob業(yè)務(wù)架構(gòu)設(shè)計、技術(shù)選型【舉例】
先出結(jié)構(gòu)圖、流程圖，再給出表結(jié)構(gòu)設(shè)計，確定了方案，組件、模塊劃分。技術(shù)選型一般就是三大框架+配套的標準ui了，如vue與ele-ui，react與antd，加上狀態(tài)管理、路由等。如果復(fù)雜的混雜多項目多系統(tǒng)，使用微前端，spa或者iframe兩種取其一，如果沒有歷史包袱可選spa、如果有歷史包袱使用iframe嵌入，但需要和其他前端進行對協(xié)議（前端和前端聯(lián)調(diào)????）這里可以講20分鐘
5、項目開發(fā)流程、生命周期【舉例】
6、自動化測試設(shè)計思路【描述】
用例、斷言、輸出結(jié)果
最后建議如果說希望去字節(jié)跳動的，建議放最后，他們流程過快。其他公司都很慢，你等不了其他公司的offer來argue了。其次，面多幾家你底氣和經(jīng)驗會更充足，狀態(tài)更好，那個時候再過來和字節(jié)剛一波。
想要高薪掌握一門技術(shù)，這是最便捷的一條通道！千鋒12大學(xué)科緊跟IT發(fā)展脈搏，名師大咖指點迷津讓你少走彎路，更有企業(yè)內(nèi)推大廠名額，關(guān)注千鋒教育知乎賬號即可領(lǐng)取千鋒教育所有的視頻學(xué)習(xí)教程，包括HTML5大前端、JavaEE+分布式開發(fā)、Python全棧+人工智能、全鏈路UI/UE設(shè)計、云計算、全棧軟件測試、大數(shù)據(jù)+人工智能、智能物聯(lián)網(wǎng)+嵌入式、Unity游戲開發(fā)、網(wǎng)絡(luò)安全、互聯(lián)網(wǎng)營銷、Go語言開發(fā)等學(xué)科學(xué)習(xí)資料和免費試聽網(wǎng)課選擇。
重慶分公司
重慶分公司
