2021 阿里字節(jié)快手面經(jīng) & 個人成長經(jīng)驗分享
背景
本人背景渣渣，較晚入行，在一家公司穩(wěn)定了三年，從一個前端白紙到如今亂涂亂畫，已成雛形。2020 年年末，我離職了，因為深刻意識到自己有多 "菜"，想專心花點時間提升自己。經(jīng)過億點時間的調(diào)整，我重裝上陣。由于節(jié)前時間有限，只投了幾家，當然都是找人內(nèi)推的。
阿里四輪技術+一輪 hr
一面 (60min)
自我介紹主要圍繞幾個點：個人信息、最近的公司職責和涉及的業(yè)務、主要技術棧、我擅長的技術、項目介紹（STAR：項目背景、任務、你的工作內(nèi)容、項目亮點、結果你實現(xiàn)了什么學到了什么）、最近在做什么、結語。
簡歷里寫了兩個技術棧，所以講講 vue 和 react 的區(qū)別和聯(lián)系吧主要圍繞幾個點：兩者的模板渲染、兩者的虛擬 dom、diff 差異（vue2、vue3、react 16）、react fiber 能解決什么問題、vue2 的響應式原理和 vue3 的響應式原理；vue 關于 Proxy 與 Object.defineProperty 的區(qū)別；兩者的批量更新，還有路由差異、常用的優(yōu)化手段、怎么進行數(shù)據(jù)通信、講點新鮮的內(nèi)容：新發(fā)布的 vue3 有什么特性、最后總結，談談兩者的如今的生態(tài)……
項目的性能優(yōu)化主要圍繞幾個點：項目技術棧的性能優(yōu)化，比如使用 react 可以講避免重復渲染的一些手段，比如 electron 可以將如何更接近原生；針對瀏覽器做的優(yōu)化（你需要了解瀏覽器相關原理，比如緩存/存儲、代理、SSR 等，針對渲染引擎的工作內(nèi)容想到的優(yōu)化，比如解析 css 解析會影響 dom 渲染、合成優(yōu)化減少回流重繪、web worker、Event Loop 等）；打包工具提供的優(yōu)化，特指 webpack；針對具體的頁面做的優(yōu)化，比如首頁該做什么，首頁最新指標；最后講講應用場景、我的項目里用到了哪些方法，針對中等項目、大型項目的性能選擇。PS：性能優(yōu)化的內(nèi)容如果認真講，肯定兩/三個小時下不來，因為性能優(yōu)化沒有終點，我面試時也只想到了上面的這些……
了解我們的產(chǎn)品嗎？我提前 google 了團隊的業(yè)務項目，之前也看過一些類似產(chǎn)品的文章，我結合自己的項目經(jīng)驗，說了一點理解，就幾句話。
你想問什么？我問了本次的表現(xiàn)，了解了一些團隊項目的工作內(nèi)容、項目招人的背景、對于后續(xù)面試該做什么準備。一面沒碰到手寫題，都是很基礎的問題，整體相對輕松。
二面 (60min)
晚上 9 點半的面試，面試官應該剛忙完，上來直接問業(yè)務，全程業(yè)務……權限頁面的細節(jié)：
各個模塊、按鈕怎么設計權限； 分角色、分地域怎么設計？ 要加個表頭，還要控制展示的順序，在各個瀏覽器表現(xiàn)一致，怎么設計？說出所有方案，想到什么自由發(fā)揮了…… 聊到本地存儲，問：localStorage 在各瀏覽器、移動端瀏覽器的 size 一致嗎？
其他：
這一段是我簡歷的項目，略過…… 繼續(xù)聊阿里的產(chǎn)品，簡單使用后，請?zhí)岢鰩讉€可以優(yōu)化的地方？ 啥也沒透露，讓你預測下這款產(chǎn)品的接下來的方向，如果是你，你會著手哪個方向，并且憑啥讓你來干，說下你擅長的…… 正式討論產(chǎn)品，大家都在做什么，團隊協(xié)作的情況，公布接下來的迭代方向，針對的人群，目標…… 照例閑聊，拜拜。
插曲：中間出現(xiàn)兩次突然掛機，當時我的感覺就像過山車，從高空滑向低谷，整個心都是 ——某可愛漂亮的央視記者—— 的。
三面 (60min)
這一面是筆試，哈哈，我復習了很多手寫題，結果是完全與三面的考題完美岔開，沒有交集，emmm……，好在并不難……題一：
/**
?*?1.計算多個區(qū)間的交集
?*???區(qū)間用長度為2的數(shù)字數(shù)組表示，如[2, 5]表示區(qū)間2到5（包括2和5）；
?*???區(qū)間不限定方向，如[5, 2]等同于[2, 5]；
?*???實現(xiàn)`getIntersection?函數(shù)`
?*???可接收多個區(qū)間，并返回所有區(qū)間的交集（用區(qū)間表示），如空集用null表示
?*?示例：
?*???getIntersection([5,?2],?[4,?9],?[3,?6]);?//?[4,?5]
?*???getIntersection([1,?7],?[8,?9]);?//?null
?*/
題二：
/**
?*?2.DOM?的體積過大會影響頁面性能，假如你想在用戶關閉頁面時統(tǒng)計（計算并反饋給服務器）
?當前頁面中元素節(jié)點的數(shù)量總和、元素節(jié)點的最大嵌套深度以及最大子元素個數(shù)，請用?JS?配合
?原生?DOM?API?實現(xiàn)該需求（不用考慮陳舊瀏覽器以及在現(xiàn)代瀏覽器中的兼容性，可以使用任意
?瀏覽器的最新特性；不用考慮 shadow DOM）。比如在如下頁面中運行后：
?*/
<html>
??<head>head>
??<body>
????<div>
??????<span>fspan>
??????<span>ospan>
??????<span>ospan>
????div>
??body>
html>
//?會輸出：
{
??totalElementsCount:?7,
??maxDOMTreeDepth:?4,
??maxChildrenCount:?3
}
題三：
//?3.請使用原生代碼實現(xiàn)一個Events模塊，可以實現(xiàn)自定義事件的訂閱、觸發(fā)、移除功能
/*
const?fn1?=?(...?args)=>console.log('I?want?sleep1',?...?args)
const?fn2?=?(...?args)=>console.log('I?want?sleep2',?...?args)
const?event?=?new?Events();
event.on('sleep',?fn1,?1,?2,?3);
event.on('sleep',?fn2,?1,?2,?3);
event.fire('sleep',?4,?5,?6);
//?I?want?sleep1?1?2?3?4?5?6
//?I?want?sleep2?1?2?3?4?5?6
event.off('sleep',?fn1);
event.once('sleep',?()=>console.log('I?want?sleep));
event.fire('sleep');
*/
業(yè)務四面 (35 min)
周末，人在夢游，剛下航母，就激靈靈接到電話，人還是糊的……
跨端的原理？我講了幾個例子：taro、uni-app，順便提了 flutter、react native、小程序等的架構，具體怎么設計的。 動態(tài)表單能夠運用在什么場景？我舉了 7、8 個例子。 移動端適配相關的問題，應用場景。 我公司的業(yè)務討論，是否了解過競品等等，這里略過。
hr 五面 (60 min)
對于你項目的競品有了解嗎？說一下 你的項目與競品相比，好在哪里，有什么優(yōu)勢？ 下班后都在做什么，問的都是過往經(jīng)歷，問的太詳細了，讓人不舒服。 如果與同事發(fā)生了意見的不一致，你會如何解決呢 現(xiàn)在針對我們的業(yè)務，急需增加一個新的模塊位置，你會怎么設計？數(shù)據(jù)怎么展示……
沒錯，hr 還問技術相關的問題。
整體感受
總體面下來沒有讓人緊張的感覺，中規(guī)中矩，從剛開始較高的心理預期到后面慢慢回落……由于我的水平有限，最終沒有爭取到多高的薪水。
快手二面掛
一面（60min）
自我介紹 react 與 vue 的技術棧對比，說下區(qū)別 B 端遇到的最復雜的數(shù)據(jù)結構是什么 快速實現(xiàn) [1, 2, ...100]，所有你能想到的解 數(shù)據(jù)展示的優(yōu)化、數(shù)據(jù)截取和處理 實際場景中，哪些地方應用到了堆、鏈表、多叉樹結構 es6 及 es6+ 的能力集，你最常用的，這其中最有用的，都解決了什么問題。 GC 相關問題：es6+ ，eventloop 中涉及 GC 的部分。 數(shù)組 flat 展開的各種解法，數(shù)組 map 應用 講下 V8 sort 的大概思路 Promise 并發(fā)限制 手寫 Promise.all 省市區(qū)拼接查字段，要求 O(n) 內(nèi)解出 中臺的理解 討論了下業(yè)務 個人發(fā)展方向
一面的問題循序漸進，前面為后面鋪墊。
二面（60min）
項目的復盤優(yōu)化 說下業(yè)務上最復雜的點 node 限流算法 最有效的性能優(yōu)化方法 你提到性能指標，能說說都是怎么計算的嗎？比如 LCP，F(xiàn)ID 算法題：數(shù)組全排列[1] 中臺業(yè)務討論 離職原因
大早上面試，狀態(tài)不佳，全排列算是基礎了，腦子里有解題思路，但死活沒寫對，面完后狠狠又手寫了幾遍。
獵豹移動三輪技術面+一輪 hr 面
技術一面 (60min)
input type 都有哪些類型，還記得其他 attrs 呢 css 的偽類和偽元素有哪些？有什么區(qū)別？ 在一個未知寬度的父元素內(nèi)如何創(chuàng)建一個等邊正方形 異步加載 js 會阻塞什么 數(shù)組所有方法都有哪些？findIndex 的參數(shù)說明 vue 和 react 的異同 如何優(yōu)化 vue 框架，注意是優(yōu)化框架 vue 和 react 的 jsx 使用 id key 真的能使列表比對更高效嗎？舉個反例？ webpack 優(yōu)化的手段 tree-shaking 怎么配置，如何?避免?tree-shaking？ electron 和小程序遇到什么坑？ 說下微信自動化測試 es2015 到 es2020 的新特性，你最常用什么，給你收益最大的。 weakMap 和 Map 的區(qū)別，weakMap 原理，為什么能被 GC？ 如何干擾 GC ？ webpack import 動態(tài)加載原理 知道 webpack 中的 devTool 嗎？ 如何進行錯誤定位和數(shù)據(jù)上報，線上異常的處理 為什么有時候配置了 webpack caching，chunk 還是更新了？ 講講瀏覽器和 node 的 eventloop 微任務后面還有哪些？requestAnimationFrame 是怎么調(diào)用的？requestAnimationFrame 幀內(nèi)總是有任務嗎？分情況說下。 幀數(shù)怎么計算？ 了解網(wǎng)絡安全嗎？ 如何避免數(shù)據(jù)被 iframe 截獲 說下狀態(tài)碼 說下 304，什么情況會 304？協(xié)商緩存的頭部字段？ 你學習的渠道 工程化實踐的看法
第一個問題沒進入狀態(tài)，我心里想怎么問這么簡單的問題，我宕機了一會……后面就順利了，面試官全程冷淡，也不閑聊。無趣，后來問了下，是獵豹的前端架構師，嗯，大佬就該有大佬的氣場，面試體驗棒棒的~~
業(yè)務二面 (60min)
大致內(nèi)容：業(yè)務交流，工程化實踐交流、獵豹前端在做什么，資源有哪些，他們的業(yè)務是偏 C 端的，未來的方向、發(fā)展等等……這一面很輕松，想到什么說什么，當然邏輯性肯定要有的。
業(yè)務三面 (70min)
這一面的面試官是獵豹移動的技術負責人。
項目是如何收集問題的，用戶量如何？ 性能問題如何排查，你們項目的指標，具體數(shù)據(jù)、截圖發(fā)給我看看…… 模塊化是怎么實施的？ 目錄結構講下 一些功能是自研還是使用第三方工具，叫什么名字，怎么使用 ？ 瘋狂問測試相關的內(nèi)容，單元測試和組件測試是怎么做的、代碼覆蓋率多少，如何權衡測試原則，系統(tǒng)測試相關的內(nèi)容，一些細節(jié)上的問題怎么處理，等等，要說出個 1、2、3 來 ？ 項目亮點/難點，怎么解決 ？ 復盤，整個項目總結，讓你重新設計這套系統(tǒng)你會怎么做 ？ 工程化實踐和深入的一個點 團隊氛圍，有什么好的點可以說下，有什么不好的點也說下…… 中臺具體集成了什么功能 ？你都做了什么 ？ 你是如何進行技術突破的，又是如何學習的 ？ 對未來的規(guī)劃 有什么問題想問？我隨便問了幾個問題過渡，然后拋出最重要的一個，厚著臉皮讓大佬指出我的問題（PS：這是我面試的目的之一，當時幾個面試進度屬獵豹最快了。別人眼中的我，在前端方面具體是怎樣的感官 ？我一直很好奇。不是每個人都有一個對自己清晰的認識的，既然自己想不出來，那就通過面試吧）。
這次面試暴露的點：項目的總結、全局的把控、自我復盤都是有所欠缺的。另外不要給自己挖坑，有時候知道一些概念但不知道具體的實操和原理，還是別說了。當時，關于測試方面的問題，考官一直假裝不懂，老是問：真的嗎？這個我沒做過，你給我講講吧？我原本沒錯的內(nèi)容也被誤導了，emmmm……
hr 四面（30min）
常規(guī)問題，沒有阿里那么嚴格。
講講前任公司 離職原因 加班的看法 獵豹的福利 有沒有其他 offer balabala……
字節(jié)跳動三面掛
技術一面（60min）
剛開始就問我的項目，問的很詳細。 webpack 提高構建速度的方式 loader 輸入什么產(chǎn)出什么 ？ webpack 原理 webpack 動態(tài)加載的原理 webpack 熱更新 如何寫一個 webpack plugin AST 的應用 如何解析一個 html 文本，還是考 AST babel 原理，怎么寫 babel 插件 如何設計一個沙盒 sandbox ？ 小程序的 API 做了什么處理，能夠做到全局變量的隱藏，如果是你，怎么設計 ？ 基礎題考閉包的，我講對了思路，結果沒做對。 實現(xiàn)顏色轉換 'rgb(255, 255, 255)' -> '#FFFFFF' 的多種思路。 提供一個數(shù)字 n，生成一組 0~n-1 的整數(shù)，打亂順序組成數(shù)組，打亂幾次，如何能夠看起來平衡，說出你能想到的所有方法。 leetcode 239[2] 隨便問環(huán)節(jié)，我問了考閉包的那道題，我沒有做對。
這一面我準備了很多東西，結果又完美 miss。
二面技術 leader（60min）
業(yè)務，業(yè)務，還是業(yè)務，項目復盤有沒有更好的解決方案。 如何處理一個重大事故 bug 監(jiān)控體系 虛擬 dom 有什么好的地方？框架為什么要設計虛擬 dom？ webpack 的缺點，讓你設計一個新的構建打包工具，你會怎么設計？ 在線文檔編輯，如何處理兩人的沖突，如何展示，考慮各種場景 excel 文檔沖突高級處理，文章沖突呢？是上個問題的深化。 基礎題，直接寫出答案：
let?x?=?[1,?2,?3];
let?y?=?x;
let?z?=?[4,?5,?6];
y[0]?=?10;
y?=?z;
z[1]?=?20;
x[2]?=?z?=?30;
console.log(x,?y,?z);
復制代碼
基礎題：leetcode 300[3] 隨便問環(huán)節(jié)
三面業(yè)務 leader（60min）
算法題： 從數(shù)組 [1, 5, 8, 10, 12] 中找到兩個數(shù)和為 9，返回 [1, 8] 這樣的結果。算法題： 從數(shù)組 [1, 5, 8, 10, 12] 中找到三個數(shù)和為 19，返回 [1, 8， 10] 這樣的結果。算法題?leetcode 300[4]： 給定一個無序的整數(shù)數(shù)組，找到其中最長上升子序列的長度。針對我的項目提問，大概 40 分鐘吧，腦子亂。 沒有隨便問環(huán)節(jié)，我差不多有預感了。
是的，我的字節(jié)面止步于此了，這一面算法沒有難倒我，基本上看到題目我就能想出解法。三面掛的原因是我簡歷上的項目太簡單了，你想要真實，我給你真實，可惜你看不上這些真實（這次面試我的簡歷沒有準備好是一大原因，各位，我就是你們的前車之鑒?。。?/p>
個人經(jīng)驗分享
這個應該是各個面經(jīng)的保留節(jié)目了，我也在此留下筆記。主要分兩個方面來講，一個是前端技術的學習，另一個是面試當中需要注意的點。
準備階段
本來想先介紹簡歷怎么寫，不過這方面資料太多了，如果你的簡歷不過關，請找些面經(jīng)或者內(nèi)推群給予協(xié)助，讓別人指導下，然后，說下重點：在這里首先要感謝一位同學，我在前文中反復提到的，\@神三元[5]，謝謝你分享你學習時的感受、謝謝你整理的系列文章。毫不夸張的說，三元發(fā)布的所有文章，我都反復學習了至少十遍吧，甚至更多，順便在學習的過程中找出了不少文章中的筆誤。要說的是，人是健忘的，所以如果你對一些內(nèi)容忘記了，請繼續(xù)反復學習，前面的過程是痛苦的，后面復習的時候就很簡單了，我們簡單回憶就能找回失去的，畢竟咱們這么多年教育對這肯定深有體會。到了這里，你的基礎應該有一點了，基本常見的?手寫題（看這里）[6]?已經(jīng)難不倒你了，基于此，我又花了點時間刷了 Leetcode，還是一樣的套路，不會就多刷吧，那些奇淫技巧很難靠靈光一現(xiàn)。另外我額外又整理了幾萬字的筆記（放心，這里沒有鏈接……），筆跡的內(nèi)容包括但不限于：
看源碼，整理 Vue 與 React 框架的所有橫向對比，包括渲染原理、虛擬 dom、diff、patch、fiber、批量更新，手寫響應式，框架用到的模式、設計思想，性能優(yōu)化，相關生態(tài)技術等等。
webpack 原理、熱更新原理、動態(tài)加載原理、常見 plugins、loader、常見優(yōu)化，怎么打包、怎么分 chunk，怎么寫一個 plugins，生命周期，微內(nèi)核源碼等內(nèi)容，以及 rollup、gulp 的使用、應用場景。（我記得有一面一個考官對我說，你對整個研發(fā)流程都很清楚，但都并不深入，比如一個 webpack 打包分包的依據(jù)怎么判定……emmmm，我倒是會，你也不問我?。。?/p>
跨端框架的研究，工程化的梳理，使用的技術棧的坑，移動端的一些實踐，面試時額外準備的項目復盤，競品調(diào)查，對方產(chǎn)品的資料，測試系列，還有很多如微前端、中臺、serverless、可視化、Wasm 等就不舉例了。
除此之外，我也看了很多面經(jīng)、以及技術文章。
掌握了以上內(nèi)容，我們應該算是有一點知識廣度了也能從容地應對前面的技術面了，當然，這不是短短幾個月就能達成了，要時間的積累，那些一年就資深的牛人也是在大學甚至更早的時候就開始積累的，這一關逃不掉。到此，“技術面” 這只老虎應該能打個半死，直接干倒是不可能的，以上的知識對于校招可能足夠，但社招不一定用的上，哈哈。然后就是社招的重點：業(yè)務面，怎么說呢，就是多思考多總結吧，深入思考，對每個問題一定要有深入的思考，不然就很難進入大公司了，深度上要有一個拔高才能在面試中獲得好的成績。挑出你項目中的亮點，要被別人認可的亮點，這個比較難，各位只能自求多福了，也是我本人的短板，當時也是雞蛋里挑骨頭，這是我這次找工作遇到的最大攔路虎，業(yè)務太簡單，你眼中的亮點面試官覺得不是……當然我這里也可以提供一點方向給你：
業(yè)務方面的思考和準備[7]，你可以去這里看看，見微知著，多發(fā)散，一定會有啟發(fā) 這是我關注的業(yè)務大佬：58 沈劍\_架構師之路[8]、冴羽、愛笑的架構師 書籍方面：《金字塔原理》，有時間可以抽空看看，不保證有用。
面試階段
很多面經(jīng)都說回答問題時，思考一下再回答，為了組織語言，但有時候，你明明懂，在緊張的情況下反而會將關鍵信息跳過，答的讓人不知所云。要做到：“想清楚，說明白，知道說什么，怎么說”，還是有一點難度的，關系到平常一點一滴的積累，這方面我上面已經(jīng)提供了一點方向。剩下的就是面試階段好好發(fā)揮了，沒什么太好的辦法，我這里建議：
回答問題前思考一下，雖然不保證有用，但還是要好好履行的。 多面幾次，指的不同公司，只要你不嫌累。 在面試某一家公司時，根據(jù)前面的面試，嘗試推測后續(xù)考官會問到的業(yè)務的大致范圍，或者問內(nèi)推同學，提前做準備。一般會問：1 你簡歷上的項目，2 對方部門知名的產(chǎn)品，3 招聘 jd 上的 title。 簡單的復盤，保證別倒在同樣的問題上。 增加知識的廣度，可以引導向別的問題，考官也是樂意聽的。 挑個面試的好時間，比如我本人，早上 10 點我的腦子無比靈光，說話都帶著沉穩(wěn)富有磁性……晚上 7 點后，就會莫名緊張，聲音分貝提高幾個點略微沙啞，這個真的因人而異。有時候沉穩(wěn)不一定是好事，緊張反倒促使你偶有妙語和想法，當然也可能搞砸。 找?guī)讉€方法迅速調(diào)整好你的精氣神，在前面基礎學習的時候也可以用上。 如果你夠厲害，可以適當暗示和引導面試官問些你擅長的，千萬不要被牽著鼻子走。 最后，拜佛燒香，求個好運。人和人的差異，在于認知和思考力的差異。假如你一時之間思維沒有一個質的變化，不如求個好運。沒有一個好的運氣，上面的建議可能通通都不好使，畢竟社招面試內(nèi)容本身就是不穩(wěn)定的，有的重技術、有的重算法、有的重業(yè)務、有的重學歷、有的重眼緣……
如何堅持學習？
這一塊算是補的，我依然只給建議：
如果你玩游戲的話，請放棄游戲，或者戒掉一段時間，直到找到滿意工作。 找到你的痛點。 分段學習，制定符合周期的計劃。不要逼著自己，否則壓力會讓你崩潰的。 找點雞湯，或者去找點你沒有但渴望得到的東西。 業(yè)務方面，多看點書，多總結積累一些思考方式。
最后靈魂一問：
你的夢想是進大廠嗎？你明白的，這需要一點小小的代價。 你是萬中無一的奇才？如果不是，那么失敗幾次是正常的，大家都是普通人，也許只是不 match。
最后
文章到這就結束了，我的水平有限，我也不知道這篇面經(jīng)能夠拯救幾個娃，相信很多人跟我一樣都會有一個進大廠的夢吧。春招將至，希望大家都能在春招當中拿到自己滿意的 offer。最后，能看到這里的小伙伴順手點個贊吧。
點個『在看』支持下?