筆試拿到手里那一刻屏幕上全是密密麻麻的選擇題和兩道算法題時間兩小時旁邊的同學(xué)已經(jīng)開始噼里啪啦敲鍵盤了。說實話第四范式那年前端筆試的難度放在今天看依然不算低——不是因為題目偏、怪而是它特別擅長把“你覺得自己會”的知識點換一個角度問到你說不出話。這篇文章不打算復(fù)刻當(dāng)年的原卷題目因為這類內(nèi)容涉及保密協(xié)議網(wǎng)上流傳的版本也殘缺不全。我想做的是把那年校招前端筆試真正的考點脈絡(luò)拆解出來——它考了什么、為什么考、底層在考察什么能力以及如果你要備戰(zhàn)類似的人工智能公司前端崗應(yīng)該如何體系化準(zhǔn)備。第四范式是做機器學(xué)習(xí)和人工智能平臺的公司這類公司的前端崗位有一個明顯特征不追求花哨的頁面表現(xiàn)而是極度看重你對計算機基礎(chǔ)、JavaScript語言本質(zhì)、瀏覽器原理的掌握程度。換句話說它認(rèn)認(rèn)真真地把前端當(dāng)軟件工程在考而不是當(dāng)“切圖仔”在考。這也是為什么那套題里純CSS布局題少得可憐反而有大量你在日常業(yè)務(wù)開發(fā)中可能從未深究過的“底層題”。下面我會按照當(dāng)年筆試的真實模塊劃分把每個模塊的核心考點、出題意圖和準(zhǔn)備思路完整拆開講。這篇文章里的題目均為基于公開考點和歷年考生回憶的“同源變體”目的不是讓你背題而是讓你知道這類題應(yīng)該怎么思考。1. 選擇題里的“陷阱藝術(shù)”你以為會其實一直在踩坑第四范式筆試的選擇題部分是整套題里最陰險的。它不考什么偏門API所有考點都在你日常開發(fā)中反復(fù)遇到但換個問法之后錯誤率能到七成以上。我一位當(dāng)年參加筆試的朋友出了考場跟我復(fù)盤最后一句是“這些題我全見過但全選錯了”——這就是它的出題邏輯用最熟悉的知識點制造最隱蔽的思維盲區(qū)。1.1 JavaScript變量提升與閉包看似送分實際全是坑先看這一類題目的經(jīng)典變體幾乎每一份前端筆試題里都會出現(xiàn)但第四范式的考法更細(xì)致。比如var a []; for (var i 0; i 10; i) { a[i] function () { console.log(i); }; } a[6]();如果你脫口而出“6”那這道題的分?jǐn)?shù)就沒了。正確答案是10因為var聲明的i屬于函數(shù)作用域循環(huán)結(jié)束后i已經(jīng)是10所有閉包捕獲的都是同一個變量。這類題的進階版會繼續(xù)延伸把var換成let、把函數(shù)換成箭頭函數(shù)、把console.log換成setTimeout每一種變化背后考察的都是對作用域和執(zhí)行上下文的真正理解。還有一類高頻變形題是這樣——它們不再直接問你輸出什么而是要求你判斷某個函數(shù)調(diào)用后外部變量是否被修改。比如function change(obj) { obj.name paradox; obj { name: new }; } let person { name: origin }; change(person); console.log(person.name);這道題考的是引用傳遞的邊界問題。很多人知道對象是按引用傳遞的就誤以為obj { name: new }也會影響外部變量。但實際上面試官想考的是你修改的是“對象的內(nèi)容”還是“引用的指向”。obj.name paradox改的是堆內(nèi)存里那個對象本身外部person自然跟著變obj { name: new }只是讓obj這個參數(shù)變量重新指向了一塊新內(nèi)存原來的對象毫發(fā)無損。所以結(jié)果是paradox。這種題說穿了其實是在考“值傳遞和引用傳遞的本質(zhì)區(qū)別”而很多教材對這一塊的表述是含糊的——嚴(yán)格來說JavaScript里一切參數(shù)傳遞都是值傳遞只不過當(dāng)值是對象時傳遞的是“指向該對象的引用”的副本。我當(dāng)時給的準(zhǔn)備建議是不要靠背誦理解這類題一定要在瀏覽器控制臺里親手改代碼、跑結(jié)果、再改回來反復(fù)幾次你才會對“引用副本”和“對象本身”產(chǎn)生肌肉記憶。面試筆試時時間是有限的如果你連這類基礎(chǔ)題都要靠推理而非直覺后面的大題基本寫不完。1.2 作用域鏈、this指向與箭頭函數(shù)高頻但不是送分題筆試選擇題里this指向的題目出現(xiàn)頻率極高。套路無非三種普通函數(shù)調(diào)用、對象方法調(diào)用、構(gòu)造函數(shù)調(diào)用——分別對應(yīng)this指向全局、指向?qū)ο?、指向新?chuàng)建的對象。但第四范式這類公司通常會把this和箭頭函數(shù)混在一起考讓你對比兩段幾乎一樣的代碼輸出結(jié)果卻完全不同。var obj { name: paradox, getName: function () { return this.name; }, getNameArrow: () { return this.name; } }; console.log(obj.getName()); console.log(obj.getNameArrow());obj.getName()輸出paradox這沒問題。但obj.getNameArrow()輸出的是undefined——箭頭函數(shù)本身沒有自己的this它捕獲的是定義時所在作用域的this也就是全局對象。如果全局對象里沒有name屬性結(jié)果就是undefined。這里幾乎所有人都知道箭頭函數(shù)的this是詞法作用域但真放到對象方法里對比時依然有一大半人會答錯。更進階的變體還會把this和原型鏈結(jié)合function Person(name) { this.name name; } Person.prototype.getName function () { return this.name; }; const p new Person(paradox); const fn p.getName; console.log(fn());這道題當(dāng)年答錯的人非常多。fn只是對方法的引用調(diào)用時this已經(jīng)不再是p了而是全局對象所以結(jié)果是undefined。它考的是this綁定里最容易忽略的一條鐵律函數(shù)被調(diào)用時this的指向取決于調(diào)用方式而不是定義位置。一旦函數(shù)被解引用、賦值、當(dāng)作回調(diào)傳入this基本就丟了。針對這類考點我建議你別只刷題。把JS的call、apply、bind三個方法的區(qū)別寫在筆記本上然后手寫一遍模擬bind的實現(xiàn)。這個過程會逼你認(rèn)真理解函數(shù)調(diào)用時的this綁定過程。當(dāng)年我就是這么練的后來遇到所有this指向的題目基本不用過腦子直接套“調(diào)用時綁定”和“箭頭函數(shù)詞法綁定”兩條規(guī)則就能鎖定答案。1.3 事件循環(huán)與異步AI公司的必考項目人工智能公司的前端筆試幾乎必考事件循環(huán)。原因很簡單機器學(xué)習(xí)平臺的很多場景是實時展示訓(xùn)練進度、流式請求長連接、大規(guī)模數(shù)據(jù)可視化的動態(tài)刷新這些全都依賴對異步機制的正確理解。筆試?yán)镒畛Ｒ姷目挤ú⒉皇亲屇惚澈耆蝿?wù)微任務(wù)列表而是給出幾段相互嵌套的setTimeout和Promise執(zhí)行順序讓你排序。setTimeout(() { console.log(timeout1); Promise.resolve().then(() { console.log(promise1); }); }, 0); Promise.resolve().then(() { console.log(promise2); setTimeout(() { console.log(timeout2); }, 0); });輸出順序是promise2 → timeout1 → promise1 → timeout2。核心邏輯是同步代碼先執(zhí)行完畢接著清空當(dāng)前微任務(wù)隊列promise2然后取一個宏任務(wù)執(zhí)行timeout1timeout1執(zhí)行過程中產(chǎn)生的微任務(wù)promise1會在下一個宏任務(wù)timeout2之前被清空。這里有一個極其容易踩的坑有人會把“微任務(wù)優(yōu)先于宏任務(wù)”錯誤理解為“所有微任務(wù)永遠(yuǎn)在所有宏任務(wù)之前”。實際上每執(zhí)行完一個宏任務(wù)都會重新檢查微任務(wù)隊列并全部清空然后再取下一個宏任務(wù)。也就是說宏任務(wù)和微任務(wù)的交替是嵌套進行的而不是分成兩個獨立的階段。筆試?yán)镏灰霈F(xiàn)Promise里面再包setTimeout或者setTimeout里再包Promise考的就是這個交替機制。準(zhǔn)備這類題目不要靠背“幾個宏任務(wù)幾個微任務(wù)”的結(jié)論建議自己畫一張“事件循環(huán)時間線圖”把代碼執(zhí)行過程拆成同步段、微任務(wù)段、宏任務(wù)段每處理一個任務(wù)就重新檢查微任務(wù)隊列反復(fù)畫三五張你就能建立一套自己的分析流程。當(dāng)年筆試前我專門練過幾十道這類題后來面對更復(fù)雜的組合題也能快速拆解。2. 手寫代碼題看著簡單但你要寫出“有工程素養(yǎng)”的代碼第四范式筆試題的手寫代碼部分和普通小公司的“手寫一個防抖節(jié)流”完全不是一個層次。它要求的是在有限時間內(nèi)寫出健壯、可擴展、有邊界處理的完整函數(shù)而不是只寫出核心邏輯。閱卷人一眼就能看出你是背過代碼還是真正理解。2.1 手寫實現(xiàn)防抖與節(jié)流不是背代碼而是理解場景防抖和節(jié)流是前端筆試的常青樹第四范式幾乎每年都有。先說防抖的核心定義在事件被連續(xù)觸發(fā)時只有在最后一次觸發(fā)后的等待時間內(nèi)沒有再次觸發(fā)才執(zhí)行函數(shù)。典型場景是搜索框輸入聯(lián)想用戶停止輸入500毫秒后才發(fā)送請求。一個合格的防抖實現(xiàn)至少要考慮三件事this指針的正確保留、事件參數(shù)的傳遞、以及取消能力。如果面試官在里面加一個“立即執(zhí)行”選項——第一次觸發(fā)時立即執(zhí)行之后連續(xù)觸發(fā)都重置計時器那多數(shù)人當(dāng)場露餡。我當(dāng)時總結(jié)的寫法function debounce(func, wait, immediate) { let timer null; return function (...args) { const context this; const callNow immediate !timer; if (timer) clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) func.apply(context, args); }, wait); if (callNow) func.apply(context, args); }; }節(jié)流則不同它的核心是限制函數(shù)的執(zhí)行頻率保證在指定時間間隔內(nèi)最多執(zhí)行一次。經(jīng)典場景是滾動事件里判斷是否加載更多。實現(xiàn)方式有“時間戳版”和“定時器版”兩種時間戳版的優(yōu)點是第一次會立即執(zhí)行缺點是停止觸發(fā)后最后一次調(diào)用會被丟棄定時器版恰恰相反最后一次會被執(zhí)行但第一次會有延遲。筆試題目如果只要求“手寫節(jié)流”寫出其中一種并講清楚缺陷基本就能拿滿分。但如果你能主動說“時間戳版適合拖拽場景定時器版適合動畫場景兩者可以結(jié)合成有頭有尾的加強版”這就能拉開和普通考生的差距。我當(dāng)時還專門寫了一個帶leading和trailing配置項的版本function throttle(func, wait, options {}) { let timer null; let previous 0; return function (...args) { const context this; const now Date.now(); if (!previous options.leading false) previous now; const remaining wait - (now - previous); if (remaining 0) { if (timer) { clearTimeout(timer); timer null; } previous now; func.apply(context, args); } else if (!timer options.trailing ! false) { timer setTimeout(() { previous options.leading false ? 0 : Date.now(); timer null; func.apply(context, args); }, remaining); } }; }這一版不僅處理了首次和末次觸發(fā)的邊界情況代碼的可讀性也更好。寫這類代碼時哪怕筆試環(huán)境不要求你運行也建議在注釋里簡單標(biāo)注每一塊的意圖。閱卷人看得出來你是“背的”還是“懂的”。2.2 手寫深拷貝從“能用”到“穩(wěn)”的進階之路深拷貝在前端筆試?yán)锍霈F(xiàn)的概率極高但大多數(shù)人第一反應(yīng)是JSON.parse(JSON.stringify(obj))。這條捷徑能應(yīng)付純JSON數(shù)據(jù)但一旦遇到undefined、function、Symbol、Date、RegExp、循環(huán)引用它就會暴露出嚴(yán)重問題。第四范式這類公司的筆試題不會直接問你“寫一個深拷貝”而是給你一個包含上述特殊類型的對象讓你寫一個函數(shù)能完整拷貝——這就是在逼你考慮所有邊界情況。一個比較完整的深拷貝實現(xiàn)核心思路是用WeakMap記錄已經(jīng)拷貝過的對象解決循環(huán)引用問題對基本類型直接返回用Object.prototype.toString判斷類型分別處理Date、RegExp、Map、Set、Array和普通對象。function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (map.has(target)) return map.get(target); const type Object.prototype.toString.call(target); const basicTypes [[object Date], [object RegExp]]; if (basicTypes.includes(type)) { return new target.constructor(target); } if (type [object Map]) { const mapClone new Map(); map.set(target, mapClone); target.forEach((value, key) { mapClone.set(key, deepClone(value, map)); }); return mapClone; } if (type [object Set]) { const setClone new Set(); map.set(target, setClone); target.forEach(value { setClone.add(deepClone(value, map)); }); return setClone; } const clone Array.isArray(target) ? [] : {}; map.set(target, clone); Reflect.ownKeys(target).forEach(key { clone[key] deepClone(target[key], map); }); return clone; }這里Reflect.ownKeys會把Symbol類型的鍵也拿進來這是一個非常討巧的細(xì)節(jié)。很多人寫深拷貝時會忽略Symbol鍵如果筆試題目里故意加一個Symbol屬性能想到用Reflect.ownKeys的考生就寥寥無幾了。另外一個筆試殺手锏是循環(huán)引用。如果不處理調(diào)用棧直接爆掉。用WeakMap而不是Map的原因也很簡單WeakMap的鍵是弱引用不會阻止垃圾回收能避免深拷貝完之后的額外內(nèi)存滯留。我建議你寫這道題時先在注釋里列出“需要處理的類型清單”再逐個分支實現(xiàn)。這樣整體結(jié)構(gòu)清晰閱卷人給你的印象分也會高很多。2.3 手寫事件總線或觀察者模式前端架構(gòu)的縮影觀察者模式和發(fā)布訂閱模式是前端面試?yán)锢@不開的設(shè)計模式考點。第四范式這類做平臺型產(chǎn)品的公司尤其重視這種抽象能力。筆試?yán)锿ǔ鲆坏榔械鹊念}手寫一個EventEmitter需要支持on、off、once和emit。這題表面上考的是API設(shè)計其實考的是三件事事件映射表的數(shù)據(jù)結(jié)構(gòu)設(shè)計、once監(jiān)聽的自動移除、off時的安全性。很多人的實現(xiàn)能跑通基礎(chǔ)場景但一遇到監(jiān)聽函數(shù)在觸發(fā)過程中又被移除的邊界情況就出問題了。我的參考實現(xiàn)class EventEmitter { constructor() { this.events Object.create(null); } on(type, handler) { if (!this.events[type]) this.events[type] []; this.events[type].push(handler); } off(type, handler) { if (!this.events[type]) return; const index this.events[type].indexOf(handler); if (index -1) { this.events[type].splice(index, 1); } } once(type, handler) { const wrapper (...args) { handler.apply(this, args); this.off(type, wrapper); }; this.on(type, wrapper); } emit(type, ...args) { if (!this.events[type] || this.events[type].length 0) return; this.events[type].slice().forEach(handler { handler.apply(this, args); }); } }這里有一個非常重要的細(xì)節(jié)emit里用了slice()復(fù)制了一份監(jiān)聽器數(shù)組。為什么要復(fù)制因為如果某個監(jiān)聽器內(nèi)部調(diào)用了off把后續(xù)的監(jiān)聽器移除正在遍歷的原數(shù)組長度會發(fā)生變化導(dǎo)致跳過某些監(jiān)聽器。用復(fù)制數(shù)組遍歷可以避免這種“遍歷時增刪元素導(dǎo)致行為異常”的問題。這個細(xì)節(jié)筆試?yán)锊灰欢〞嫉降绻阍谧⑨尷飳懨髟蜷喚砣肆⒖讨滥闶钦鎸戇^、踩過坑的人。3. 網(wǎng)絡(luò)與瀏覽器原理從“會用”到“懂得為什么”前端工程師的日常工作離不開HTTP、瀏覽器緩存、渲染原理但這些知識在業(yè)務(wù)開發(fā)中往往被框架和工具鏈掩蓋住了。第四范式的筆試?yán)锞W(wǎng)絡(luò)和瀏覽器相關(guān)的題目分量很重因為人工智能平臺的Web端有大量數(shù)據(jù)和模型文件需要加載性能優(yōu)化是剛需。3.1 HTTP緩存機制強緩存與協(xié)商緩存的完整鏈路關(guān)于HTTP緩存的選擇題第四范式考過的角度特別刁鉆。它不直接問“強緩存和協(xié)商緩存的區(qū)別”而是給出幾種響應(yīng)頭配置讓你判斷瀏覽器是直接使用本地緩存還是發(fā)請求去服務(wù)器驗證。如果發(fā)請求服務(wù)器返回304后瀏覽器接下來怎么做。核心鏈路是這樣的瀏覽器請求資源時先看強緩存Cache-Control是max-age3600還在有效期內(nèi)就完全不會發(fā)請求直接用本地緩存。如果強緩存失效瀏覽器會帶上If-None-Match對應(yīng)ETag或If-Modified-Since對應(yīng)Last-Modified發(fā)請求服務(wù)器返回304時瀏覽器繼續(xù)使用本地緩存但會更新緩存有效期服務(wù)器返回200時內(nèi)容和緩存一并更新。筆試?yán)镒钊菀鬃鲥e的點有三個Cache-Control的優(yōu)先級高于Expires。兩者同時存在時以Cache-Control為準(zhǔn)但很多人只會背“高優(yōu)先級”這個結(jié)論不理解是因為Cache-Control是HTTP/1.1規(guī)范而Expires是HTTP/1.0規(guī)范瀏覽器為了兼容會優(yōu)先采用更現(xiàn)代的字段。no-cache的意思不是“不緩存”而是“每次使用前必須去服務(wù)端驗證”no-store才是真正的不緩存。如果響應(yīng)頭里沒有Cache-Control但設(shè)置了Last-Modified瀏覽器通常會采用啟發(fā)式緩存部分瀏覽器會按(當(dāng)前時間 - Last-Modified時間) * 10%來設(shè)置一個緩存時間。這最后一點是我在真實環(huán)境里抓包驗證過的。比如一張圖片的Last-Modified是一個月前瀏覽器可能在沒有任何顯式緩存頭的情況下自動把這張圖片緩存三天。如果你在筆試題里遇到“沒有緩存相關(guān)響應(yīng)頭但瀏覽器卻用了緩存”的案例考的就是這個啟發(fā)式規(guī)則。3.2 從輸入URL到頁面展示瀏覽器渲染鏈路中的重繪與重排這類題幾乎是國內(nèi)前端筆試的保留項目但第四范式的考法更傾向于“性能優(yōu)化驅(qū)動”它會給出一段CSS或JS操作代碼要求分析這期間觸發(fā)了哪些重排、哪些重繪以及哪些操作可以合并。關(guān)于重排和重繪我建議你理解到一個程度就夠了——重排一定會引起重繪但重繪不一定會引起重排。改變color、background、box-shadow這些只涉及視覺表現(xiàn)但不影響布局的屬性只會觸發(fā)重繪改變width、height、top、left、font-size這些影響元素幾何信息的屬性一定會觸發(fā)重排reflow然后附帶觸發(fā)重繪repaint。筆試中的經(jīng)典考法是這樣一段代碼const el document.getElementById(box); el.style.width 200px; el.style.height 200px; el.style.margin 10px;如果只寫這三行瀏覽器通常會合并成一次重排。但如果中間穿插了讀取布局屬性的操作比如const el document.getElementById(box); el.style.width 200px; const height el.clientHeight; el.style.height 200px;那么el.clientHeight的讀取會強制瀏覽器立即執(zhí)行一次布局來計算準(zhǔn)確值這就會導(dǎo)致第一次重排發(fā)生在讀取時然后修改height又觸發(fā)第二次重排——原本可以被合并的操作被拆成了兩次。這個知識點在筆試題里經(jīng)常以“以下哪段代碼的性能更差”的形式出現(xiàn)。答案永遠(yuǎn)是在一次修改和讀取的循環(huán)里“讀取”破壞了瀏覽器的批量渲染優(yōu)化。我當(dāng)年在準(zhǔn)備這類知識點時在本地用Chrome DevTools的Performance面板跑過對比一次批量的屬性修改渲染耗時可能在幾毫秒但如果循環(huán)里交替進行style修改和offsetHeight讀取會有明顯的Layout次數(shù)飆升。自己動手驗證過一次你會對“強制同步布局”這個概念有非常深的記憶遠(yuǎn)比背十遍筆記有效。3.3 Cookie、localStorage與sessionStorage不再只是“都會用”提到Web存儲大多數(shù)人都知道“l(fā)ocalStorage不會過期、sessionStorage關(guān)標(biāo)簽頁就沒了、Cookie會隨請求發(fā)送”。但筆試?yán)锶绻嫉竭@些往往不會只停留在這一層。關(guān)于Cookie第四范式?？嫉狞c是HttpOnly和Secure標(biāo)志。HttpOnly是為了防止XSS腳本通過document.cookie讀取敏感會話信息一旦設(shè)置前端JavaScript就完全無法訪問這個Cookie。Secure標(biāo)志則要求Cookie只能在HTTPS連接中傳輸如果網(wǎng)站從HTTP跳轉(zhuǎn)到HTTPS這個Cookie也不會在第一次HTTP請求中帶上需要在HTTPS連接建立后才能設(shè)置。關(guān)于localStorage筆試題最喜歡考的是它的同步阻塞特性和存儲容量限制。**localStorage的讀寫操作是同步的而且發(fā)生在主線程上。**如果你存了一個很大的JSON字符串頁面解析時就會出現(xiàn)明顯的卡頓。這個是很多面試官列出“l(fā)ocalStorage缺點”時最希望聽到的點之一——它不僅是容量5MB的問題更是同步I/O阻塞渲染的問題。sessionStorage和localStorage還有一個極易被忽略的區(qū)別——它們的隔離粒度不一樣。localStorage在所有同源標(biāo)簽頁之間共享sessionStorage只存在于單個標(biāo)簽頁的會話中即使在同一個頁面里通過window.open打開新標(biāo)簽新標(biāo)簽頁的sessionStorage也和原來的不共享。但有一種例外如果新標(biāo)簽頁是通過window.open從原頁面打開的并且新頁面將opener設(shè)為null依然無法繼承sessionStorage。筆試?yán)锶绻霈F(xiàn)“在新標(biāo)簽頁中能否訪問原頁面sessionStorage”這類判斷題答案取決于打開方式。4. Vue框架與前端工程化實戰(zhàn)能力的分水嶺第四范式2019年前后端筆試題里框架部分以Vue為主——這跟當(dāng)年Vue在國內(nèi)的普及度以及公司技術(shù)棧的選擇都有關(guān)系。但框架題并不好答因為它不像語言基礎(chǔ)題有標(biāo)準(zhǔn)答案閱卷人會從你的答案里判斷你是“用過Vue”還是“理解Vue”。4.1 Vue的響應(yīng)式原理從Object.defineProperty到ProxyVue 2的響應(yīng)式原理是筆試題的絕對高頻考點。核心脈絡(luò)是這樣的Vue在初始化時會遞歸遍歷data對象的所有屬性用Object.defineProperty把它們?nèi)哭D(zhuǎn)成getter和setter。每個組件實例對應(yīng)一個Watcher當(dāng)組件渲染函數(shù)執(zhí)行時會訪問模板里用到的數(shù)據(jù)屬性觸發(fā)getter把這個Watcher收集進該屬性的依賴列表。當(dāng)數(shù)據(jù)發(fā)生變化時setter會觸發(fā)依賴列表里所有Watcher的更新。筆試常見的問法是“用Object.defineProperty實現(xiàn)響應(yīng)式有什么缺陷”答案有兩點。第一它無法監(jiān)聽屬性的新增和刪除所以Vue 2才提供了Vue.set和Vue.delete來彌補第二它需要遞歸遍歷對象對象級別很深時初始化性能會有損耗第三對于數(shù)組Vue 2只能通過重寫數(shù)組的7個變更方法來實現(xiàn)監(jiān)聽直接通過下標(biāo)修改數(shù)組元素是無法觸發(fā)響應(yīng)的。到了Vue 3響應(yīng)式底層換成了Proxy。Proxy可以直接代理整個對象攔截set、deleteProperty、has、ownKeys等多種操作所以新增、刪除屬性都能被感知也不需要重寫數(shù)組方法。但Proxy也并非無敵它的兼容性不如Object.defineProperty不支持IE11并且如果用Proxy去代理一個非常大的對象代理對象的創(chuàng)建過程會比Object.defineProperty更耗時。Vue 3源碼里為了規(guī)避這一點用了reactive和ref這樣的兩級響應(yīng)式設(shè)計深層對象用了懶代理策略——訪問到哪一層才代理哪一層。在筆試?yán)锶绻隳馨堰@些差異點完整寫出來再補一句“Vue 3的懶代理能在初始化時避免深層對象全部遞歸”這就能體現(xiàn)你對源碼實現(xiàn)層面的理解。4.2 虛擬DOM與diff算法別停留在“快”的層面關(guān)于虛擬DOM筆試?？嫉狞c是“為什么要用虛擬DOM”。最標(biāo)準(zhǔn)的答案是“減少直接操作真實DOM帶來的性能消耗”。但如果你能補充“虛擬DOM的真正價值在于把DOM操作抽象成數(shù)據(jù)層面的變化從而能夠跨平臺渲染比如服務(wù)端渲染、小程序渲染、原生應(yīng)用渲染都用到了類似機制”會讓閱卷人覺得你不是在背面試題。diff算法的核心流程也需要掌握同層比較、深度優(yōu)先。Vue 2的diff過程是先判斷新舊節(jié)點是否為sameVnode通過key和tag判斷不是則直接替換是則進行patchVnode對比屬性、更新子節(jié)點。子節(jié)點的更新用的是雙端比較策略頭頭對比、尾尾對比、頭尾對比、尾頭對比最后再用key做查找復(fù)用。Vue 3的diff算法在此基礎(chǔ)上做了優(yōu)化利用編譯時的patchFlag標(biāo)記動態(tài)節(jié)點跳過靜態(tài)節(jié)點的比對大幅減少diff范圍。這個點如果放在筆試?yán)飼浴癡ue 3為什么比Vue 2快”的形式出現(xiàn)。僅僅說“Proxy代替了Object.defineProperty”是不夠的因為響應(yīng)式只是數(shù)據(jù)更新的一部分真正大幅提升更新性能的是編譯階段生成的塊樹Block Tree和動態(tài)節(jié)點標(biāo)記讓diff過程不必再遍歷整個模板。我記得有一次和朋友模擬面試問“虛擬DOM一定比真實DOM操作快嗎”他愣了一下。實際上并不是——在非常小的頁面里手動優(yōu)化過的DOM操作可能比虛擬DOM更快虛擬DOM的優(yōu)勢在于將頻繁的DOM操作收斂為內(nèi)存中的計算再通過批量patch一次性更新真實DOM。這種“不穩(wěn)定答案”的題恰恰是這類公司最愛用來判斷候選人是否有獨立技術(shù)判斷力的方式。4.3 Webpack構(gòu)建性能與前端工程化AI公司的平臺需求第四范式這類平臺型公司前端工程化的核心痛點往往在于“大型項目構(gòu)建慢”“多項目復(fù)用難”“私有化部署要求高”。所以筆試?yán)锍霈F(xiàn)Webpack相關(guān)題目一點都不意外。當(dāng)年最常見的問法是“打包時如何減小打包體積” 答案可以從幾個層面展開代碼分割用SplitChunksPlugin把公共依賴提取成單獨chunk避免多入口重復(fù)打包。動態(tài)導(dǎo)入路由懶加載按需加載頁面級代碼塊。壓縮TerserPlugin壓縮JS、MiniCssExtractPlugin提取CSS并壓縮。Tree Shaking依賴ES Module的靜態(tài)分析能力移除未被使用的導(dǎo)出代碼。externals配置把React、Vue這類基礎(chǔ)庫標(biāo)記為外部依賴改用CDN加載減少包體體積。而在構(gòu)建性能方面核心技巧包括用cache-loader或Webpack 5的持久化緩存來緩存模塊編譯結(jié)果用thread-loader或HappyPack老項目做多進程構(gòu)建用DllPlugin預(yù)編譯不常變化的第三方庫。這些方案其實都是“拿空間換時間拿緩存換時間”的思路。筆試?yán)锶绻霈F(xiàn)“如何優(yōu)化開發(fā)環(huán)境的構(gòu)建速度”最常見的回答是開啟HotModuleReplacement。但如果你能補充一條“開發(fā)環(huán)境不會打包mock數(shù)據(jù)的那部分路由代碼減少模塊解析范圍然后在生產(chǎn)環(huán)境單獨引入”會顯得你有實際調(diào)優(yōu)經(jīng)驗而不只是在背文檔。5. 算法與編程題兩大題的思路完全暴露編程功底第四范式畢競是一家人工智能公司算法題的地位非同小可。雖然前端崗不會考動態(tài)規(guī)劃、圖論那種地獄難度但基礎(chǔ)的數(shù)據(jù)結(jié)構(gòu)與算法能力是必須展示出來的。當(dāng)年的算法題大概覆蓋了字符串處理、數(shù)組操作、樹遍歷和排序搜索這幾類。5.1 “手寫一個字符串去重并統(tǒng)計字符出現(xiàn)次數(shù)”這題可以簡單到令人懷疑也可以復(fù)雜到寫出生產(chǎn)級代碼。核心考點其實不是去重而是你是否能寫出O(n)時間、可讀性好、易于擴展的解法。比如function countCharacters(str) { const result {}; for (const char of str) { result[char] (result[char] || 0) 1; } return result; }大部分人能走到這一步。但要拿滿分還需要討論幾個細(xì)節(jié)是否要區(qū)分大小寫是否要包含空格如果統(tǒng)計對象里的key需要按字母序排列怎么處理這些邊界情況并不是故意刁難而是真實業(yè)務(wù)中必然要考慮的問題。如果你在代碼里主動處理了這些情況并在注釋里寫清楚假設(shè)條件閱卷人會認(rèn)為你有工程意識。5.2 “手寫一個數(shù)組扁平化”數(shù)組扁平化也是一個經(jīng)典題。最簡單的方法是遞歸進階一點可以用reduce再進階一些可以用while配合somefunction flat(arr, depth Infinity) { return arr.reduce((acc, cur) { if (Array.isArray(cur) depth 0) { return acc.concat(flat(cur, depth - 1)); } return acc.concat(cur); }, []); }如果題目允許使用Array.flat當(dāng)然可以直接調(diào)但要寫清楚你選擇它的原因。筆試?yán)锔粗氐氖悄隳芊裨诓挥脙?nèi)建方法的情況下實現(xiàn)并且考慮到“指定扁平化深度”而不是無腦全部拉平。把這個深度參數(shù)加進來代碼的魯棒性就上了一個臺階。5.3 “手寫一個輕量級的事件分發(fā)器”這一題我在前文已經(jīng)給過參考實現(xiàn)。它在算法題里的變形通常是被包裝成“模擬實現(xiàn)一個簡單的redux中間件機制”或者“實現(xiàn)一個支持異步的觀察者”?？嫉氖悄銓Α鞍l(fā)布訂閱模式核心是解耦”的理解。如果能畫出一張“事件的發(fā)布、訂閱、取消訂閱”的流程說明圖再把once和off的邊界問題答清楚算法設(shè)計模式這一關(guān)基本就能穩(wěn)過。6. 開放設(shè)計題拉開分?jǐn)?shù)差距的“廬山真面目”第四范式筆試題最后往往有一道開放設(shè)計題這道題沒有標(biāo)準(zhǔn)答案卻能直接看出你的架構(gòu)思維和業(yè)務(wù)理解能力。有一年的大意是請設(shè)計一個機器學(xué)習(xí)平臺的“模型訓(xùn)練任務(wù)詳情頁”包含訓(xùn)練日志實時展示、模型指標(biāo)曲線繪制、任務(wù)狀態(tài)輪詢。你會怎么設(shè)計前端的數(shù)據(jù)流、組件結(jié)構(gòu)和性能優(yōu)化策略。這道題里藏了多個考點。第一個是任務(wù)狀態(tài)輪詢——不能用setInterval粗暴解決因為頁面不可見時依然會發(fā)請求浪費資源。更合理的方案是使用requestIdleCallback或者結(jié)合visibilitychange事件在頁面不可見時暫停輪詢回到頁面時立即拉取一次最新數(shù)據(jù)。第二個是訓(xùn)練日志的實時展示——如果直接用v-html渲染日志文本會有XSS風(fēng)險正確做法是純文本解析加web worker分詞處理。第三個是大規(guī)模指標(biāo)曲線的渲染——直接操作SVG或Canvas還是用ECharts這類庫要解釋清楚你的選擇理由并且考慮“數(shù)據(jù)量達(dá)到幾萬點時如何聚合降采樣”。這種情況下比較能拿高分的回答邏輯是這樣的先把狀態(tài)管理方案說清楚——任務(wù)詳情頁用獨立store包含任務(wù)狀態(tài)機排隊中、運行中、成功、失敗、終止。再講數(shù)據(jù)更新策略——訓(xùn)練日志用WebSocket或者定時輪詢并結(jié)合虛擬滾動渲染長日志。接著說性能優(yōu)化——曲線圖用Canvas渲染離線聚合數(shù)據(jù)后再按需加載。最后補充異常處理——網(wǎng)絡(luò)斷開時如何重連、失敗狀態(tài)如何讓用戶重試、日志文件過大時如何服務(wù)端分片。如果只是把組件結(jié)構(gòu)劃分出來比如“頭部信息區(qū)、日志區(qū)、指標(biāo)區(qū)、操作按鈕”這是基礎(chǔ)分真正拉開差距的地方在于你對數(shù)據(jù)流、性能邊界、異?；謴?fù)的思考。我當(dāng)時給朋友的建議是遇到這類題不要一上來就寫組件樹先用幾句話定義“核心狀態(tài)有哪些”再定義“每個狀態(tài)如何更新”最后才考慮“組件如何展示”。這套思考方式能讓你在有限時間內(nèi)向閱卷人展示出“系統(tǒng)設(shè)計”能力而不是“畫原型圖”能力。7. 當(dāng)年答完這套題后我做了什么復(fù)盤我雖然沒參加那一年第四范式的筆試但一直有把各家題沉淀成知識圖譜的習(xí)慣。筆試結(jié)束后我會把自己踩過的坑和從別人那里收集到的共性問題整理成一張自檢清單方便后續(xù)查漏補缺。這里分享一份針對AI公司前端筆試的通用復(fù)習(xí)體系語言基礎(chǔ)閉包、作用域、this指向、原型鏈、事件循環(huán)、ES6新特性必須做到能用自己的話講清楚每一條底層規(guī)則。瀏覽器與網(wǎng)絡(luò)緩存策略、渲染鏈路、重排重繪、Web安全XSS、CSRF、跨域方案每塊都要有對應(yīng)的實驗驗證?？蚣茉磉x一個你使用最深的框架把它的響應(yīng)式、diff、生命周期、組件通信全部讀到源碼注釋級別。工程化Webpack核心配置、構(gòu)建優(yōu)化、前端性能監(jiān)控、代碼規(guī)范與自動化測試這些都是平臺型公司的日常。數(shù)據(jù)結(jié)構(gòu)與算法數(shù)組、字符串、鏈表、棧、隊列、二叉樹的基本操作加上常用排序和搜索能達(dá)到國內(nèi)大廠筆試入門線即可。開放題找到自己熟悉的業(yè)務(wù)場景提前準(zhǔn)備一到兩個“從設(shè)計到落地的完整方案”并練習(xí)在十分鐘內(nèi)講清楚。這套體系不必一次性全部塞進腦子里但筆試前至少要把前四項過一遍后兩項根據(jù)自己的情況取舍。如果你正在準(zhǔn)備這類公司的前端筆試我想說一句如果你在考場上遇到一兩道完全沒見過的題先不要慌。這類公司考的不是你的題庫覆蓋率而是你在有限時間內(nèi)拿到一個陌生問題后如何拆解、如何分析、如何把“不會”轉(zhuǎn)化為“可以從哪些角度去推”。把一道開放題答出邏輯推進感比把五道背誦題寫滿更能讓閱卷人記住你。