每年秋招的節(jié)奏都像打仗小米這輪前端崗筆試我是在九月中旬收到的通知。說實話看到“第二批筆試”這幾個字的時候反而比第一批更緊張——因為這意味著網(wǎng)上已經(jīng)有很多人討論過題型和難度了你要是沒刷到這些信息等于裸考。我屬于那種考前一定要把信息都摸透的類型所以這篇復(fù)盤我會把“怎么準(zhǔn)備”、“考什么”、“怎么答”幾個層面串起來寫既記錄我的真實經(jīng)歷也盡量說點對后來人有用的東西。一個值得先說清楚的結(jié)論小米前端崗的筆試重點不在算法難不難而在基礎(chǔ)扎不扎實。它不像有些大廠上來就是hard題勸退但選擇題覆蓋面極廣手寫題又非?？简炦吔缫庾R整體風(fēng)格是“你好像都見過但一寫就漏”。這篇文章適合正在準(zhǔn)備秋招春招的前端同學(xué)也適合想了解大廠校招筆試真實節(jié)奏的朋友參考。1. 筆試前一周確認(rèn)形式、準(zhǔn)備環(huán)境、劃定復(fù)習(xí)范圍1.1 第一批考完后的信息收集我是第二批筆試時間排在工作日的晚上和第一批間隔了四天。這四天非常關(guān)鍵因為第一批考完當(dāng)晚牛客、脈脈、小紅書就會有人發(fā)帖子。我不是鼓勵大家去找原題而是要通過這些討論判斷三件事題量、題型分布、編程題用不用核心代碼模式。我當(dāng)時收集到的信息歸納下來是這樣的選擇題約二十道涵蓋JS基礎(chǔ)、CSS、瀏覽器原理、網(wǎng)絡(luò)協(xié)議、少量框架題編程題兩道一道偏手寫實現(xiàn)一道偏算法總時長一百分鐘左右。這個信息幫我做了兩個決定第一復(fù)習(xí)重點從“刷難題”轉(zhuǎn)向“過基礎(chǔ)”第二提前在牛客上練了幾套模擬題適應(yīng)平臺那套代碼編輯器的手感。說實話如果你連考試系統(tǒng)都沒用過直接在正式筆試?yán)锘ㄊ昼姼忝靼状痤}界面怎么切題、代碼怎么運(yùn)行那太虧了。1.2 考試平臺與環(huán)境細(xì)節(jié)小米這批筆試用的是?？偷脑诰€筆試系統(tǒng)。這類系統(tǒng)有幾個共同特點選擇題可以標(biāo)記回頭再看編程題只能本地調(diào)試后粘貼提交或者直接在網(wǎng)頁編輯器里寫。我建議編程題直接在網(wǎng)頁編輯器里寫因為本地編輯器有代碼提示、有習(xí)慣的快捷鍵一旦復(fù)制粘貼出了格式問題反而不容易發(fā)現(xiàn)。另外一個細(xì)節(jié)是攝像頭監(jiān)控。筆試要求全程開啟攝像頭環(huán)境要安靜、光線不能太暗桌面不能有筆和紙之外的東西。我當(dāng)時把桌面清理得很干凈連水杯都放地上了省的萬一誤判就麻煩。還有一點容易被忽略提前測網(wǎng)速別考試中途斷線。我用的有線網(wǎng)絡(luò)把筆記本充電器也插好了因為筆試和面試不一樣筆試一斷線系統(tǒng)可能直接判定交卷申訴流程極其折騰。1.3 復(fù)習(xí)范圍怎么劃一周時間不可能面面俱到我的策略是把高頻考點列出來按“必看、了解、放棄”三檔切分。必看的內(nèi)容包括JavaScript事件循環(huán)、閉包、原型鏈、this指向、異步方案演進(jìn)CSS三欄布局、flex與grid、BFC、層疊上下文HTTP緩存機(jī)制、跨域方案、瀏覽器渲染流程React Hooks使用規(guī)則、Vue響應(yīng)式原理的基本描述。了解的內(nèi)容包括TypeScript的泛型和工具類型、Webpack的loader和plugin區(qū)別、前端工程化常見概念。放棄的內(nèi)容包括復(fù)雜的CSS動畫、Canvas底層API、Node.js服務(wù)端細(xì)節(jié)。很多人準(zhǔn)備校招筆試喜歡直接刷LeetCode但前端崗的筆試和純后端算法崗不一樣選擇題占比高考得雜只刷題不復(fù)習(xí)八股文等于只練了半條腿。我當(dāng)時每天把時間切成兩塊白天刷三到四道LeetCode熱題加看手寫題源碼晚上集中過兩到三個前端知識點畫成筆記。這套節(jié)奏比較適合筆試周期短的情況。2. 選擇題里的高頻考點哪些八股文值得背哪些可以放棄2.1 JavaScript語言特性考點小米這批選擇題里JavaScript部分大概占了百分之四十。具體來說閉包和this指向幾乎必考事件循環(huán)至少出現(xiàn)兩到三題原型鏈和new的實現(xiàn)邏輯也有一道。舉個例子關(guān)于this指向的題一般長這樣給一段代碼里面有普通函數(shù)、箭頭函數(shù)、對象方法問最終輸出結(jié)果。這類題看起來很基礎(chǔ)但正確率其實不高因為箭頭函數(shù)的this是在定義時確定的普通函數(shù)的this要看調(diào)用方式再加上嚴(yán)格模式和非嚴(yán)格模式的差異四個選項各有道理。我復(fù)習(xí)時會拿一張A4紙把所有調(diào)用方式列出來直接調(diào)用、對象方法調(diào)用、call/apply調(diào)用、new調(diào)用、回調(diào)函數(shù)調(diào)用每種情況對應(yīng)什么this寫上兩遍就記住了。事件循環(huán)的題則是另一個重災(zāi)區(qū)。它通常會混合setTimeout、Promise、async/await、微任務(wù)、宏任務(wù)還要考慮代碼的執(zhí)行順序。做這類題我有一個笨辦法先畫一條時間軸把宏任務(wù)按出現(xiàn)順序排好再在宏任務(wù)里面標(biāo)注微任務(wù)隊列。把Node環(huán)境下的process.nextTick和瀏覽器環(huán)境的queueMicrotask區(qū)別也理一下雖然筆試不一定考但面試一定會問。原型鏈的考點主要集中在構(gòu)造函數(shù)的prototype、實例的__proto__、以及Object.create的用法。我記得有一道題是給出一個繼承關(guān)系問某個屬性在哪里能找到屬于典型的“你懂原型鏈就秒選、不懂就全靠蒙”的題。建議把下面的代碼自己在腦子里過一遍過不了就動手寫function Parent() { this.name parent; } Parent.prototype.say function() { console.log(this.name); }; function Child() { this.age 18; } Child.prototype new Parent(); Child.prototype.constructor Child;這樣設(shè)置的繼承Child實例可以調(diào)用say方法并且child.constructor指向Child而不是Parent。這幾個結(jié)論連在一起比死記硬背強(qiáng)得多。2.2 瀏覽器、網(wǎng)絡(luò)與CSS瀏覽器和網(wǎng)絡(luò)的部分占比也不低。HTTP緩存是必考項強(qiáng)緩存和協(xié)商緩存的字段要背熟Cache-Control的max-age、no-cache、no-store分別干什么ETag和Last-Modified的優(yōu)先級誰高304出現(xiàn)的場景是什么?？缬騿栴}也考了一道選項大概是從“CORS、JSONP、postMessage、WebSocket”里挑一個滿足某場景的方案。我記得還考了cookie和localStorage的區(qū)別、瀏覽器從輸入URL到頁面渲染的整個過程。CSS部分三欄布局那類題換了個外殼出現(xiàn)。不是直接讓你寫布局而是給一段flex代碼問最終效果。flex的flex-grow、flex-shrink、flex-basis組合起來確實容易迷糊建議復(fù)習(xí)的時候記三條規(guī)則flex-basis定基準(zhǔn)尺寸、flex-grow管放大比例、flex-shrink管縮小比例缺省值分別是auto、0、1。BFC也考了問的是哪幾種方式能形成BFCoverflow:hidden、display:flow-root、position:absolute這些都要能選出來。選擇題的特點是答案相對固定不需要寫理由但容錯率低。每道題大概值兩到三分錯五道就等于丟掉了一道編程題的分?jǐn)?shù)。我當(dāng)時給自己定的目標(biāo)是選擇題正確率百分之八十以上因為編程題不確定性太高選擇題的分?jǐn)?shù)必須拿穩(wěn)。2.3 框架題的占比與應(yīng)對方式3. 手寫代碼題從用例設(shè)計到邊界條件的小坑3.1 防抖節(jié)流的兩種寫法對比3.2 深拷貝的完整實現(xiàn)與隱藏考點3.3 手寫題作答的展示策略4. 算法題復(fù)盤一道滑動窗口題目的完整思考過程4.1 拿到題先問三個問題4.2 從暴力解到滑動窗口的推導(dǎo)4.3 時間復(fù)雜度的取舍與筆試判題機(jī)制5. 筆試過程中的節(jié)奏管理和意外情況處理5.1 時間分配方案5.2 遇到不會的題和編譯報錯怎么辦5.3 考后及時復(fù)盤為面試做鋪墊手寫題是前端崗筆試最有區(qū)分度的部分它不看你會不會背就看你能不能在白板狀態(tài)下寫出能跑的代碼。小米這批的手寫題風(fēng)格偏實用不像有些廠讓你手寫一個完整的Promise或者發(fā)布訂閱。我記得自己遇到的是兩個很經(jīng)典的題目方向防抖/節(jié)流的實現(xiàn)以及深拷貝的實現(xiàn)。這類題平時寫業(yè)務(wù)的時候經(jīng)常用到但真要你從零手寫很多人反而寫不完整。3.1 防抖節(jié)流的兩種寫法對比先說說防抖和節(jié)流。防抖的核心思想是“一定時間內(nèi)多次觸發(fā)只執(zhí)行最后一次”節(jié)流的核心思想是“一定時間內(nèi)最多執(zhí)行一次”。筆試的時候經(jīng)常讓你二選一或者先寫防抖再寫節(jié)流。很多人的誤區(qū)是背了一個版本結(jié)果沒注意是否支持參數(shù)傳遞、是否帶立即執(zhí)行選項。一個相對完整的防抖實現(xiàn)是這樣function debounce(fn, delay 300, immediate false) { let timer null; return function(...args) { const context this; if (timer) clearTimeout(timer); if (immediate) { const callNow !timer; timer setTimeout(() { timer null; }, delay); if (callNow) fn.apply(context, args); } else { timer setTimeout(() { fn.apply(context, args); }, delay); } }; }這個寫法里面有三個容易被忽略的細(xì)節(jié)第一this要保留很多面試官會追問箭頭函數(shù)能不能用在這里第二immediate參數(shù)控制是否立即執(zhí)行這個在實際業(yè)務(wù)里很常用比如按鈕點擊防重復(fù)提交第三定時器執(zhí)行完之后要把timer置空否則下一次callNow的判斷會出錯。節(jié)流我常用時間戳版本function throttle(fn, interval 300) { let last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }時間戳版本有個特性第一次觸發(fā)會立即執(zhí)行最后一次觸發(fā)如果沒到間隔時間會丟掉。如果不想丟最后的調(diào)用可以用定時器版但筆試一般不會要求雙觸發(fā)邊界寫清楚一種加注釋說明即可。這類手寫題真正加分的地方不一定是你寫得多完美而是你代碼里體現(xiàn)了對邊界情況的思考。我在代碼注釋里標(biāo)注了“保留this指向”和“支持立即執(zhí)行選項”閱卷官假設(shè)是人工在看也會覺得你平時不是死記硬背是真正理解了這個工具函數(shù)。3.2 深拷貝的完整實現(xiàn)與隱藏考點深拷貝這道題看著簡單其實考的是你的知識網(wǎng)夠不夠密。很多人一上來就寫JSON.parse(JSON.stringify())這當(dāng)然也是深拷貝但它的缺陷非常明顯遇到undefined、function、Symbol會被忽略遇到Date會變成字符串遇到循環(huán)引用會直接報錯。如果筆試題目里面的測試用例包含這些類型這個寫法一定是過不了全部用例的。一個能覆蓋大多數(shù)場景的手寫深拷貝如下function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) { return target; } if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target.source, target.flags); if (map.has(target)) { return map.get(target); } const clone Array.isArray(target) ? [] : {}; map.set(target, clone); Reflect.ownKeys(target).forEach((key) { clone[key] deepClone(target[key], map); }); return clone; }這個版本里最值得說的就是WeakMap的使用——它的作用不是緩存數(shù)據(jù)而是處理循環(huán)引用。假如對象a里面引用了bb里面又引用了a不做處理就會無限遞歸下去。用一個WeakMap把已拷貝的源對象和克隆對象對應(yīng)存起來再次遇到同一個引用時直接返回之前克隆好的對象遞歸就終止了。還有Reflect.ownKeys這個API它會把普通字符串屬性和Symbol屬性一起枚舉出來這是Object.keys做不到的。如果考到Symbol作為屬性名的克隆用Object.keys的寫法直接漏數(shù)據(jù)。至于為什么用WeakMap而不是Map是因為WeakMap的key是弱引用不會影響垃圾回收用Map在這個場景里也不會出錯但面試官問了能答上來就是加分項。3.3 手寫題作答的展示策略手寫題和算法題在作答上有本質(zhì)區(qū)別。算法題只看結(jié)果對不對手寫題大概率存在閱卷環(huán)節(jié)代碼風(fēng)格、注釋、變量命名都會被看在眼里。我的策略有三個第一提前寫注釋。不是把整段代碼注釋滿而是在關(guān)鍵判斷處寫一句“// 處理循環(huán)引用”“// 保留this指向”讓閱卷人一眼看到你的思路。第二先用最保守的方式把核心功能跑通再補(bǔ)邊界。不要一上來就寫一個很復(fù)雜的版本結(jié)果語法都報錯。第三考慮性能和可讀性的平衡。深拷貝用遞歸是標(biāo)準(zhǔn)做法但如果遞歸層數(shù)很深會棧溢出能提到用迭代法的思路作為后續(xù)優(yōu)化方向?qū)懺谧⑨尷镆沧銐蛄?。手寫題最怕的不是寫不出來而是寫了一半發(fā)現(xiàn)思路有問題劃掉重寫最后交上去的代碼只能用三個字形容——一團(tuán)糟。我建議先在草稿紙上把思路的關(guān)鍵節(jié)點寫出來再往編輯器里謄。算法題這部分我運(yùn)氣不算好遇到的一道題需要一點思考量但也沒有到勸退的地步。具體題目細(xì)節(jié)我記不太清了但類型是無重復(fù)字符的最長子串算是LeetCode上的熱門題考的就是滑動窗口這個經(jīng)典思路。這類題對有準(zhǔn)備的人是送分題但對沒刷過的人就是完全沒思路。4.1 拿到題先問三個問題看到算法題的完整描述之后我先逼自己回答三個問題輸入規(guī)模大概多大、返回的是什么類型的結(jié)果、有沒有明顯的特殊邊界需要單獨處理。輸入規(guī)模決定你能不能放心用O(n^2)的解法。如果n在500以內(nèi)暴力解可能都能過n到10^4基本就要往O(nlogn)下面去想了n到了10^5線性解法是必須的。有些筆試題會故意不給你數(shù)據(jù)范圍這時候默認(rèn)按比較大的規(guī)模處理優(yōu)先寫線性或近似線性的解法。邊界條件方面我每次都提醒自己檢查空字符串、全部字符相同、全部字符都不相同、字符串只有一位。這幾個用例分別覆蓋了滑窗的初始化、左右指針移動、更新邏輯的極端情況。4.2 從暴力解到滑動窗口的推導(dǎo)“無重復(fù)字符的最長子串”這道題最直觀的解法是枚舉所有起始位置然后從每個位置往后擴(kuò)展擴(kuò)展過程中用Set記錄出現(xiàn)過的字符一旦發(fā)現(xiàn)重復(fù)就停止記錄當(dāng)前長度。這個方案的正確性沒問題但最壞時間復(fù)雜度是O(n^2)當(dāng)字符串長度到10^5級別的時候很大概率超時。滑動窗口的思路本質(zhì)上是對暴力解的優(yōu)化既然右指針掃過的字符已經(jīng)記錄了左指針只需要重復(fù)字符出現(xiàn)之后跳過去不需要回到前面的位置重新遍歷。代碼寫出來就是一套雙指針加一個Setfunction lengthOfLongestSubstring(s) { const set new Set(); let left 0; let maxLen 0; for (let right 0; right s.length; right) { while (set.has(s[right])) { set.delete(s[left]); left; } set.add(s[right]); maxLen Math.max(maxLen, right - left 1); } return maxLen; }這段代碼的思路可以概括為右指針逐個擴(kuò)展窗口一旦遇到重復(fù)字符就把左指針往右移動直到窗口里沒有重復(fù)字符為止。每次右指針移動后都計算一次窗口大小不斷更新最大值。整個過程中左右指針都只往前走時間復(fù)雜度是O(n)。我當(dāng)時的思考路徑是先想到暴力解然后發(fā)現(xiàn)暴力解重復(fù)掃描了很多無效區(qū)間接著想到如果用Set記錄當(dāng)前窗口內(nèi)的字符左指針跳轉(zhuǎn)的時候就不需要從頭再來。這個過程也是面試官最想聽的“解題過程”但筆試只認(rèn)最終代碼所以如果你在注釋里寫清楚這是滑動窗口閱卷觀感會好很多。4.3 時間復(fù)雜度的取舍與筆試判題機(jī)制筆試判題只看代碼能不能在規(guī)定時間內(nèi)跑完所有用例。你寫一個O(n^2)的暴力解如果全用例通過照樣滿分你寫一個O(n)的滑動窗口只要有語法錯誤照樣零分。所以筆試策略上優(yōu)先保證能跑通其次才追求最優(yōu)解。但如果時間允許我建議把暴力解和優(yōu)化解都留在草稿上實際提交時用優(yōu)化解。為什么因為有些筆試題的最后幾個用例是專門針對暴力解設(shè)計的超大數(shù)據(jù)暴力解跑不過去。我個人的習(xí)慣是前五分鐘寫一個暴力解確保思路正確然后立刻評估它的復(fù)雜度如果判斷可能會超時再寫優(yōu)化版本。另外一個經(jīng)驗是盡量別用遞歸寫深度不確定的算法。遞歸雖然沒有硬件棧那么嚴(yán)格但在?？瓦@類系統(tǒng)里過深的遞歸會導(dǎo)致調(diào)用棧溢出而這道題完全可以用迭代寫。能用循環(huán)就用循環(huán)能不用遞歸就不用遞歸這是在線判題環(huán)境下最穩(wěn)妥的選擇。筆試現(xiàn)場的時間節(jié)奏其實比很多人想象得緊張。不是說題目難到做不完而是你需要在有限時間內(nèi)把會的題都穩(wěn)定發(fā)揮出來不因為慌亂而丟分。這里分享一些我實際操作下來的時間分配和臨場策略。5.1 時間分配方案一百分鐘我的分配是這樣的選擇題控制在四十五分鐘以內(nèi)手寫題三十分鐘算法題三十分鐘最后留五到十分鐘檢查。選擇題遇到拿不準(zhǔn)的先標(biāo)記一下別死磕因為后面做編程題時可能突然想起來某個知識點。編程題我習(xí)慣先把兩道題都掃一眼判斷哪道題更順手。手寫題和算法題如果水平差不多先做手寫題。手寫題是“熟悉題型”先把穩(wěn)定的分拿住算法題可能存在思路卡殼的風(fēng)險放到后面心態(tài)會更穩(wěn)。但如果算法題一眼就看出了思路、手寫題反而沒把握那就按“先易后難”原則先做算法題。這個沒有絕對標(biāo)準(zhǔn)核心是先拿能拿的分。檢查環(huán)節(jié)被很多人忽略但實際上非常關(guān)鍵。檢查什么呢一是代碼有沒有未定義的變量二是有沒有邏輯邊界遺漏三是注釋和題目要求是否一致。有時候你在草稿上想的和實際寫進(jìn)編輯器的完全是兩回事用最后幾分鐘讀一遍代碼能挽回不少冤枉分。5.2 遇到不會的題和編譯報錯怎么辦筆試時遇到完全沒思路的題最忌諱的是坐著發(fā)呆。我的做法是先把輸入和輸出用簡單的示例跑一遍再嘗試用暴力解去套哪怕只能通過一部分用例也比零分強(qiáng)。有時候暴力解寫著寫著思路反而順了從暴力解優(yōu)化出正確解的情況并不少見。編譯報錯則是另一回事。在線筆試系統(tǒng)對語法錯誤的提示往往不如本地IDE友好報錯信息看不太懂的時候先檢查幾個高頻錯誤點分號是不是漏了、括號是不是匹配的、變量名是不是大小寫不一致。如果是運(yùn)行結(jié)果不對在關(guān)鍵位置插入一個console.log看中間狀態(tài)比靠肉眼看代碼快得多。還有一個容易被人忽略的坑?？瓦@類系統(tǒng)的輸入輸出格式是固定的。如果題目要求讀一行整數(shù)你的代碼寫成讀一個字符串再split會導(dǎo)致格式錯誤。這類題我建議提前在?？蜕暇殠椎垒斎胼敵瞿０孱}熟悉readline的使用方式別把時間浪費在調(diào)試IO上。5.3 考后及時復(fù)盤為面試做鋪墊筆試結(jié)束不等于事情結(jié)束。我會在自己還能記住題目的時候把所有題目按“做對、做錯、蒙對、沒思路”四類整理一遍。做錯的題不一定是沒掌握可能是考場太緊張看錯了題目條件蒙對的題更要重視因為面試問到同類型問題立刻露餡。整理完之后我會把每一類題目對應(yīng)到相應(yīng)的知識點判斷自己哪一塊是薄弱環(huán)節(jié)?！白鲥e”的題涉及原型鏈那就抽時間重新過一遍原型鏈的常見問法“沒思路”的算法題是動態(tài)規(guī)劃那就補(bǔ)幾道經(jīng)典DP題找感覺。這個環(huán)節(jié)看似消耗時間但實際上非常高效——它讓你下一次筆試或面試前的復(fù)習(xí)變得非常有針對性。還有一點考完出結(jié)果之前的空窗期一邊等通知一邊積累項目經(jīng)驗別把秋招的節(jié)奏停在筆試結(jié)束。小米的面試一般會問項目、問基礎(chǔ)、問場景題筆試點出的薄弱點正好是接下來要補(bǔ)的面試考點?；仡^看這場筆試我最大的感受是前端崗的筆試不拼題海戰(zhàn)術(shù)拼的是廣度夠不夠全、細(xì)節(jié)夠不夠細(xì)。選擇題考察的是你對常見API和原理理解的準(zhǔn)確性手寫題考察的是邊界意識和編碼習(xí)慣算法題則考察分析問題的路徑。這三個層面沒有一個是臨時抱佛腳能解決的都需要前面幾年或者幾個月的持續(xù)輸入。最后再分享一個小技巧筆試前我會把前端核心知識點的標(biāo)題列在一張思維導(dǎo)圖上考試中一旦遇到糾結(jié)的選項就在腦中定位到相應(yīng)的知識點分支回憶我當(dāng)時寫下的關(guān)鍵結(jié)論。這個方法幫我避免了很多“憑感覺做題”的情況也推薦給即將參加校招筆試的同學(xué)。