在過(guò)去的幾年里，我在亞馬遜和雅虎面試過(guò)許多前端工程師。在這篇文章中，我想分享一些技巧，幫助大家做好準(zhǔn)備。

免責(zé)聲明： 本文的目的并不是為你列出在前端面試中可能會(huì)被問(wèn)到的問(wèn)題，但是可以將其視為知識(shí)儲(chǔ)備。

面試很難，作為候選人，通常會(huì)給你45分鐘的時(shí)間來(lái)讓你展示自己的技能。 作為一名面試官，同樣難以在這么短的時(shí)間里評(píng)估這個(gè)人是否適合這項(xiàng)工作。 對(duì)于面試來(lái)說(shuō)，沒(méi)有任何一種標(biāo)準(zhǔn)能夠適合所有人，面試官通常會(huì)覆蓋某一個(gè)領(lǐng)域，但除此之外，他們會(huì)自行決定應(yīng)該問(wèn)哪些問(wèn)題。

不管你坐在面試桌的哪一側(cè)，這篇文章都會(huì)盡可能的涵蓋前端開(kāi)發(fā)中那些最重要的領(lǐng)域。

常見(jiàn)的誤解

我看到面試者犯的最大錯(cuò)誤之一是喜歡準(zhǔn)備一些瑣碎的問(wèn)題，例如“什么是盒子模型？”或“告訴我在JavaScript中==和===之間的區(qū)別？”等等。知道這些問(wèn)題的答案固然很好，但它并不能讓面試官知道你真正的水平。

相反，你應(yīng)該為面試做一些非常實(shí)際的準(zhǔn)備，能夠真正體現(xiàn)出自己的JavaScript，CSS和HTML編碼水平。為面試的準(zhǔn)備包括去實(shí)現(xiàn)UI，構(gòu)建窗口小部件或?qū)崿F(xiàn)諸如Lodash和Underscore.js庫(kù)中常見(jiàn)的功能，例如：

• [ ] 構(gòu)建常見(jiàn)Web應(yīng)用程序的布局和交互，例如Netflix瀏覽器站點(diǎn)。

• [ ] 實(shí)現(xiàn)小工具，如日期選擇器，輪播或電子商務(wù)購(gòu)物車(chē)。

• [ ] 編寫(xiě)類似debounce或深度克隆對(duì)象的函數(shù)。

說(shuō)到庫(kù)，常見(jiàn)的另一個(gè)錯(cuò)誤是人們喜歡完全依賴最新的框架來(lái)解決面試問(wèn)題。你可能會(huì)想：既然在開(kāi)發(fā)中我可以使用jQuery，React，Angular等，為什么還要重新發(fā)明輪子，為什么不能在面試中使用它？這個(gè)問(wèn)題很好，技術(shù)、框架和庫(kù)總會(huì)隨著時(shí)間的推移而發(fā)生變化 —— 我更感興趣的是：你需要了解前端開(kāi)發(fā)的基本原理，而不是依賴更高級(jí)別的抽象。如果你不能在不依賴這些庫(kù)的情況下回答的面試問(wèn)題，我希望你至少可以徹底解釋和推測(cè)庫(kù)在背后都做了什么。

總的來(lái)說(shuō)，你應(yīng)該期望大部分的面試都是非常實(shí)際的。

HTML

知道哪些HTML標(biāo)簽?zāi)茏詈玫谋憩F(xiàn)你正在顯示的內(nèi)容以及相關(guān)屬性，應(yīng)該掌握手寫(xiě)HTML的技能。

• [ ] 語(yǔ)義標(biāo)記。

• [ ] 標(biāo)記屬性，例如disabled, async, defer以及何時(shí)使用data-*。

• [ ] 知道如何聲明你的doctype（很多人因?yàn)椴皇敲刻於紝?xiě)新頁(yè)面，從而忘記了這一點(diǎn)），以及可以使用哪些meta標(biāo)簽。

• [ ] 可訪問(wèn)性問(wèn)題，例如：確保輸入復(fù)選框具有更大的響應(yīng)區(qū)域（使用標(biāo)簽“for”）。 另外還有role =“button”，role =“presentation”等。

CSS

至少，你應(yīng)該知道如何在頁(yè)面上布局元素，如何使用子元素或直接用后代選擇器來(lái)定位元素，以及何時(shí)使用classes與id。

• [ ] 布局：坐在彼此相鄰的元素以及如何將元素放在兩列與三列中。

• [ ] 響應(yīng)式設(shè)計(jì)：根據(jù)瀏覽器寬度更改元素的尺寸。

• [ ] 自適應(yīng)設(shè)計(jì)：根據(jù)特定斷點(diǎn)更改元素的尺寸。

• [ ] 特異性：如何計(jì)算選擇器的特異性以及級(jí)聯(lián)怎樣影響屬性。

• [ ] 使用恰當(dāng)?shù)拿臻g和類名。

JavaScript

你需要了解JavaScript，而且是深入了解。 在面試中，越高級(jí)別的人對(duì)語(yǔ)言知識(shí)深度的期望也越高。 至少，以下是你應(yīng)該熟悉的JavaScript內(nèi)容：

• [ ] 執(zhí)行上下文、尤其是詞法作用域和閉包。

• [ ] 提升機(jī)制、函數(shù)與塊作用域、以及函數(shù)表達(dá)式和聲明。

• [ ] 綁定 - 特別是調(diào)用、bind、apply 和this關(guān)鍵字。

• [ ] 對(duì)象原型，構(gòu)造函數(shù)和mixins。

• [ ] 組合函數(shù)和高階函數(shù)。

• [ ] 時(shí)間委托和冒泡。

• [ ] typeof，instanceof和Object.prototype.toString。

• [ ] 使用回調(diào)，promises，await和async處理異步調(diào)用。

• [ ] 何時(shí)使用函數(shù)聲明和表達(dá)式。

DOM

如何遍歷和操作DOM很重要，如果他們依賴jQuery或者編寫(xiě)了很多React和Angular類型的應(yīng)用，那么這就是大多數(shù)面試者應(yīng)該努力的地方。你可能不會(huì)每天都做這些，因?yàn)槲覀兇蠖鄶?shù)人都使用抽象排序。但是如果不依賴第三方庫(kù)，你應(yīng)該知道該如何進(jìn)行以下操作：

• [ ] 使用document.querySelector和舊版瀏覽器中的document.getElementsByTagName選擇或查找節(jié)點(diǎn)。

• [ ] 上下遍歷：Node.parentNode，Node.firstChild，Node.lastChild和Node.childNodes。

• [ ] 左右遍歷： Node.previousSibling和Node.nextSibling。

• [ ] 操作：在DOM樹(shù)中添加，刪除，復(fù)制和創(chuàng)建節(jié)點(diǎn)。 你應(yīng)該了解如何修改節(jié)點(diǎn)的文本內(nèi)容，以及切換，刪除或添加CSS類名等操作。

• [ ] 性能：當(dāng)你有很多節(jié)點(diǎn)時(shí)，操作DOM的代價(jià)可能會(huì)很高，所以你至少應(yīng)該知道文檔片段和節(jié)點(diǎn)緩存。

系統(tǒng)設(shè)計(jì)

針對(duì)后端系統(tǒng)設(shè)計(jì)的面試通常會(huì)涉及MapReduce、設(shè)計(jì)分布式鍵值存儲(chǔ)或需要CAP定理等知識(shí)。 盡管你的前端工作不需要深入了解此類系統(tǒng)是如何設(shè)計(jì)的，但是在被要求設(shè)計(jì)常見(jiàn)應(yīng)用程序的前端架構(gòu)時(shí)，千萬(wàn)不要感到驚訝。 通常這些問(wèn)題會(huì)問(wèn)的含糊，比如“設(shè)計(jì)像Pinterest這樣的網(wǎng)站”或“告訴我如何構(gòu)建購(gòu)物結(jié)賬服務(wù)？”。 以下是需要考慮的領(lǐng)域：

• [ ] 渲染： 客戶端渲染（CSR），服務(wù)器端渲染（SSR）和通用渲染。

• [ ] 布局： 如果你正在設(shè)計(jì)多個(gè)開(kāi)發(fā)團(tuán)隊(duì)使用的系統(tǒng)，則需要考慮構(gòu)建組件，以及是否需要團(tuán)隊(duì)遵循一致的規(guī)范來(lái)使用這些組件。

• [ ] 狀態(tài)管理：例如在單向數(shù)據(jù)流或雙向數(shù)據(jù)綁定之間進(jìn)行選擇。你還應(yīng)該考慮自己的設(shè)計(jì)是否遵循被動(dòng)或響應(yīng)式編程模型，以及組件應(yīng)該如何相互關(guān)聯(lián)。

• [ ] 異步流：
  你的組件可能需要與服務(wù)器實(shí)時(shí)通信。你的設(shè)計(jì)應(yīng)考慮XHR與雙向調(diào)用。如果面試官要求你支持舊版瀏覽器，那么你的設(shè)計(jì)需要在隱藏的iFrame，腳本標(biāo)簽或XHR之間進(jìn)行選擇以進(jìn)行消息傳遞。如果沒(méi)有，你可以建議使用websockets，或者你可能決定服務(wù)器發(fā)送事件（SSE）更好。

• [ ] 關(guān)注點(diǎn)分離： MVC、MVVM和MVP模式。

• [ ] 多設(shè)備支持：
  你的設(shè)計(jì)是否會(huì)針對(duì)Web、移動(dòng)Web和混合應(yīng)用使用相同的實(shí)現(xiàn)，或是單獨(dú)實(shí)現(xiàn)？如果你正在開(kāi)發(fā)類似于Pinterest這樣的站點(diǎn)，可能會(huì)考慮在Web上使用三列，但在移動(dòng)設(shè)備上只考慮一列，那么你的設(shè)計(jì)該如何處理這個(gè)問(wèn)題？

• [ ] 交付：
  在大型應(yīng)用程序中，讓獨(dú)立團(tuán)隊(duì)擁有自己的代碼庫(kù)并不罕見(jiàn)。這些不同的代碼庫(kù)可能彼此依賴，每個(gè)代碼庫(kù)通常都有自己的管道來(lái)釋放對(duì)生產(chǎn)環(huán)境的更改。你的設(shè)計(jì)應(yīng)考慮如何使用依賴關(guān)系（代碼拆分）、測(cè)試（單元和集成測(cè)試）和部署來(lái)構(gòu)建這些資源。你還應(yīng)該考慮如何通過(guò)CDN分發(fā)資源或內(nèi)聯(lián)它們以減少網(wǎng)絡(luò)延遲。

網(wǎng)絡(luò)表現(xiàn)

除了通用編程技術(shù)之外，你應(yīng)該期望面試官查看你的代碼或設(shè)計(jì)及其對(duì)性能的影響。 在以前將CSS放在頁(yè)面的頂部，并在底部放置JS腳本的做法就足夠了，但是Web正在快速發(fā)展，你應(yīng)該熟悉這個(gè)領(lǐng)域的復(fù)雜性。

• [ ] 關(guān)鍵渲染路徑。

• [ ] Service workers。

• [ ] 圖像優(yōu)化。

• [ ] 延遲加載和捆綁拆分。

• [ ] HTTP/2和服務(wù)器推送的一般含義。

• [ ] 何時(shí)預(yù)取和預(yù)加載資源。

• [ ] 減少瀏覽器重排以及何時(shí)將元素渲染交給GPU。

• [ ] 瀏覽器布局，合成和繪制之間的差異。

數(shù)據(jù)結(jié)構(gòu)和算法

這點(diǎn)可能具有爭(zhēng)議，但是不了解高時(shí)間復(fù)雜度和常見(jiàn)運(yùn)行時(shí)（如O(N)和O(N Log N)的基本知識(shí)會(huì)對(duì)你造成困擾。理解內(nèi)存管理等方面的知識(shí)對(duì)當(dāng)前十分常見(jiàn)的單頁(yè)應(yīng)用非常有幫助。 例如：如果你要實(shí)現(xiàn)一個(gè)拼寫(xiě)檢查功能，那么了解常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)和算法將使你的工作變得更加輕松。

我不是說(shuō)你需要一個(gè)CS學(xué)位，但是這個(gè)行業(yè)已經(jīng)不再是寫(xiě)一個(gè)簡(jiǎn)單的頁(yè)面了。 網(wǎng)上有很多資源，你可以很快掌握這些基礎(chǔ)知識(shí)。

常用Web知識(shí)

你需要掌握構(gòu)成Web的技術(shù)和范例。

• [ ] HTTP請(qǐng)求： GET和POST以及相關(guān)標(biāo)頭，如Cache-Control，ETag，Status Codes和Transfer-Encoding。

• [ ] REST與RPC。

• [ ] 安全性：何時(shí)使用JSONP，CORs和iFrame策略。

總結(jié)

作為Web開(kāi)發(fā)人員或工程師，需要大量的知識(shí)。 不要拘泥于所需的知識(shí)深度，而要保持開(kāi)放的心態(tài)，學(xué)習(xí)開(kāi)發(fā)所需的所有復(fù)雜技術(shù)。

除了本文涉及的技術(shù)主題外，在面試中你還需要談?wù)勛约哼^(guò)去的項(xiàng)目，描述有趣的糾結(jié)點(diǎn)以及所做的權(quán)衡。