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