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