1. 面試前的準(zhǔn)備工作信息收集、簡(jiǎn)歷打磨與知識(shí)體系梳理說(shuō)實(shí)話決定投這幾家之前我猶豫了很久。網(wǎng)上關(guān)于大廠面經(jīng)的帖子很多但大多只堆砌面試題很少有人講清楚每一輪面試官到底在考察什么。這次親身經(jīng)歷完網(wǎng)易、美團(tuán)、頭條、百度四家的完整面試流程我想把整個(gè)過(guò)程做一次深度復(fù)盤從準(zhǔn)備階段到每一輪的追問(wèn)細(xì)節(jié)再到算法題和手寫題的實(shí)戰(zhàn)記錄都盡可能還原出來(lái)。先說(shuō)準(zhǔn)備工作。我在投遞簡(jiǎn)歷前花了大概兩周時(shí)間做三件事梳理自己的項(xiàng)目經(jīng)歷、整理前端知識(shí)體系、刷算法題。這三件事的順序很重要很多人上來(lái)就刷題結(jié)果項(xiàng)目經(jīng)歷講不清楚反而被面試官追問(wèn)到漏洞百出。項(xiàng)目經(jīng)歷梳理是重中之重。以我當(dāng)時(shí)的做法為例我把做過(guò)的最有代表性的項(xiàng)目寫成了STAR結(jié)構(gòu)背景、任務(wù)、行動(dòng)、結(jié)果。每個(gè)項(xiàng)目準(zhǔn)備三個(gè)版本的講述——1分鐘精簡(jiǎn)版、5分鐘完整版、10分鐘深度版。1分鐘版本用于自我介紹和面試開(kāi)場(chǎng)5分鐘版本用于面試官問(wèn)“介紹一下你最近的項(xiàng)目”10分鐘版本用于被深挖細(xì)節(jié)時(shí)的現(xiàn)場(chǎng)發(fā)揮。這里有個(gè)很關(guān)鍵的細(xì)節(jié)10分鐘版本里一定要埋伏一些你希望面試官追問(wèn)的點(diǎn)主動(dòng)把面試節(jié)奏引向你熟悉的方向。知識(shí)體系梳理我分成了四個(gè)方向JavaScript語(yǔ)言基礎(chǔ)與進(jìn)階、瀏覽器與網(wǎng)絡(luò)原理、框架原理與工程化、數(shù)據(jù)結(jié)構(gòu)和算法。這四個(gè)方向正好對(duì)應(yīng)了我在四家公司面試中最常被考察的范圍后面會(huì)逐一展開(kāi)。簡(jiǎn)歷方面也想多說(shuō)一句。我見(jiàn)過(guò)太多人把簡(jiǎn)歷寫得像技能清單列出十幾項(xiàng)技術(shù)?？雌饋?lái)什么都會(huì)實(shí)際上面試官隨便挑一項(xiàng)深問(wèn)就露怯。正確的做法是只列自己真正深入用過(guò)的技術(shù)并且每項(xiàng)技術(shù)都要準(zhǔn)備好“在什么場(chǎng)景下用了、解決了什么問(wèn)題、有沒(méi)有對(duì)比過(guò)其他方案”這三個(gè)問(wèn)題的答案。我把簡(jiǎn)歷投出去之前專門找了一位做技術(shù)招聘的朋友幫我把關(guān)他給了個(gè)很實(shí)在的建議簡(jiǎn)歷里每個(gè)技術(shù)點(diǎn)都要能對(duì)應(yīng)到一個(gè)具體業(yè)務(wù)場(chǎng)景否則就別寫。算法題部分我用的策略是分類刷題而不是按題庫(kù)順序刷。數(shù)組、字符串、鏈表、二叉樹(shù)、動(dòng)態(tài)規(guī)劃、貪心、回溯、棧與隊(duì)列、堆、哈希表每個(gè)分類先刷經(jīng)典題再刷變形題。四家面試下來(lái)我的感受是頭條的算法題數(shù)量最多、難度最高百度也很看重算法基礎(chǔ)網(wǎng)易和美團(tuán)的算法題相對(duì)溫和但會(huì)更偏向?qū)嶋H業(yè)務(wù)場(chǎng)景這個(gè)細(xì)節(jié)后面具體講。2. 網(wǎng)易從項(xiàng)目深坑到業(yè)務(wù)思考的連環(huán)追問(wèn)網(wǎng)易的面試流程總共四輪前三輪技術(shù)面最后一輪HR面。整體節(jié)奏比較緊湊一面到三面在兩周內(nèi)完成HR面之后第三天就收到了offer溝通電話。2.1 一面基礎(chǔ)能力摸底與項(xiàng)目真實(shí)性驗(yàn)證網(wǎng)易的一面是我所有面試中體驗(yàn)最好的一場(chǎng)面試官很年輕全程沒(méi)有居高臨下的感覺(jué)。開(kāi)場(chǎng)先讓我自我介紹然后直接進(jìn)入項(xiàng)目深挖。我提到一個(gè)基于React的復(fù)雜表單系統(tǒng)面試官連續(xù)追問(wèn)了將近四十分鐘幾乎把每個(gè)實(shí)現(xiàn)細(xì)節(jié)都問(wèn)遍了。他問(wèn)的問(wèn)題我到現(xiàn)在還記得很清楚。第一個(gè)是“React的setState到底是同步還是異步”這個(gè)問(wèn)題看著簡(jiǎn)單但真正要答好需要把React的批處理機(jī)制講透。我當(dāng)時(shí)的回答是先給出結(jié)論在React事件處理函數(shù)中是異步的在原生事件、setTimeout等場(chǎng)景下是同步的然后解釋React 18之前通過(guò)isBatchingUpdates變量判斷是否批處理React 18之后用自動(dòng)批處理統(tǒng)一了行為。面試官接著追問(wèn)“那為什么React要設(shè)計(jì)成這種看起來(lái)不一致的行為”這個(gè)問(wèn)題考察的是對(duì)設(shè)計(jì)意圖的理解我從減少渲染次數(shù)、保持狀態(tài)一致性、Fiber調(diào)度機(jī)制三個(gè)角度回答面試官點(diǎn)頭表示認(rèn)可。接著他問(wèn)了虛擬DOM的diff算法這個(gè)問(wèn)題我準(zhǔn)備得很充分從tree diff到component diff再到element diff逐層展開(kāi)重點(diǎn)講了key的作用以及為什么遍歷子節(jié)點(diǎn)時(shí)要盡量避免使用index作為key。這里有個(gè)小插曲面試官問(wèn)“如果子節(jié)點(diǎn)列表最前面插入一個(gè)新節(jié)點(diǎn)用index做key會(huì)有什么問(wèn)題”我舉例說(shuō)明后他又追問(wèn)“那你覺(jué)得應(yīng)該怎么優(yōu)化”我把我在實(shí)際項(xiàng)目中用穩(wěn)定id作為key的經(jīng)驗(yàn)講了一遍順帶還提到了對(duì)列表項(xiàng)做唯一標(biāo)識(shí)的實(shí)踐方案。一面還有一個(gè)很有意思的環(huán)節(jié)面試官給我看了一段有性能問(wèn)題的代碼讓我現(xiàn)場(chǎng)分析并優(yōu)化。這段代碼的問(wèn)題很典型在for循環(huán)里操作DOM、頻繁讀取offsetWidth導(dǎo)致強(qiáng)制同步布局。我指出問(wèn)題后面試官讓我寫出優(yōu)化后的版本我用文檔片段加批處理的方式重寫了一遍然后解釋為什么這樣能減少reflow。這種“現(xiàn)場(chǎng)分析改寫”的考察方式比單純背知識(shí)點(diǎn)有用得多它測(cè)試的是真實(shí)工程能力而不是記憶能力。一面最后十分鐘是讓我反問(wèn)我問(wèn)了團(tuán)隊(duì)的技術(shù)棧和業(yè)務(wù)方向。這里多說(shuō)一句反問(wèn)環(huán)節(jié)千萬(wàn)別問(wèn)沒(méi)營(yíng)養(yǎng)的問(wèn)題比如“公司加班多嗎”“年終獎(jiǎng)多少”這種可以留到HR面再問(wèn)。技術(shù)面反問(wèn)環(huán)節(jié)適合問(wèn)團(tuán)隊(duì)技術(shù)挑戰(zhàn)、技術(shù)規(guī)劃、協(xié)作方式這類問(wèn)題既體現(xiàn)你的技術(shù)熱情也能幫你判斷這個(gè)團(tuán)隊(duì)是否適合自己。2.2 二面業(yè)務(wù)思考與技術(shù)選型的權(quán)衡能力二面的面試官是技術(shù)主管開(kāi)場(chǎng)沒(méi)有讓我自我介紹而是直接問(wèn)了一個(gè)場(chǎng)景題如果讓你設(shè)計(jì)一個(gè)IM系統(tǒng)的消息列表你會(huì)怎么考慮技術(shù)方案。這個(gè)問(wèn)題沒(méi)有標(biāo)準(zhǔn)答案考察的是綜合設(shè)計(jì)能力和業(yè)務(wù)理解深度。我當(dāng)時(shí)的回答思路是先拆分需求消息列表的維度、排序規(guī)則、分頁(yè)方案、未讀數(shù)處理、信令來(lái)源。然后根據(jù)需求選型聊到了WebSocket連接管理、消息隊(duì)列、本地緩存、虛擬列表。面試官在每個(gè)方案后面都會(huì)追問(wèn)一句“為什么”比如“為什么用虛擬列表”“消息隊(duì)列為什么選這個(gè)”“斷線重連怎么處理”。這些問(wèn)題看著是技術(shù)問(wèn)題實(shí)際上在考察你是否真的理解每個(gè)技術(shù)選型背后的權(quán)衡。這里有個(gè)我踩過(guò)的坑想重點(diǎn)提醒回答技術(shù)選型問(wèn)題時(shí)千萬(wàn)不要只說(shuō)優(yōu)點(diǎn)一定要主動(dòng)講這個(gè)方案的局限性和適用邊界。我在聊虛擬列表的時(shí)候主動(dòng)說(shuō)到了滾動(dòng)定位精度問(wèn)題和動(dòng)態(tài)高度估算的難點(diǎn)面試官明顯興趣更大繼續(xù)追問(wèn)了如何解決這些問(wèn)題。這就是前面提到的“埋伏點(diǎn)”技巧的具體運(yùn)用——你主動(dòng)提出一個(gè)有深度的問(wèn)題面試官大概率會(huì)順著追問(wèn)而這個(gè)問(wèn)題往往是你準(zhǔn)備最充分的。二面還問(wèn)到了前端工程化相關(guān)的內(nèi)容webpack的構(gòu)建優(yōu)化方案、vite和webpack的差異、微前端方案的選型。這些內(nèi)容我都有實(shí)際項(xiàng)目經(jīng)驗(yàn)支撐回答起來(lái)比較順手。webpack優(yōu)化我從按需加載、代碼分割、tree-shaking、緩存策略、多進(jìn)程構(gòu)建幾個(gè)層面展開(kāi)并且結(jié)合了我實(shí)際項(xiàng)目中構(gòu)建時(shí)間從40秒降到8秒的案例。2.3 三面與HR面綜合素質(zhì)的最后把關(guān)三面是交叉面面試官是其他團(tuán)隊(duì)的負(fù)責(zé)人問(wèn)題跨度明顯變大從技術(shù)問(wèn)題跳到了職業(yè)規(guī)劃、團(tuán)隊(duì)協(xié)作、帶人經(jīng)驗(yàn)、技術(shù)影響力建設(shè)。他問(wèn)了一個(gè)讓我印象很深的問(wèn)題“如果團(tuán)隊(duì)里有個(gè)同事的技術(shù)水平明顯比你低但每次都是他拿高分績(jī)效你會(huì)怎么想?！边@個(gè)問(wèn)題考察的是團(tuán)隊(duì)協(xié)作心態(tài)和情商我當(dāng)時(shí)的回答是先肯定同事的優(yōu)勢(shì)再反思自己的不足最后說(shuō)我會(huì)主動(dòng)學(xué)習(xí)他的優(yōu)點(diǎn)同時(shí)也在自己擅長(zhǎng)的領(lǐng)域分享經(jīng)驗(yàn)共同進(jìn)步。HR面相對(duì)輕松主要問(wèn)離職原因、期望薪資、職業(yè)規(guī)劃、工作地偏好。這里有個(gè)建議HR面千萬(wàn)別繞彎子期望薪資直接報(bào)數(shù)字同時(shí)說(shuō)明這個(gè)數(shù)字的參考依據(jù)。我當(dāng)時(shí)報(bào)了期望范圍后HR追問(wèn)“為什么是這個(gè)區(qū)間”我給出了市場(chǎng)行情、個(gè)人能力、崗位職責(zé)三個(gè)維度的依據(jù)溝通效率很高。網(wǎng)易的整體面試風(fēng)格總結(jié)下來(lái)就是一面重基礎(chǔ)和項(xiàng)目真實(shí)性驗(yàn)證二面重業(yè)務(wù)思考和技術(shù)選型權(quán)衡三面重綜合素質(zhì)HR面務(wù)實(shí)高效。面試題整體難度適中最看重的是候選人能否把技術(shù)方案講清楚以及是否理解技術(shù)選型背后的業(yè)務(wù)邏輯。3. 美團(tuán)基礎(chǔ)八股之外的工程實(shí)踐深度考察美團(tuán)一共四面一輪技術(shù)面、二輪技術(shù)面、一輪交叉面、一輪HR面技術(shù)面的深度和廣度都超出了我預(yù)期。如果說(shuō)網(wǎng)易更看重業(yè)務(wù)思考那美團(tuán)更看重候選人有沒(méi)有真實(shí)踩過(guò)線上問(wèn)題的坑。3.1 一面瀏覽器原理與線上問(wèn)題排查思路美團(tuán)一面有個(gè)鮮明的特點(diǎn)就是喜歡從線上真實(shí)問(wèn)題出發(fā)倒推考察點(diǎn)。面試官開(kāi)場(chǎng)問(wèn)了一個(gè)場(chǎng)景線上頁(yè)面白屏你作為前端負(fù)責(zé)人怎么排查。這題我在別的公司面試時(shí)也遇到過(guò)但美團(tuán)面試官問(wèn)得更細(xì)他會(huì)追問(wèn)“你說(shuō)是JS報(bào)錯(cuò)導(dǎo)致的怎么確認(rèn)”“如果是CSS導(dǎo)致的白屏如何定位”“CDN資源加載失敗怎么判斷”“后端接口返回異常如何聯(lián)動(dòng)處理”。這個(gè)層層追問(wèn)的過(guò)程面試官實(shí)際在考察的是你對(duì)瀏覽器渲染原理、網(wǎng)絡(luò)請(qǐng)求鏈路、性能監(jiān)控體系掌握的顆粒度。我從控制臺(tái)Network面板看資源加載狀態(tài)、Source面板斷點(diǎn)定位、Performance面板看渲染時(shí)間線、Sentry錯(cuò)誤日志回溯四個(gè)方向回答面試官順著我的回答追問(wèn)了幾個(gè)細(xì)節(jié)包括瀏覽器從輸入U(xiǎn)RL到頁(yè)面渲染完成的完整過(guò)程以及這個(gè)過(guò)程中哪些環(huán)節(jié)會(huì)導(dǎo)致白屏。瀏覽器渲染流程是美團(tuán)特別喜歡考察的點(diǎn)面試官讓我完整講了一遍DNS解析、TCP連接、TLS握手、HTTP請(qǐng)求、HTML解析構(gòu)建DOM樹(shù)、CSS解析構(gòu)建CSSOM、合并成渲染樹(shù)、布局、繪制、合成。講完之后他追問(wèn)了幾個(gè)細(xì)節(jié)JavaScript解析會(huì)阻塞DOM構(gòu)建但為什么async和defer策略能減少阻塞CSS會(huì)不會(huì)阻塞DOM構(gòu)建重排和重繪在什么情況下觸發(fā)。這些問(wèn)題我在實(shí)際做性能優(yōu)化時(shí)都遇到過(guò)所以答得比較穩(wěn)。美團(tuán)一面的算法題是經(jīng)典的“輸出二叉樹(shù)層序遍歷結(jié)果”難度適中主要考察隊(duì)列這個(gè)數(shù)據(jù)結(jié)構(gòu)的掌握程度。答題過(guò)程中面試官要求我用白板寫代碼并且要邊寫邊講思路。這種邊寫邊講的方式建議平時(shí)就養(yǎng)成習(xí)慣因?yàn)槊嬖嚂r(shí)突然被要求表達(dá)會(huì)很緊張?zhí)崆熬毩?xí)能有效緩解。3.2 二面框架原理與工程化架構(gòu)設(shè)計(jì)二面深度進(jìn)入框架內(nèi)核面試官問(wèn)了React fiber架構(gòu)的實(shí)現(xiàn)原理、React渲染流程、diff算法、狀態(tài)管理方案選型。這些問(wèn)題里讓我印象最深的是“React fiber架構(gòu)解決了什么問(wèn)題”我回答時(shí)需要說(shuō)清楚React舊版遞歸渲染會(huì)阻塞主線程fiber架構(gòu)把渲染任務(wù)拆分成可中斷的小任務(wù)配合優(yōu)先級(jí)調(diào)度機(jī)制實(shí)現(xiàn)時(shí)間切片從而提升復(fù)雜應(yīng)用的響應(yīng)性。面試官接著追問(wèn)了“concurrent mode下怎么保證狀態(tài)一致性”“useEffect和useLayoutEffect的區(qū)別”“useMemo和useCallback的正確使用場(chǎng)景”。這些問(wèn)題看著基礎(chǔ)但深挖之后會(huì)發(fā)現(xiàn)對(duì)React調(diào)度機(jī)制理解不透的話很難答深。我建議準(zhǔn)備React面經(jīng)時(shí)一定要把“從setState到頁(yè)面更新完成整個(gè)過(guò)程發(fā)生了什么”這個(gè)問(wèn)題徹底搞懂這是React面試的核心中的核心。美團(tuán)二面還考察了前端架構(gòu)設(shè)計(jì)面試官給了一個(gè)微前端改造場(chǎng)景多個(gè)業(yè)務(wù)團(tuán)隊(duì)共用一套基座需要隔離樣式和腳本同時(shí)又要共享公共依賴你會(huì)怎么設(shè)計(jì)。這個(gè)問(wèn)題我給出一套基于基座應(yīng)用加載子應(yīng)用的方案詳細(xì)說(shuō)明路由分發(fā)、沙箱隔離、公共依賴加載、樣式隔離、通信機(jī)制五個(gè)方面。面試官追問(wèn)了JS沙箱的實(shí)現(xiàn)原理我舉例講解了withProxy攔截全局變量、快照沙箱、LegacySandbox三種方案的區(qū)別和適用場(chǎng)景。3.3 交叉面與HR面工程價(jià)值觀的匹配交叉面考察的主要是候選人解決問(wèn)題的思路。面試官問(wèn)了一個(gè)很有意思的問(wèn)題“如果讓你負(fù)責(zé)把一個(gè)老項(xiàng)目的技術(shù)棧從jQuery升級(jí)到React你會(huì)怎么做。”這個(gè)問(wèn)題沒(méi)有絕對(duì)正確的答案考察的是風(fēng)險(xiǎn)控制、漸進(jìn)式改造和團(tuán)隊(duì)協(xié)作意識(shí)。我的方案是先用微前端模式新老并行然后逐個(gè)模塊遷移、上線、驗(yàn)證最后切流量面試官對(duì)方案的整體思路表示認(rèn)可。美團(tuán)HR面問(wèn)的問(wèn)題比較具體包括為什么選擇美團(tuán)、了解美團(tuán)哪些業(yè)務(wù)、能接受的加班強(qiáng)度、職業(yè)規(guī)劃等。這里想說(shuō)一個(gè)細(xì)節(jié)HR面提到的“能接受的加班強(qiáng)度”問(wèn)題回答時(shí)不要直接說(shuō)“我可以接受996”也不要反問(wèn)“你們加班多少”比較務(wù)實(shí)的說(shuō)法是“我關(guān)注的是工作質(zhì)量和產(chǎn)出效率在項(xiàng)目沖刺期加班沒(méi)問(wèn)題但希望平時(shí)工作節(jié)奏合理”這樣既表達(dá)了態(tài)度也不會(huì)把自己放在不利位置。美團(tuán)的整體面試風(fēng)格是重工程落地、重線上真實(shí)問(wèn)題、重架構(gòu)設(shè)計(jì)思維面試官普遍技術(shù)功底扎實(shí)問(wèn)題追問(wèn)得很細(xì)很密適合有真實(shí)項(xiàng)目經(jīng)驗(yàn)并且認(rèn)真思考過(guò)工程問(wèn)題的候選人。4. 頭條算法強(qiáng)度拉滿的極限挑戰(zhàn)頭條的面試流程是五輪四輪技術(shù)面加一輪HR面其中三輪面試都有現(xiàn)場(chǎng)寫算法題環(huán)節(jié)總體難度是我經(jīng)歷的所有面試中最高的。頭條的面試節(jié)奏也很快前后一周多就面完了全部輪次。4.1 一面高頻面試題與手寫題的組合拳頭條一面開(kāi)場(chǎng)就是兩道手寫題第一道是手寫防抖函數(shù)和節(jié)流函數(shù)要求現(xiàn)場(chǎng)運(yùn)行驗(yàn)證結(jié)果。這道題看著簡(jiǎn)單但真正實(shí)操時(shí)會(huì)發(fā)現(xiàn)很多細(xì)節(jié)防抖的this指向問(wèn)題、參數(shù)透?jìng)?、立即?zhí)行選項(xiàng)。我寫完后面試官追問(wèn)“防抖和節(jié)流的應(yīng)用場(chǎng)景怎么區(qū)分”我用搜索框輸入和滾動(dòng)加載這兩個(gè)場(chǎng)景解釋了一遍。第二道手寫題是手寫深拷貝要求處理循環(huán)引用。這道題我提前準(zhǔn)備了map標(biāo)記循環(huán)引用的版本但面試官繼續(xù)追問(wèn)“Date、RegExp、Map、Set這些特殊對(duì)象怎么處理”“Symbol和函數(shù)類型怎么處理”“如何拷貝不可枚舉屬性和原型鏈”。問(wèn)到這里考察的已經(jīng)不只是深拷貝本身而是對(duì)JavaScript對(duì)象體系的整體掌握程度。我把每種類型都做了針對(duì)性處理面試官看完后評(píng)價(jià)“考慮得比較全面”。頭條一面的算法題是“合并兩個(gè)有序鏈表”和“兩數(shù)之和”兩道都是LeetCode經(jīng)典題但要求手寫完整代碼并通過(guò)測(cè)試用例。這里有個(gè)重要的建議頭條的在線編輯器支持運(yùn)行測(cè)試用例寫之前一定要先想清楚邊界條件再看測(cè)試不要直接埋頭寫代碼。我實(shí)際做題時(shí)先列了空鏈表、單元素鏈表、同值鏈表三種邊界測(cè)試用例寫完代碼再逐個(gè)驗(yàn)證不僅效率高也給面試官留下嚴(yán)謹(jǐn)?shù)挠∠蟆?.2 二面算法主戰(zhàn)場(chǎng)與源碼級(jí)追問(wèn)二面是算法題的集中爆發(fā)期。面試官一共出了三道題第一道是版本號(hào)比較要求實(shí)現(xiàn)類似compareVersion的功能輸入“1.2”和“1.10”返回-1。題目本身不復(fù)雜但考察了字符串處理和數(shù)組遍歷的編碼功底我特別處理了長(zhǎng)度不等的版本號(hào)和前導(dǎo)零的情況。第二道是“最大子數(shù)組和”經(jīng)典的動(dòng)態(tài)規(guī)劃問(wèn)題我用一維DP數(shù)組實(shí)現(xiàn)后面試官追問(wèn)問(wèn)了“能否優(yōu)化空間復(fù)雜度到O(1)”我改成滾動(dòng)變量版本后他繼續(xù)追問(wèn)“如果數(shù)組可以循環(huán)怎么處理”。這種連續(xù)變體考察方式很考驗(yàn)對(duì)算法本質(zhì)的理解不能只背解法要清楚解法為什么有效以及如何泛化。第三道算法題是“三數(shù)之和”要求找出所有和為目標(biāo)值的三個(gè)數(shù)組合。這道題的時(shí)間復(fù)雜度優(yōu)化和去重處理是核心考點(diǎn)我從暴力解法講到雙指針解法說(shuō)明時(shí)間復(fù)雜度如何從O(n^3)優(yōu)化到O(n^2)面試官對(duì)思路比較滿意。頭條二面除了算法題以外還追問(wèn)了很多源碼級(jí)問(wèn)題比如“Vue的響應(yīng)式原理和React的setState機(jī)制有什么區(qū)別”“v8引擎的垃圾回收機(jī)制是怎么工作的”“事件循環(huán)中的微任務(wù)和宏任務(wù)執(zhí)行順序”。這些問(wèn)題都需要對(duì)底層原理有深入理解臨時(shí)背答案很容易被追問(wèn)漏。4.3 三面與四面系統(tǒng)設(shè)計(jì)與開(kāi)放性思考三面?zhèn)戎叵到y(tǒng)設(shè)計(jì)給了一個(gè)場(chǎng)景設(shè)計(jì)一個(gè)網(wǎng)頁(yè)版在線文檔系統(tǒng)支持多人同時(shí)編輯客戶端需要實(shí)時(shí)同步內(nèi)容。我給出了基于WebSocket的協(xié)同編輯方案同時(shí)分析了OT算法和CRDT算法在協(xié)同編輯領(lǐng)域的區(qū)別面試官聽(tīng)完后追問(wèn)了網(wǎng)絡(luò)斷線恢復(fù)、內(nèi)容沖突解決、性能優(yōu)化三個(gè)方向這場(chǎng)面試耗時(shí)近一個(gè)小時(shí)是我所有面試中強(qiáng)度最大的一場(chǎng)。四面是技術(shù)終面面試官是部門負(fù)責(zé)人沒(méi)有單獨(dú)出題而是結(jié)合我的項(xiàng)目經(jīng)歷聊了一個(gè)多小時(shí)。他問(wèn)的問(wèn)題非常開(kāi)放“如果讓你從零搭建一個(gè)前端團(tuán)隊(duì)你會(huì)怎么做”“你覺(jué)得好的技術(shù)方案和好的業(yè)務(wù)增長(zhǎng)之間是什么關(guān)系”。這些問(wèn)題沒(méi)有標(biāo)準(zhǔn)答案考察的是技術(shù)判斷力和商業(yè)思維。我的經(jīng)驗(yàn)是回答這類問(wèn)題不要急著給結(jié)論先拆解問(wèn)題、給出思考框架、再用具體案例說(shuō)明這種“框架案例”的回答方式在開(kāi)放性問(wèn)題上特別有效。4.4 頭條面試的總特點(diǎn)頭條面經(jīng)網(wǎng)上很多但親身經(jīng)歷后我的感受是面試題量大、難度高、節(jié)奏快對(duì)算法能力和底層原理掌握程度要求極高尤其看重白板coding和現(xiàn)場(chǎng)思考能力。如果打算面頭條建議在LeetCode上把高頻題刷透尤其是雙指針、動(dòng)態(tài)規(guī)劃、鏈表操作、二叉樹(shù)遍歷這幾類同時(shí)把手寫Promise、防抖節(jié)流、深拷貝、數(shù)組去重這類JavaScript手寫題練到條件反射的程度。5. 百度偏重技術(shù)廣度與原理刨根的全面考察百度的面試流程是三輪技術(shù)面加一輪HR面整體風(fēng)格偏學(xué)院派面試官對(duì)原理的刨根問(wèn)底程度在四家中最高幾乎每個(gè)技術(shù)點(diǎn)都要問(wèn)到“為什么這樣設(shè)計(jì)”。5.1 一面JavaScript語(yǔ)言基石與瀏覽器機(jī)制百度一面開(kāi)場(chǎng)就問(wèn)了一個(gè)非?；A(chǔ)但容易答不深的問(wèn)題“說(shuō)說(shuō)JavaScript的數(shù)據(jù)類型以及typeof null為什么是object”。這個(gè)問(wèn)題的關(guān)鍵在于解釋JavaScript語(yǔ)言設(shè)計(jì)的背景和早期實(shí)現(xiàn)的bug我回答時(shí)說(shuō)這是JavaScript第一版設(shè)計(jì)時(shí)的遺留問(wèn)題typeof null返回object是因?yàn)榈讓佑?2位存儲(chǔ)類型信息而null的類型標(biāo)簽恰好是000面試官直接追問(wèn)“JavaScript內(nèi)部用什么數(shù)據(jù)結(jié)構(gòu)存儲(chǔ)對(duì)象屬性”這個(gè)問(wèn)題一下子帶到了V8引擎層面。我一口氣講了V8用隱藏類和描述符數(shù)組來(lái)優(yōu)化對(duì)象屬性訪問(wèn)的過(guò)程以及為什么刪除屬性會(huì)導(dǎo)致隱藏類失效。面試官聽(tīng)完明顯來(lái)了興趣繼續(xù)問(wèn)“Map和Object有什么本質(zhì)區(qū)別”“Set和數(shù)組有什么區(qū)別”。這幾個(gè)問(wèn)題串起來(lái)之后我才反應(yīng)過(guò)來(lái)面試官是在考察我對(duì)JavaScript語(yǔ)言特性背后設(shè)計(jì)原因的理解而不是簡(jiǎn)單的API背誦。百度一面還比較系統(tǒng)地考察了瀏覽器緩存機(jī)制強(qiáng)緩存和協(xié)商緩存的各種字段、優(yōu)先級(jí)、適用場(chǎng)景。這個(gè)問(wèn)題我用一個(gè)實(shí)際案例講解我負(fù)責(zé)的項(xiàng)目中靜態(tài)資源使用Cache-Control: max-age31536000做長(zhǎng)期緩存配合文件名hash實(shí)現(xiàn)精準(zhǔn)更新HTML頁(yè)面使用no-cache保證每次請(qǐng)求都經(jīng)過(guò)服務(wù)器驗(yàn)證。面試官追問(wèn)“如果用戶線上出現(xiàn)了拿到舊版本資源的問(wèn)題你會(huì)怎么排查”我回答先看響應(yīng)頭確認(rèn)緩存策略再看URL是否帶hash再看服務(wù)器配置最后看瀏覽器是否有磁盤緩存殘留。5.2 二面框架原理、性能優(yōu)化與設(shè)計(jì)模式百度二面開(kāi)始時(shí)面試官先問(wèn)了一個(gè)宏觀問(wèn)題React、Vue、Angular這三種主流框架在設(shè)計(jì)哲學(xué)上有什么區(qū)別。這個(gè)問(wèn)題考察的是對(duì)框架本質(zhì)的理解而不是API使用熟練度。我從數(shù)據(jù)驅(qū)動(dòng)視圖的實(shí)現(xiàn)方式、模板語(yǔ)言和JSX的設(shè)計(jì)選擇、響應(yīng)式更新機(jī)制三個(gè)維度展開(kāi)說(shuō)明三種框架各自的設(shè)計(jì)取舍。面試官追問(wèn)“為什么React最終沒(méi)有選擇模板語(yǔ)法而選擇了JSX”我提到了React團(tuán)隊(duì)對(duì)javascript表達(dá)力、靜態(tài)分析、組件組合三個(gè)方面的考量。性能優(yōu)化是百度二面的重要主題。面試官問(wèn)“前端性能優(yōu)化的手段有哪些”這個(gè)問(wèn)題如果只羅列手段會(huì)顯得很散我按加載性能、渲染性能和運(yùn)行時(shí)性能三個(gè)層次組織答案加載性能包括資源壓縮、CDN加速、HTTP緩存、按需加載渲染性能包括減少重排重繪、虛擬列表、骨架屏運(yùn)行時(shí)性能包括避免內(nèi)存泄漏、防抖節(jié)流、Web Worker處理復(fù)雜計(jì)算。每一條我都配上了實(shí)際案例和優(yōu)化前后的數(shù)據(jù)對(duì)比讓面試官能直觀感受到優(yōu)化的成效。百度二面還考察了設(shè)計(jì)模式在前端中的應(yīng)用面試官問(wèn)“你平時(shí)在項(xiàng)目中用過(guò)哪些設(shè)計(jì)模式解決什么問(wèn)題”。我列舉了觀察者模式用于事件機(jī)制、策略模式用于表單校驗(yàn)、裝飾器模式用于高階組件、單例模式用于全局狀態(tài)管理、工廠模式用于組件創(chuàng)建等每個(gè)模式都結(jié)合了具體場(chǎng)景。面試官?zèng)]有繼續(xù)深挖設(shè)計(jì)模式本身而是通過(guò)了幾個(gè)場(chǎng)景題考察我能否把設(shè)計(jì)原則應(yīng)用到實(shí)際問(wèn)題中。百度的算法題難度也很高當(dāng)場(chǎng)出了兩道Linked List和樹(shù)的題目。鏈表題是反轉(zhuǎn)鏈表的多種解法要求寫出迭代和遞歸兩個(gè)版本并分析各自的空間復(fù)雜度樹(shù)題是驗(yàn)證二叉搜索樹(shù)要求實(shí)現(xiàn)中序遍歷并判斷是否有序。這兩道題我都答得比較流暢準(zhǔn)備充分是關(guān)鍵。5.3 三面與項(xiàng)目深度拷問(wèn)百度三面是leader面沒(méi)有準(zhǔn)備時(shí)的八股題核心就一個(gè)主題深挖項(xiàng)目。面試官對(duì)我簡(jiǎn)歷上寫的一個(gè)高并發(fā)場(chǎng)景項(xiàng)目進(jìn)行了將近50分鐘的連續(xù)追問(wèn)從項(xiàng)目背景、技術(shù)選型、架構(gòu)設(shè)計(jì)、上線效果到遇到的最大挑戰(zhàn)、如何定位問(wèn)題、怎么設(shè)計(jì)兜底方案再到如果重新設(shè)計(jì)你會(huì)怎么做。這個(gè)過(guò)程中有幾個(gè)追問(wèn)我記憶深刻。面試官問(wèn)“你們用了消息隊(duì)列如果消息重復(fù)消費(fèi)了怎么辦”我回答使用消息冪等方案通過(guò)唯一標(biāo)志做去重并說(shuō)明如何設(shè)計(jì)唯一標(biāo)志和去重邏輯。他接著問(wèn)“消息積壓嚴(yán)重時(shí)怎么應(yīng)對(duì)”我給出了水平擴(kuò)容消費(fèi)者、臨時(shí)隊(duì)列方案、降級(jí)處理三種手段。通過(guò)這些追問(wèn)我能感覺(jué)到百度技術(shù)面非常重視候選人有沒(méi)有真正經(jīng)歷過(guò)高復(fù)雜度的項(xiàng)目而不只是做過(guò)demo級(jí)別的應(yīng)用。三面最后面試官問(wèn)我“如果給你一個(gè)完全陌生領(lǐng)域的技術(shù)課題你會(huì)怎么快速上手”我回答會(huì)先做四步看官方文檔建立整體認(rèn)知、找社區(qū)高質(zhì)量資料理解設(shè)計(jì)思想、搭最小可運(yùn)行demo驗(yàn)證理解、再回到官方文檔補(bǔ)細(xì)節(jié)看源碼驗(yàn)證。面試官點(diǎn)頭認(rèn)可然后進(jìn)入HR面。百度HR面相對(duì)簡(jiǎn)潔主要確認(rèn)了薪資期望、到崗時(shí)間、業(yè)務(wù)偏好沒(méi)有太多壓力問(wèn)題。百度四輪下來(lái)我的整體感受是技術(shù)深度要求極高尤其看重對(duì)原理的理解和項(xiàng)目的真實(shí)復(fù)雜度需要候選人沉下心做過(guò)深入鉆研。6. 四廠算法題與手寫題的橫向復(fù)盤與備考建議面完四家后我把所有遇到的算法題和手寫題做了橫向?qū)Ρ日沓闪讼旅孢@個(gè)表格希望能幫到正在準(zhǔn)備的人公司算法題數(shù)量主要題型手寫題書寫環(huán)境網(wǎng)易1道字符串/數(shù)組類性能優(yōu)化代碼改寫?？途W(wǎng)在線編輯器美團(tuán)2道二叉樹(shù)、動(dòng)態(tài)規(guī)劃場(chǎng)景題代碼實(shí)現(xiàn)視頻面試共享白板頭條6道鏈表、數(shù)組、動(dòng)態(tài)規(guī)劃、系統(tǒng)設(shè)計(jì)Promise、防抖節(jié)流、深拷貝自研在線IDE可運(yùn)行測(cè)試百度3道鏈表、二叉樹(shù)、雙指針手寫代碼并分析復(fù)雜度視頻面試共享白板6.1 最高頻的手寫題與滿分模板四家面試中反復(fù)出現(xiàn)的手寫題就那幾個(gè)深拷貝、防抖節(jié)流、Promise.all、數(shù)組去重、new操作符實(shí)現(xiàn)、instanceof實(shí)現(xiàn)。我建議不要背答案而是理解每個(gè)題目背后的設(shè)計(jì)意圖。以Promise.all為例面試官不是要你默寫代碼而是考察你對(duì)Promise狀態(tài)流轉(zhuǎn)、錯(cuò)誤處理、邊界條件的理解深度。我把自己總結(jié)的Promise.all寫法分享出來(lái)幾個(gè)關(guān)鍵點(diǎn)分別是返回新Promise、內(nèi)部用數(shù)組順序保存結(jié)果、如果傳入非Promise值要直接通過(guò)resolve包裹、任何一個(gè)reject都會(huì)導(dǎo)致整體reject、空數(shù)組直接resolve。再加上錯(cuò)誤處理邏輯基本就是滿分答案。建議把常考手寫題按照同樣的方式拆解成“關(guān)鍵點(diǎn)實(shí)現(xiàn)思路邊界情況”三部分比逐行背代碼有效得多。6.2 算法題備考的優(yōu)先級(jí)策略分析完四家公司的算法題后我用一句話總結(jié)備考策略鏈表、二叉樹(shù)、數(shù)組、動(dòng)態(tài)規(guī)劃四類必刷哈希表、雙指針是?？拓澬?、回溯也要熟悉。頭條和百度算法題難度最高建議目標(biāo)這兩家的同學(xué)把LeetCode高頻題刷到250題以上并且每道題都要能說(shuō)出時(shí)間復(fù)雜度和空間復(fù)雜度。還有一個(gè)容易被忽視的點(diǎn)在線IDE和視頻共享白板書寫體驗(yàn)完全不同。?？途W(wǎng)的在線IDE有自動(dòng)補(bǔ)全和運(yùn)行測(cè)試能力而視頻面試的共享白板只能手寫、不能運(yùn)行。建議提前用不含自動(dòng)補(bǔ)全的編輯器模擬白板環(huán)境練習(xí)手寫代碼的流暢度和代碼整潔度。6.3 算法題之外的軟實(shí)力準(zhǔn)備很多人只關(guān)注算法題卻忽略了面試中的軟實(shí)力表現(xiàn)。我的體會(huì)是面試官其實(shí)會(huì)觀察候選人的解題過(guò)程是不是先分析題目、再確認(rèn)邊界、再寫代碼、最后自測(cè)。這套動(dòng)作比最終代碼是否正確更重要。我實(shí)際面試中因?yàn)橹鲃?dòng)分析了時(shí)間復(fù)雜度和邊界情況多次收到正面反饋。自我介紹也要提前打磨。四家公司面試我都用了同一個(gè)結(jié)構(gòu)基本信息、核心技能和代表項(xiàng)目、為什么選擇這家公司。控制在兩分鐘以內(nèi)突出與目標(biāo)崗位最匹配的經(jīng)歷避免羅列堆砌。7. 面經(jīng)之外時(shí)間安排、心態(tài)管理與常見(jiàn)坑最后這部分聊聊面經(jīng)之外的一些內(nèi)容也是網(wǎng)上很少有人系統(tǒng)整理的。如果你正在準(zhǔn)備面試或者考慮跳槽這部分內(nèi)容希望能幫你少走彎路。7.1 面試排期的策略與offer節(jié)奏管理四家公司的面試時(shí)間如果疊加在一起會(huì)非常難管理。我的排期策略是先選擇一到兩家非首選公司作為練兵通過(guò)實(shí)戰(zhàn)檢驗(yàn)自己的準(zhǔn)備程度再進(jìn)入首選公司的面試流程。我實(shí)際先把美團(tuán)安排在第一批通過(guò)它的面試熟悉了當(dāng)前環(huán)境下大廠面試的整體風(fēng)格和自我介紹節(jié)奏再去面頭條和百度時(shí)就淡定多了。同時(shí)收到多個(gè)offer時(shí)時(shí)間管理壓力會(huì)集中在HR面階段。我的建議是不要隱瞞其他offer也不用主動(dòng)透露具體信息在HR問(wèn)“目前還有其他流程在走嗎”時(shí)誠(chéng)實(shí)回答“在流程中”但不要編造offer數(shù)量誠(chéng)信是底線。7.2 被追問(wèn)到不會(huì)時(shí)的應(yīng)對(duì)框架即使準(zhǔn)備再充分也必然遇到不會(huì)的問(wèn)題。我第一次被追問(wèn)到不會(huì)時(shí)大腦一片空白硬著頭皮瞎編效果非常差。后來(lái)我總結(jié)出了一個(gè)屬于自己的應(yīng)對(duì)框架先明確告訴面試官“這個(gè)方向我確實(shí)了解不深”然后用“我目前的理解是”開(kāi)始回答把自己已知的部分說(shuō)完最后說(shuō)“這個(gè)問(wèn)題我記錄一下后續(xù)會(huì)去深入研究”。后來(lái)我才知道面試官其實(shí)更看重的是你面對(duì)未知知識(shí)時(shí)的思路和態(tài)度而不是你真的什么都會(huì)。坦誠(chéng)承認(rèn)不會(huì)再給出基于已有知識(shí)的推理過(guò)程會(huì)讓面試官看到你的學(xué)習(xí)能力和邏輯能力。7.3 面試復(fù)盤的必要性與具體方法每輪面試結(jié)束后的24小時(shí)內(nèi)我會(huì)把所有被問(wèn)到的問(wèn)題和我的回答記錄下來(lái)。很多細(xì)節(jié)如果不及時(shí)記錄過(guò)兩天就忘了。這個(gè)習(xí)慣幫我發(fā)現(xiàn)了兩個(gè)規(guī)律一是同一家公司的面試官會(huì)圍繞簡(jiǎn)歷中的某個(gè)特定項(xiàng)目反復(fù)追問(wèn)說(shuō)明他們內(nèi)部會(huì)共享上輪面試的記錄二是每輪面試的側(cè)重點(diǎn)有明顯差異一面偏基礎(chǔ)后面逐漸深入業(yè)務(wù)和架構(gòu)在準(zhǔn)備后續(xù)面試時(shí)可以針對(duì)性調(diào)整重點(diǎn)。復(fù)盤的具體方法把面試問(wèn)題分成會(huì)答、答得模糊、完全不會(huì)三類。會(huì)答的不用管答得模糊的內(nèi)容當(dāng)天就查資料弄懂完全不會(huì)的內(nèi)容根據(jù)問(wèn)題主題系統(tǒng)性學(xué)習(xí)。這個(gè)方法讓我在連續(xù)多輪面試中的表現(xiàn)越來(lái)越穩(wěn)定。7.4 心態(tài)管理經(jīng)驗(yàn)面試周期短則兩周長(zhǎng)則一個(gè)多月心態(tài)波動(dòng)是正常的。我經(jīng)歷了一個(gè)很有意思的心態(tài)變化早期面試特別緊張總覺(jué)得面試官在考我后來(lái)我把角色轉(zhuǎn)換了一下把面試當(dāng)成一次技術(shù)交流面試官是在和我討論一個(gè)共同感興趣的議題我是去分享經(jīng)驗(yàn)和想法的而不只是去做題。這個(gè)心態(tài)轉(zhuǎn)變后表達(dá)的松弛感和邏輯清晰度都明顯提升了。最后想說(shuō)的是面經(jīng)永遠(yuǎn)是別人的適合自己的面試節(jié)奏和表達(dá)方式需要自己通過(guò)實(shí)踐打磨出來(lái)。我寫這篇內(nèi)容不是想說(shuō)“照這樣做就能進(jìn)大廠”而是希望把你可能遇到的問(wèn)題提前攤開(kāi)來(lái)看讓你在實(shí)際面試時(shí)多一分從容。祝面試順利。