前端面試題 & 面試官心得
前言
去年這個(gè)時(shí)候，團(tuán)隊(duì)擴(kuò)張，花了很多精力招人。感謝給力的HR小姐姐，幾個(gè)月時(shí)間里篩了數(shù)百份簡(jiǎn)歷給我，每天都要面試很多場(chǎng)。我通常負(fù)責(zé)技術(shù)面，只考核候選人的技術(shù)水平，不問(wèn)期望薪資也不畫餅。面得多了，也積累了一點(diǎn)面試經(jīng)驗(yàn)，撰文分享一下，如何考核一個(gè)候選人的技術(shù)實(shí)力，以及自己對(duì)技術(shù)面試的一些思考。
一場(chǎng)技術(shù)面試通常30分鐘左右。前端的知識(shí)有點(diǎn)雜，通常得跳躍性地問(wèn)幾個(gè)方面的面試題，才能給出全面的評(píng)價(jià)。技術(shù)面試的答案和得分點(diǎn)，應(yīng)該有明確的標(biāo)準(zhǔn)，回答到什么程度都得有個(gè)評(píng)價(jià)標(biāo)準(zhǔn)。候選人較多的時(shí)候，多個(gè)面試官并發(fā)面試，更得有統(tǒng)一的標(biāo)準(zhǔn)，給候選人更客觀公平的評(píng)價(jià)。
近年行業(yè)內(nèi)卷，大廠很喜歡面試造火箭，上班擰螺絲，目的是考核一個(gè)候選人的能力上限。我們是沒(méi)什么名氣的小廠，招人以實(shí)用為主，盡量不問(wèn)算法題。但大部分面試題還是以原理為主，了解原理的人，遇到問(wèn)題至少知道怎么用搜索引擎找到方案，工作能力會(huì)更靠譜一些。
受限于篇幅，本文不列出完整的面試題庫(kù)，加粗的為重點(diǎn)問(wèn)題，其他的不一定會(huì)問(wèn)。有時(shí)候還會(huì)看面試者做過(guò)什么項(xiàng)目，針對(duì)他熟悉的知識(shí)點(diǎn)問(wèn)些更有深度的。總體的思路都是按照下面的幾個(gè)部分，分別挑幾道題來(lái)提問(wèn)。
電話約面試的提問(wèn)
很多簡(jiǎn)歷寫得天花亂墜，精通各種技術(shù)，掌握多門語(yǔ)言，開(kāi)發(fā)各種牛逼的項(xiàng)目。實(shí)際注了多少水，單從簡(jiǎn)歷上是看不出來(lái)的。在電話約面試之前，提幾個(gè)簡(jiǎn)單的問(wèn)題，可以篩選掉一些明顯不合適的候選人，避免浪費(fèi)雙方時(shí)間面試。電話里的問(wèn)題，表達(dá)要簡(jiǎn)答清晰，答案要明確固定，通常我會(huì)問(wèn)這些：
1.放在HTML里的哪一部分JavaScripts會(huì)在頁(yè)面加載的時(shí)候被執(zhí)行？
A、文件頭部位置；B、文件尾；C、<head>標(biāo)簽部分；D、<body>標(biāo)簽部分
（正確答案D）
2.隊(duì)列和棧的區(qū)別是什么？
答案：棧先進(jìn)后出，隊(duì)列先進(jìn)先出
3.Http永久重定向的狀態(tài)碼是什么？
答案：301
4.二叉樹(shù)的三種遍歷方式是什么？
答案：前序遍歷，中序遍歷，后序遍歷
并不是所有的候選人都需要在電話中提問(wèn)這幾個(gè)問(wèn)題。涉及到簡(jiǎn)歷怎么寫的問(wèn)題，本篇就不展開(kāi)討論了。
web原理及性能優(yōu)化
終于把候選人約過(guò)來(lái)了。自我介紹后，先第一個(gè)問(wèn)題：一個(gè)網(wǎng)頁(yè)從輸入網(wǎng)址到打開(kāi)，中間經(jīng)歷了哪些步驟？
（有的面試官也會(huì)換一種說(shuō)法：如果網(wǎng)頁(yè)打不開(kāi)，如何調(diào)試找出問(wèn)題？）
接著問(wèn)一個(gè)更深入的問(wèn)題：在上述的加載過(guò)程中，有哪些可以做性能優(yōu)化的地方？
這兩個(gè)問(wèn)題涵蓋的知識(shí)點(diǎn)非常全面，我習(xí)慣在面試最開(kāi)始的時(shí)候提問(wèn)，可以快速判斷一個(gè)候選人大概的技術(shù)層次，方便后面做針對(duì)性的提問(wèn)。
作為所有前端面試中的必問(wèn)題，網(wǎng)上有大量的文章，此處就不贅述。必須回答的得分點(diǎn)有：URL解析，DNS，TCP（三次握手），HTTP請(qǐng)求響應(yīng)過(guò)程，HTML、CSS、JS的加載順序，DOM樹(shù)、CSS樹(shù)、渲染樹(shù)，重繪和回流等。每個(gè)加載的流程都對(duì)應(yīng)有性能優(yōu)化的思路，如：DNS尋址原理和預(yù)解析；TCP連接有慢啟動(dòng)、擁塞控制所以要復(fù)用連接；HTTP2/3優(yōu)化請(qǐng)求效率；資源壓縮、合并、減少請(qǐng)求等減少請(qǐng)求數(shù)據(jù)量；CDN、http緩存、前端緩存等；減少回流等渲染性能優(yōu)化；worker、WebAssembly等腳本性能優(yōu)化；服務(wù)端渲染、預(yù)加載、懶加載、骨架屏優(yōu)化用戶體驗(yàn)等等。
性能優(yōu)化的點(diǎn)非常多，不要求答全，我會(huì)更看重面試中在之前的項(xiàng)目中實(shí)踐過(guò)哪些優(yōu)化方案，而不是只停留在理論基礎(chǔ)。比如經(jīng)常有人回答雪碧圖、小圖編碼為Base64，我就會(huì)反問(wèn)，這么做在性能上有什么缺點(diǎn)，有什么更好的替代方案？（答案可以參考之前的博客《http2性能優(yōu)化》）。如果能回答上來(lái)，是很大的加分項(xiàng)。
網(wǎng)絡(luò)協(xié)議
講一下http緩存的優(yōu)先級(jí)？
POST和GET的區(qū)別？
常見(jiàn)的http狀態(tài)碼？
常用的跨域方案有哪些？
常用Content-Type及應(yīng)用？
如何刪除一個(gè)cookie？
講下一個(gè)https協(xié)議建立連接的過(guò)程？
主要考核http協(xié)議，其他不做要求。跨域可能會(huì)問(wèn)到j(luò)sonp有什么限制，CORS簡(jiǎn)單請(qǐng)求和復(fù)雜請(qǐng)求的差別；http狀態(tài)碼問(wèn)完301和302的差別，可能會(huì)再問(wèn)307是干嘛用的。如果面試者了解其他的網(wǎng)絡(luò)協(xié)議（webSocket、webRTC之類的）并能講出原理，會(huì)是一個(gè)加分項(xiàng)。
JavaScript
JS里有哪些數(shù)據(jù)類型？
什么是閉包？
JS里有哪些繼承方式？
JS的異步編程的方案有哪些？
防抖和節(jié)流的區(qū)別？
為什么會(huì)有精度計(jì)算問(wèn)題？
什么是事件委托？
考核JS的熟悉程度。閉包可能會(huì)問(wèn)執(zhí)行上下文的概念；繼承會(huì)問(wèn)原型鏈相關(guān)的問(wèn)題；異步會(huì)問(wèn)Promise和async、await實(shí)現(xiàn)原理的區(qū)別，再問(wèn)宏任務(wù)、微任務(wù)、event loop等。
Vue/React/小程序
虛擬Dom是什么？Vue/React通過(guò)哪些方案來(lái)優(yōu)化虛擬Dom更新真實(shí)dom的性能？
Vue/React/小程序有哪些生命周期？嵌套組件中，生命周期的觸發(fā)順序是怎樣的？
跨組件通信的方案有哪些？
服務(wù)端渲染有什么優(yōu)勢(shì)和劣勢(shì)？
Vue的watch和computed有什么區(qū)別？分別應(yīng)該在什么時(shí)候使用？
Vue為什么 v-for 和 v-if 不建議?在?起？
vue-router hash 模式和 history 模式有什么區(qū)別？
vue.set是用來(lái)做什么的？為什么vue 3.0不需要了？
vue.nextTick是用來(lái)做什么的？
什么是高階組件？
React hook是用來(lái)干嘛的？
React Fiber 是什么？
近年來(lái)流行的框架，看面試者熟悉哪個(gè)就針對(duì)性地提問(wèn)，考察面試者是否真正掌握原理。去年Vue3是必問(wèn)的，可以順便了解一下面試者對(duì)熱門技術(shù)的態(tài)度。我們的要求是至少掌握Vue/React中的一個(gè)。如果對(duì)前端框架有深入了解，對(duì)架構(gòu)、工程化、同構(gòu)有自己的理解，可以再加分。
CSS
有哪些清除浮動(dòng)的方法？
CSS選擇器的優(yōu)先級(jí)？
CSS一般問(wèn)得很少。常用的沒(méi)什么難度，生僻全靠搜索引擎。安排幾個(gè)簡(jiǎn)單的CSS題目，一般在面試者過(guò)度緊張時(shí)，用來(lái)調(diào)節(jié)情緒，緩解尷尬的氣氛。
網(wǎng)絡(luò)安全
能答上XSS攻擊和CSRF攻擊的原理，并知道常見(jiàn)的防范方式即可。其他的安全防范問(wèn)題很多，有所了解的話是加分項(xiàng)。
之所以安排這個(gè)題，倒不是說(shuō)網(wǎng)絡(luò)安全在工作中有多重要。我自己做網(wǎng)站十幾年，遇到過(guò)許多的網(wǎng)絡(luò)安全攻擊，每次都讓我學(xué)到了很多知識(shí)，技術(shù)得到成長(zhǎng)。面試前端會(huì)問(wèn)這個(gè)問(wèn)題，主要是看面試會(huì)不會(huì)去關(guān)注網(wǎng)站的各個(gè)方面，而不是把責(zé)任都推給后臺(tái)和運(yùn)維的同事。
現(xiàn)場(chǎng)編程題
什么，不是說(shuō)好的不內(nèi)卷，面試不考算法題么？然而我還是準(zhǔn)備了一些現(xiàn)場(chǎng)編程題，有時(shí)候會(huì)讓面試者任選一題，在紙上手寫代碼。
本環(huán)節(jié)純粹用于拖時(shí)間。有時(shí)候下輪面試官在開(kāi)會(huì)之類的，需要等待較長(zhǎng)時(shí)間，為避免讓面試者太無(wú)聊，給個(gè)編程題打發(fā)時(shí)間。
實(shí)現(xiàn)一個(gè)大數(shù)計(jì)算的方法。
實(shí)現(xiàn)一個(gè)符合Promise A+規(guī)范的Promise庫(kù)，只需實(shí)現(xiàn)then方法。
找出一個(gè)文本串中出現(xiàn)次數(shù)最多的文本段。如果出現(xiàn)概率一樣多，取最長(zhǎng)的文本；如果出現(xiàn)概率和長(zhǎng)度一樣，取得第一個(gè)文本。不考慮單個(gè)字母，以2位字符串作為最小的文本段單元。
以上三題參考騰訊不同部門的前端面試上機(jī)題，如果是大廠面試，肯定是必須做出來(lái)的。還有一些leetCode上找的算法題，此處就不列出來(lái)了。好在我們要求不高，做不出來(lái)也沒(méi)關(guān)系，真的只是用來(lái)拖時(shí)間。
總結(jié)
從自我介紹開(kāi)始，都一直在考核候選人的溝通能力、表達(dá)能力。問(wèn)最近學(xué)習(xí)過(guò)哪些新技術(shù)，通過(guò)什么渠道學(xué)習(xí)，考核候選人的學(xué)習(xí)能力，以及對(duì)技術(shù)的態(tài)度。問(wèn)之前公司的加班情況，遇到瓶頸時(shí)如何解決，了解候選人的抗壓能力。技術(shù)雖然是硬實(shí)力，但在工作中，軟實(shí)力更為重要。
面試也遠(yuǎn)遠(yuǎn)不止考核候選人能力這么簡(jiǎn)單。給面試者一個(gè)順暢的流程，舒適的面試環(huán)境，禮貌、友善的交流，能塑造雇主品牌，在行業(yè)內(nèi)留下一個(gè)好的口碑。要介紹一下技術(shù)團(tuán)隊(duì)和技術(shù)棧，讓候選人知道進(jìn)來(lái)以后大概會(huì)負(fù)責(zé)哪方面的工作。對(duì)于優(yōu)秀的候選人，通過(guò)提問(wèn)的深度和廣度，展現(xiàn)自己的技術(shù)實(shí)力，也是吸引候選人的有效方式。面試是一個(gè)雙向選擇的過(guò)程，面試官也需要不斷修煉和成長(zhǎng)。
最后，特別感謝所有與我在面試中相遇的有緣人。不管最終有沒(méi)有成為同事，感謝您抽空參加面試，在交流中互相學(xué)習(xí)，共同成長(zhǎng)。