每年校招季各家公司筆試題目總會(huì)在學(xué)生群里被翻來覆去地討論。歡聚時(shí)代2018年校招的web前端A卷就是當(dāng)時(shí)討論熱度很高的一份。我印象最深的一點(diǎn)是整張卷子并不靠偏題怪題來刁難人它的命題思路非常貼近一線開發(fā)場(chǎng)景——不考你背了多少API而是看你在寫頁面、寫JS的時(shí)候有沒有真正理解瀏覽器在替你做什么、JS引擎在怎么執(zhí)行你的代碼。這份卷子適合兩類人一是正在準(zhǔn)備前端校招的應(yīng)屆生可以把題目當(dāng)成知識(shí)盲區(qū)對(duì)照表二是入行一兩年、想系統(tǒng)查漏補(bǔ)缺的前端工程師。整張卷子分為選擇題、簡(jiǎn)答題和手寫編程題三大模塊覆蓋范圍基本落在四個(gè)方向JavaScript語言特性、瀏覽器工作原理、HTML/CSS布局、網(wǎng)絡(luò)協(xié)議與Web安全。下面我按這幾個(gè)方向把命題邏輯拆開結(jié)合我當(dāng)時(shí)備考和實(shí)際面試的經(jīng)驗(yàn)來聊。1. 卷子結(jié)構(gòu)與考察方向拆解1.1 整體命題邏輯為什么考這些不考那些先給沒參加過校招的朋友科普一下筆試設(shè)計(jì)的基本邏輯。校招筆試不是用來挑“最強(qiáng)天才”的而是用來做第一輪粗篩的。面試官一天要面幾十個(gè)人筆試必須用盡量少的題目把“基礎(chǔ)不牢靠”和“基礎(chǔ)扎實(shí)有潛力”這兩類人快速分開。所以在有限時(shí)間內(nèi)命題人會(huì)優(yōu)先選擇覆蓋面廣、區(qū)分度高的知識(shí)點(diǎn)而不是某個(gè)小眾框架的上層用法。歡聚時(shí)代這份A卷的題型分布在當(dāng)年很有代表性模塊題型題量占比考察目標(biāo)JavaScript語言特性單選/多選/手寫約40%語法理解、運(yùn)行機(jī)制、編碼能力瀏覽器原理單選/簡(jiǎn)答約20%渲染過程、緩存、異步事件HTML/CSS布局單選/手寫約20%布局能力、盒模型、選擇器網(wǎng)絡(luò)與安全單選/簡(jiǎn)答約10%HTTP協(xié)議、緩存、跨域與XSS算法基礎(chǔ)手寫約10%數(shù)組/字符串處理、邏輯思維從這個(gè)配比能看出來JavaScript是絕對(duì)核心這也是正常的。前端崗位的日常工作本質(zhì)就是跟JS打交道框架可以換語言層面的功底騙不了人。瀏覽器原理占20%因?yàn)樗鼪Q定了你對(duì)線上問題的排查能力——為什么頁面白屏、為什么滾動(dòng)卡頓、為什么資源重復(fù)加載這些都在瀏覽器原理的知識(shí)范疇里。歡聚時(shí)代本身是做直播和音視頻業(yè)務(wù)的對(duì)實(shí)時(shí)交互體驗(yàn)要求很高。所以這份卷子里異步編程、事件循環(huán)、性能優(yōu)化相關(guān)的題占比明顯高于一般公司。這也是命題邏輯里很有意思的一層企業(yè)的業(yè)務(wù)形態(tài)會(huì)直接影響考點(diǎn)側(cè)重。備考時(shí)候如果能提前了解目標(biāo)公司的業(yè)務(wù)方向大致能猜出它更重視哪一塊。1.2 難度定位基礎(chǔ)題的“細(xì)節(jié)陷阱”A卷的整體難度屬于當(dāng)年的主流水平?jīng)]有特別刁鉆的題但細(xì)節(jié)題很密。什么叫細(xì)節(jié)題就是看起來每個(gè)選項(xiàng)都認(rèn)識(shí)但考的是你平時(shí)會(huì)不會(huì)真正去思考的那些點(diǎn)。舉個(gè)例子JS基礎(chǔ)經(jīng)常出現(xiàn)這種題判斷typeof null、typeof function(){}、typeof []分別是什么。如果你平時(shí)寫代碼沒想過這類問題光靠感覺答題很容易在“object”和“function”之間猶豫。再比如0.1 0.2 0.3的結(jié)果為什么是false這背后是浮點(diǎn)數(shù)精度問題屬于計(jì)算機(jī)基礎(chǔ)范疇但很多前端同學(xué)直到工作兩三年都沒搞明白。細(xì)節(jié)題的價(jià)值在于它不是死記硬背能答好的它反映的是候選人平時(shí)會(huì)不會(huì)深入思考。面試官真正想看的不是你記住了多少結(jié)論而是你有沒有建立“遇到問題追到原理層面”的習(xí)慣。2. JavaScript核心考點(diǎn)扎實(shí)功底是分水嶺2.1 閉包、作用域與this指向必考且拉開差距JavaScript這部分幾乎可以確定會(huì)出現(xiàn)閉包和作用域的題。最經(jīng)典的代碼題長(zhǎng)這樣for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }問輸出結(jié)果是什么。答案不是0、1、2、3、4而是連續(xù)5個(gè)5?？键c(diǎn)有兩個(gè)一是var沒有塊級(jí)作用域循環(huán)里創(chuàng)建的i是同一個(gè)變量二是setTimeout的回調(diào)是宏任務(wù)要等同步代碼執(zhí)行完才運(yùn)行而那時(shí)循環(huán)已經(jīng)結(jié)束i已經(jīng)變成5。這道題的改法在當(dāng)年是手寫題的?？透某蒷et聲明或者用閉包傳參for (var i 0; i 5; i) { (function(j) { setTimeout(function() { console.log(j); }, 100); })(i); }用IIFE把每次循環(huán)的i值作為參數(shù)固化到閉包里。后來ES6普及l(fā)et成了首選方案。但筆試如果只寫let建議把原理講清楚單純換成let說明你只是知道結(jié)論不一定理解背后的作用域機(jī)制。this指向的題也幾乎是必考的。常見考法var name window; var obj { name: obj, getName: function() { return this.name; } }; var fn obj.getName; console.log(fn()); console.log(obj.getName());第一行輸出window第二行輸出obj。原因在于this的綁定規(guī)則誰調(diào)用函數(shù)this就指向誰。fn()是全局調(diào)用this指向windowobj.getName()是對(duì)象方法調(diào)用this指向obj。當(dāng)年還有一道擴(kuò)充題把所有情況串起來普通函數(shù)調(diào)用、對(duì)象方法調(diào)用、call/apply/bind調(diào)用、new調(diào)用、箭頭函數(shù)。每寫一個(gè)調(diào)用方式后面就跟一個(gè)輸出結(jié)果。這類題考察的是你對(duì)this綁定優(yōu)先級(jí)有沒有完整的理解——new bind call/apply 對(duì)象方法調(diào)用 默認(rèn)綁定。箭頭函數(shù)則特殊它沒有自己的this往外層作用域找。2.2 原型鏈與繼承手寫題的決定性題目原型和繼承是2018年前后前端筆試的“壓軸?？汀薄＿x擇題考instanceof的判斷結(jié)果手寫題大概率讓你實(shí)現(xiàn)一個(gè)繼承。先看選擇題經(jīng)典function Parent() { this.name parent; } function Child() { this.age 1; } Child.prototype new Parent(); var child new Child(); console.log(child instanceof Parent); console.log(child instanceof Child); console.log(child.constructor Parent);前兩個(gè)輸出都是true因?yàn)閏hild的原型鏈上既有Child.prototype也能通過Child.prototype內(nèi)部的[[Prototype]]找到Parent.prototype。第三個(gè)容易丟分child.constructor此時(shí)指向的是Parent。原因在于Child.prototype被整個(gè)重新賦值為new Parent()這個(gè)對(duì)象身上的constructor屬性繼承自Parent.prototype指向Parent。手寫繼承題當(dāng)時(shí)最穩(wěn)妥的回答是“組合繼承”和“寄生組合繼承”。我建議優(yōu)先掌握寄生組合繼承它兼容了原型鏈繼承和構(gòu)造函數(shù)繼承的優(yōu)點(diǎn)也是ES6 class繼承在Babel轉(zhuǎn)譯后的實(shí)際實(shí)現(xiàn)方式function Parent(name) { this.name name || parent; this.colors [red, blue]; } Parent.prototype.sayHello function() { console.log(Hello this.name); }; function Child(name, age) { Parent.call(this, name); this.age age; } Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child; Child.prototype.sayAge function() { console.log(this.age); };這里核心是Object.create(Parent.prototype)它創(chuàng)建一個(gè)以父類原型為新對(duì)象原型的對(duì)象再賦給Child.prototype。這樣避免了直接new Parent()帶來的多余屬性也保證了instanceof判斷正確。最后一定要補(bǔ)Child.prototype.constructor Child修復(fù)constructor指向否則后面判斷對(duì)象構(gòu)造函數(shù)會(huì)出問題。2.3 事件循環(huán)與異步機(jī)制直播業(yè)務(wù)公司的重點(diǎn)題前面提到歡聚時(shí)代做直播異步處理在業(yè)務(wù)里非常重要。所以這套卷子里事件循環(huán)相關(guān)的輸出題占比不低而且難度逐年上升?；A(chǔ)題是經(jīng)典的宏任務(wù)/微任務(wù)輸出順序console.log(A); setTimeout(function() { console.log(B); }, 0); Promise.resolve().then(function() { console.log(C); }); console.log(D);輸出順序是A、D、C、B。原因是同步代碼先全部執(zhí)行完然后執(zhí)行微任務(wù)隊(duì)列Promise.then回調(diào)最后才是宏任務(wù)隊(duì)列setTimeout回調(diào)。這個(gè)知識(shí)點(diǎn)在當(dāng)年很多人會(huì)搞反以為setTimeout的0毫秒是立即執(zhí)行實(shí)際上0毫秒只是表示“盡快加入宏任務(wù)隊(duì)列”并不能插隊(duì)到微任務(wù)前面。進(jìn)階版會(huì)疊加async/awaitasync function test() { console.log(start); await Promise.resolve(); console.log(end); } test(); console.log(sync);這里的輸出需要理解await的語義。await右側(cè)的表達(dá)式會(huì)立即執(zhí)行遇到await時(shí)test函數(shù)暫停后續(xù)代碼作為微任務(wù)排隊(duì)。所以輸出是start、sync、end。遇到這類題我建議在草稿紙上畫一下任務(wù)隊(duì)列先寫同步任務(wù)再畫一個(gè)微任務(wù)隊(duì)列和一個(gè)宏任務(wù)隊(duì)列遇到Promise.then和await后面代碼就往微任務(wù)隊(duì)列塞遇到setTimeout就往宏任務(wù)隊(duì)列塞。按這個(gè)流程走基本不會(huì)錯(cuò)。而且這個(gè)思路本身也是實(shí)際排查線上問題時(shí)需要的能力——比如為什么某個(gè)接口回調(diào)比另一個(gè)后執(zhí)行為什么圖表渲染在滾動(dòng)事件之后才更新本質(zhì)都是任務(wù)隊(duì)列的順序問題。3. 瀏覽器原理與網(wǎng)絡(luò)一線開發(fā)的基本功3.1 從輸入U(xiǎn)RL到頁面渲染簡(jiǎn)答題的經(jīng)典框架這類簡(jiǎn)答題幾乎每個(gè)前端筆試都會(huì)出現(xiàn)A卷也不例外。題目一般長(zhǎng)這樣“描述在瀏覽器地址欄輸入網(wǎng)址并回車到頁面完整顯示中間經(jīng)歷了哪些步驟”完整的回答框架是URL解析瀏覽器判斷輸入是合法URL還是搜索關(guān)鍵詞補(bǔ)全協(xié)議和路徑。DNS解析把域名解析成IP地址依次查找瀏覽器緩存、系統(tǒng)緩存、路由器緩存、根DNS服務(wù)器。建立TCP連接三次握手客戶端發(fā)送SYN、服務(wù)器返回SYNACK、客戶端回復(fù)ACK。發(fā)起HTTP請(qǐng)求構(gòu)造請(qǐng)求行、請(qǐng)求頭、請(qǐng)求體通過TCP發(fā)送。服務(wù)器處理并返回后端處理請(qǐng)求返回響應(yīng)報(bào)文和響應(yīng)體。瀏覽器解析渲染解析HTML構(gòu)建DOM樹、解析CSS構(gòu)建CSSOM樹、兩者合成渲染樹、計(jì)算布局、繪制并合成圖層。斷開連接短連接四次揮手或者保持長(zhǎng)連接復(fù)用。我當(dāng)時(shí)復(fù)習(xí)這道題時(shí)專門整理了一段口訣“解析域名、建立連接、發(fā)送請(qǐng)求、解析響應(yīng)、構(gòu)建渲染、執(zhí)行腳本”。回答時(shí)要注意兩點(diǎn)一是有邏輯層次從網(wǎng)絡(luò)層面到渲染層面逐步展開二是要提到關(guān)鍵細(xì)節(jié)比如渲染過程中遇到script標(biāo)簽會(huì)阻塞DOM解析所以腳本一般放body底部或加defer/async。這個(gè)細(xì)節(jié)在筆試?yán)锖苋菀妆缓雎缘∏∈敲嬖嚬倥袛嗄恪罢娴睦斫狻边€是“背過答案”的分界線。3.2 回流重繪與性能優(yōu)化面試加分項(xiàng)渲染原理延伸出來的高頻題就是回流reflow/layout和重繪repaint。筆試選擇題會(huì)這么考以下哪些操作會(huì)觸發(fā)回流選項(xiàng)一般包括修改元素寬度、修改顏色、讀取offsetWidth、刪除DOM節(jié)點(diǎn)、改變窗口大小、添加類名。這里有個(gè)容易踩坑的點(diǎn)很多人以為“讀取”不會(huì)觸發(fā)回流但offsetWidth、clientWidth、getComputedStyle這類讀取操作會(huì)強(qiáng)制瀏覽器同步完成布局計(jì)算然后才返回值。原因是瀏覽器為了性能會(huì)合并多個(gè)樣式修改延遲一次統(tǒng)一回流但當(dāng)你讀取布局屬性時(shí)它沒辦法給個(gè)“過期”的值只能先算一遍。關(guān)于回流的優(yōu)化手段我在實(shí)際項(xiàng)目中驗(yàn)證有效的有幾條把需要多次修改的DOM操作合并用document.createDocumentFragment()或者一次性改class。用transform代替top/left做動(dòng)畫因?yàn)閠ransform走合成器不觸發(fā)回流重繪。對(duì)需要高頻觸發(fā)的事件如scroll、resize做防抖或節(jié)流。需要讀取布局屬性時(shí)盡量一次性讀取緩存不要反復(fù)讀。用will-change或contain屬性減少渲染范圍。這些優(yōu)化思路在筆試?yán)锟梢宰鳛楹?jiǎn)答題的補(bǔ)充答案在面試中則是實(shí)打?qū)嵉募臃猪?xiàng)。尤其是“transform為什么比top高性能”這個(gè)追問能答出“合成器在GPU上處理不經(jīng)過布局和繪制”就算過關(guān)。3.3 HTTP緩存機(jī)制與狀態(tài)碼細(xì)節(jié)決定成敗網(wǎng)絡(luò)協(xié)議部分A卷側(cè)重緩存機(jī)制。核心考點(diǎn)是強(qiáng)緩存和協(xié)商緩存的完整鏈路。強(qiáng)緩存有兩個(gè)頭字段ExpiresHTTP/1.0和Cache-ControlHTTP/1.1。Cache-Control: max-age3600表示從請(qǐng)求時(shí)刻起緩存1小時(shí)。而Expires是絕對(duì)時(shí)間如果客戶端時(shí)間和服務(wù)器時(shí)間不一致緩存就會(huì)失效所以現(xiàn)代項(xiàng)目基本以Cache-Control為主。協(xié)商緩存也有兩個(gè)頭字段Last-Modified/If-Modified-Since按文件修改時(shí)間判斷ETag/If-None-Match按文件內(nèi)容指紋判斷。兩者區(qū)別在于修改時(shí)間只能精確到秒同一秒內(nèi)多次修改就判斷不出來ETag是內(nèi)容哈希更精確但計(jì)算成本更高。服務(wù)器返回304表示“你可以用本地緩存”這次請(qǐng)求不返回響應(yīng)體。緩存題還有一種變體無緩存刷新CtrlF5和普通刷新F5有什么區(qū)別普通刷新會(huì)帶上If-Modified-Since或If-None-Match走協(xié)商緩存強(qiáng)制刷新則會(huì)繞過強(qiáng)緩存和協(xié)商緩存直接向服務(wù)器發(fā)新請(qǐng)求。狀態(tài)碼的考點(diǎn)集中在200成功、301永久重定向、302臨時(shí)重定向、304緩存命中、403禁止訪問、404找不到資源、500服務(wù)器內(nèi)部錯(cuò)誤、502網(wǎng)關(guān)錯(cuò)誤。還有個(gè)容易混淆的301和302的區(qū)別一個(gè)是永久遷移搜索引擎會(huì)更新鏈接權(quán)重一個(gè)是臨時(shí)跳轉(zhuǎn)。4. CSS/HTML應(yīng)用題布局細(xì)節(jié)最容易翻車4.1 經(jīng)典布局的實(shí)現(xiàn)與對(duì)比CSS部分A卷還是老套路盒模型、居中布局、兩欄/三欄布局、flex布局。這些題目本身不難但很多人因?yàn)槠綍r(shí)寫代碼依賴框架自己手寫的時(shí)候反而不利索。盒模型的考點(diǎn)是標(biāo)準(zhǔn)盒模型和IE盒模型的區(qū)別。標(biāo)準(zhǔn)盒模型的width只包含內(nèi)容區(qū)padding和border是額外加上的IE盒模型的width包含內(nèi)容、padding和border。box-sizing: border-box就是把元素設(shè)置為IE盒模型這在移動(dòng)端布局里非常實(shí)用因?yàn)樽釉卦O(shè)置百分比寬度后再加padding不會(huì)超出父容器。垂直水平居中方案是手寫題?？?。當(dāng)年我給出的標(biāo)準(zhǔn)答案至少要有四種/* 方案一flex */ .parent { display: flex; justify-content: center; align-items: center; } /* 方案二絕對(duì)定位 transform */ .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 方案三margin: auto 配合絕對(duì)定位 */ .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } /* 方案四table-cell */ .parent { display: table-cell; text-align: center; vertical-align: middle; }筆試要求寫兩到三種面試則希望你能說出每種方案的局限性和適用場(chǎng)景。比如flex方案要求父容器高度確定絕對(duì)定位transform要求父容器是定位父級(jí)table-cell適合舊瀏覽器兼容。能講出這些才算真正掌握了。三欄布局是CSS布局題里的“定番題”。圣杯布局和雙飛翼布局的思路都是左右兩欄定寬、中間自適應(yīng)區(qū)別在于圣杯用padding騰位置雙飛翼用中間欄內(nèi)部的margin騰位置。我當(dāng)時(shí)練習(xí)時(shí)做了個(gè)判斷雙飛翼的邏輯更直接不容易寫錯(cuò)但兩者原理都要會(huì)說。2023年以后flex和grid已經(jīng)全面普及這類傳統(tǒng)方案在筆試中的出現(xiàn)頻率有所下降但一旦出現(xiàn)如果答不上來會(huì)比較尷尬。4.2 選擇器優(yōu)先級(jí)與BFC細(xì)節(jié)里的高分題選擇器優(yōu)先級(jí)計(jì)算是選擇題高發(fā)區(qū)。記一個(gè)權(quán)重模型內(nèi)聯(lián)樣式1000id選擇器100類/屬性/偽類10元素/偽元素1。比較時(shí)按位相加大的優(yōu)先。!important優(yōu)先級(jí)最高但慎用因?yàn)樗鼤?huì)破壞級(jí)聯(lián)規(guī)則后期維護(hù)很難覆蓋。BFC塊級(jí)格式化上下文是這一部分的另一個(gè)考點(diǎn)。選擇題一般問你哪個(gè)屬性會(huì)觸發(fā)BFC或者BFC能解決什么問題。觸發(fā)BFC的條件有根元素、float不為none、position為absolute或fixed、display為inline-block或table-cell、overflow不為visible、display: flow-root。BFC解決的核心問題有三個(gè)清除浮動(dòng)子元素浮動(dòng)導(dǎo)致父容器高度塌陷時(shí)給父容器創(chuàng)建BFC它能包含浮動(dòng)子元素。防止margin合并垂直方向上相鄰元素的margin會(huì)合并把其中一個(gè)元素包進(jìn)BFC可以阻止合并。阻止元素被浮動(dòng)元素覆蓋BFC區(qū)域不會(huì)與浮動(dòng)元素重疊。我當(dāng)時(shí)手寫過一段清除浮動(dòng)的兼容寫法.clearfix::after { content: ; display: block; clear: both; }這個(gè)方案比給父容器加overflow: hidden更安全因?yàn)楹笳咴谀承﹫?chǎng)景下會(huì)裁掉下拉菜單之類的溢出內(nèi)容。筆試簡(jiǎn)答題里能寫出這種細(xì)節(jié)是加分項(xiàng)。5. 手寫編程題解題過程與邊界處理5.1 防抖與節(jié)流必考手寫題要注意邊界手寫題第一道高頻題就是防抖debounce和節(jié)流throttle。題目有時(shí)候只讓你寫“實(shí)現(xiàn)防抖函數(shù)”有時(shí)候更雞賊要求“實(shí)現(xiàn)防抖函數(shù)并說明它和節(jié)流的區(qū)別”。防抖的核心邏輯是事件觸發(fā)后設(shè)定一個(gè)等待時(shí)間等待時(shí)間內(nèi)再次觸發(fā)則重新計(jì)時(shí)只有停止觸發(fā)后才執(zhí)行一次。function debounce(fn, delay) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); timer null; }, delay); }; }我當(dāng)時(shí)寫這段時(shí)容易漏兩個(gè)點(diǎn)一是this的綁定問題回調(diào)里直接用fn()會(huì)導(dǎo)致this丟失必須用fn.apply(this, args)把this傳進(jìn)去二是clearTimeout之后timer要置null防止連續(xù)調(diào)用次數(shù)的累積污染。節(jié)流的核心邏輯是固定時(shí)間間隔內(nèi)只執(zhí)行一次。function throttle(fn, interval) { let last 0; return function(...args) { let now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }還有一種用定時(shí)器實(shí)現(xiàn)的版本區(qū)別在于末尾是否多執(zhí)行一次。筆試時(shí)如果能寫出“第一次觸發(fā)立即執(zhí)行結(jié)束后再補(bǔ)充執(zhí)行一次”的版本并解釋兩種時(shí)間的差異基本就是滿分答案。5.2 數(shù)組去重與扁平化一題多解展示功底數(shù)組去重是另一道高頻手寫題。直接用Set是最簡(jiǎn)潔的const unique (arr) [...new Set(arr)];但只寫一行可能讓面試官覺得你只會(huì)API所以建議同時(shí)寫出filter加indexOf的方案const unique (arr) arr.filter((item, index) arr.indexOf(item) index);這道題想拿高分關(guān)鍵在于主動(dòng)說清楚不同方案的適用場(chǎng)景。比如Set方案無法區(qū)分1和1其實(shí)不是Set使用SameValueZero比較1和1是不同的值NaN會(huì)被正確去重這是它比indexOf方案強(qiáng)的地方。但如果數(shù)組元素是對(duì)象Set做的是引用比較無法按對(duì)象內(nèi)容去重這時(shí)候需要自己寫reduce加Map組合方案。數(shù)組扁平化也是一道經(jīng)典題。ES6有Array.prototype.flat(depth)但手寫實(shí)現(xiàn)要考察遞歸能力function flatten(arr) { return arr.reduce((prev, cur) { return prev.concat(Array.isArray(cur) ? flatten(cur) : cur); }, []); }注意遞歸方案對(duì)嵌套特別深的數(shù)組可能導(dǎo)致調(diào)用棧溢出。如果面試追問可以用?；虻鷣韮?yōu)化把深度控制在O(n)空間。我在寫這段時(shí)會(huì)把concat和展開運(yùn)算符[...prev, ...]的性能差異也提一下這個(gè)細(xì)節(jié)能體現(xiàn)你對(duì)代碼性能的敏感度。5.3 手寫發(fā)布訂閱Event Bus的常規(guī)操作發(fā)布訂閱模式是這類筆試?yán)锉容^有區(qū)分度的手寫題。題目通常說實(shí)現(xiàn)一個(gè)簡(jiǎn)單的EventEmitter支持on、once、off、emit四個(gè)方法。class EventEmitter { constructor() { this.events new Map(); } on(name, fn) { if (!this.events.has(name)) { this.events.set(name, []); } this.events.get(name).push(fn); } once(name, fn) { const wrapper (...args) { fn.apply(this, args); this.off(name, wrapper); }; this.on(name, wrapper); } off(name, fn) { if (!this.events.has(name)) return; if (!fn) { this.events.delete(name); return; } const fns this.events.get(name); const index fns.indexOf(fn); if (index -1) fns.splice(index, 1); } emit(name, ...args) { const fns this.events.get(name); if (fns fns.length) { fns.slice().forEach(fn fn.apply(this, args)); } } }這題有幾個(gè)容易丟分的細(xì)節(jié)once注冊(cè)的回調(diào)執(zhí)行后要立即解綁所以外面包了一層wrapperoff時(shí)必須能用wrapper從列表中刪除emit時(shí)遍歷回調(diào)數(shù)組要用slice()淺拷貝一份防止回調(diào)內(nèi)部調(diào)用off導(dǎo)致正在遍歷的數(shù)組被修改off如果不傳具體函數(shù)應(yīng)該清空該事件的所有回調(diào)。這些邊界情況在筆試?yán)锊灰欢ㄒ笕慷紝懗鰜淼茉诎准埳蠈懲暾f明你的工程意識(shí)是有的。6. 筆試常見丟分點(diǎn)與復(fù)習(xí)路線建議6.1 我觀察到的三大丟分原因先說丟分點(diǎn)。我身邊參加過這份筆試的同學(xué)回來說得最多的不是“題不會(huì)”而是“會(huì)但是沒寫全”。這與校招筆試的評(píng)分方式密切相關(guān)手寫題往往是按點(diǎn)給分的少了邊界處理、少了原理說明扣分都很正常。第一個(gè)丟分點(diǎn)是手寫題沒有處理邊界條件。比如實(shí)現(xiàn)防抖函數(shù)時(shí)不處理this綁定實(shí)現(xiàn)EventEmitter時(shí)不考慮once回調(diào)的自動(dòng)解綁數(shù)組去重時(shí)忽略NaN的去重需求。這些邊界情況在真實(shí)項(xiàng)目中很重要筆試評(píng)分時(shí)也是區(qū)分“背過模板”和“真正理解”的關(guān)鍵判據(jù)。第二個(gè)丟分點(diǎn)是選擇題里模棱兩可的選項(xiàng)過于糾結(jié)導(dǎo)致時(shí)間分配失衡。一張卷子選擇題大概30道建議每道不超過1分半不會(huì)的先跳過把時(shí)間留給手寫題。手寫題分值高、區(qū)分度大寫不全基本就等于丟了這部分分?jǐn)?shù)。第三個(gè)丟分點(diǎn)是簡(jiǎn)答題只寫條目不解釋。問“瀏覽器渲染過程”如果只寫“構(gòu)建DOM樹、構(gòu)建CSSOM樹、合成渲染樹”三行分?jǐn)?shù)一定不高。閱卷人想看的是你對(duì)每一步的理解比如構(gòu)建DOM樹遇到script怎么處理、CSSOM樹會(huì)不會(huì)阻塞渲染、合成樹和渲染樹的區(qū)別。解釋得越細(xì)越能證明你真的做過頁面性能排查。6.2 針對(duì)性的復(fù)習(xí)路線從筆試到面試的延續(xù)備考前端校招我的建議是分三條線并行走。第一條線是語言基礎(chǔ)。把JavaScript的核心機(jī)制過一遍重點(diǎn)不是背API而是理解原理作用域鏈、閉包、原型鏈、this綁定規(guī)則、async/await和Promise的執(zhí)行順序。推薦的方式是每個(gè)知識(shí)點(diǎn)都自己寫一個(gè)小例子在控制臺(tái)驗(yàn)證輸出再嘗試解釋原因。第二條線是瀏覽器和網(wǎng)絡(luò)。推薦動(dòng)手做一個(gè)“輸入U(xiǎn)RL到頁面渲染”的完整實(shí)驗(yàn)在網(wǎng)絡(luò)面板里觀察強(qiáng)緩存和協(xié)商緩存的請(qǐng)求頭變化打開Performance面板看回流重繪和長(zhǎng)任務(wù)。這些實(shí)踐能幫你把抽象概念和真實(shí)現(xiàn)象對(duì)應(yīng)起來。第三條線是刷手寫題。防抖節(jié)流、數(shù)組去重、數(shù)組扁平化、實(shí)現(xiàn)Promise、深拷貝、EventEmitter這些是前端筆試的常青題目。我的建議是每個(gè)題至少手寫三遍第一遍看答案后默寫第二遍閉卷獨(dú)立寫第三遍嘗試優(yōu)化和擴(kuò)展。還有一條面試層面的建議筆試題目通常會(huì)在面試中被追問。答完一道手寫題面試官很可能會(huì)問“這段代碼有什么問題”“如果并發(fā)調(diào)用會(huì)怎么樣”“內(nèi)存方面有沒有考慮”。所以復(fù)習(xí)時(shí)不要只滿足于寫出來要有意識(shí)地思考代碼的邊界和優(yōu)化空間。寫在最后回看歡聚時(shí)代這份2018年的web前端A卷我覺得它最大的參考價(jià)值不是題目本身而是它對(duì)基礎(chǔ)知識(shí)的重視程度。很多人在校招季容易陷入一種焦慮拼命追最新框架、最新特性卻被一張考察閉包和事件循環(huán)的卷子教做人。事實(shí)是技術(shù)棧會(huì)變框架會(huì)過時(shí)但JavaScript語言的底層機(jī)制、瀏覽器的工作原理、HTTP協(xié)議的交互邏輯這些才是前端工程師真正的護(hù)城河。如果你正在準(zhǔn)備校招建議把這份卷子當(dāng)作一面鏡子逐個(gè)考點(diǎn)自查哪一塊不熟悉就補(bǔ)哪一塊。我在實(shí)際備考中感受到最有效的學(xué)習(xí)方式就是把每一個(gè)考點(diǎn)講給別人聽講不清楚的地方就是你的盲區(qū)。希望這份拆解能幫你少走一些我當(dāng)時(shí)走過的彎路。