[[256005]]

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

免責聲明： 本文的目的并不是為你列出在前端面試中可能會被問到的問題，但是可以將其視為知識儲備。

面試很難，作為候選人，通常會給你45分鐘的時間來讓你展示自己的技能。 作為一名面試官，同樣難以在這么短的時間里評估這個人是否適合這項工作。 對于面試來說，沒有任何一種標準能夠適合所有人，面試官通常會覆蓋某一個領域，但除此之外，他們會自行決定應該問哪些問題。

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

常見的誤解

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

相反，你應該為面試做一些非常實際的準備，能夠真正體現(xiàn)出自己的JavaScript，CSS和HTML編碼水平。為面試的準備包括去實現(xiàn)UI，構建窗口小部件或實現(xiàn)諸如Lodash和Underscore.js庫中常見的功能，例如：

•  構建常見Web應用程序的布局和交互，例如Netflix瀏覽器站點。
•  實現(xiàn)小工具，如日期選擇器，輪播或電子商務購物車。
•  編寫類似debounce或深度克隆對象的函數(shù)。

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

總的來說，你應該期望大部分的面試都是非常實際的。

JavaScript

你需要了解JavaScript，而且是深入了解。 在面試中，越高級別的人對語言知識深度的期望也越高。 至少，以下是你應該熟悉的JavaScript內容：

•  執(zhí)行上下文、尤其是詞法作用域和閉包。
•  提升機制、函數(shù)與塊作用域、以及函數(shù)表達式和聲明。
•  綁定 - 特別是調用、bind、apply 和this關鍵字。
•  對象原型，構造函數(shù)和mixins。
•  組合函數(shù)和高階函數(shù)。
•  時間委托和冒泡。
•  typeof，instanceof和Object.prototype.toString。
•  使用回調，promises，await和async處理異步調用。
•  何時使用函數(shù)聲明和表達式。

DOM

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

•  使用document.querySelector和舊版瀏覽器中的document.getElementsByTagName選擇或查找節(jié)點。
•  上下遍歷： Node.parentNode，Node.firstChild，Node.lastChild和Node.childNodes。
•  左右遍歷： Node.previousSibling和Node.nextSibling。
•  操作：在DOM樹中添加，刪除，復制和創(chuàng)建節(jié)點。 你應該了解如何修改節(jié)點的文本內容，以及切換，刪除或添加CSS類名等操作。
•  性能：當你有很多節(jié)點時，操作DOM的代價可能會很高，所以你至少應該知道文檔片段和節(jié)點緩存。

CSS

至少，你應該知道如何在頁面上布局元素，如何使用子元素或直接用后代選擇器來定位元素，以及何時使用classes與id。

•  布局：坐在彼此相鄰的元素以及如何將元素放在兩列與三列中。
•  響應式設計：根據(jù)瀏覽器寬度更改元素的尺寸。
•  自適應設計：根據(jù)特定斷點更改元素的尺寸。
•  特異性：如何計算選擇器的特異性以及級聯(lián)怎樣影響屬性。
•  使用恰當?shù)拿臻g和類名。

HTML

知道哪些HTML標簽能最好的表現(xiàn)你正在顯示的內容以及相關屬性，應該掌握手寫HTML的技能。

•  語義標記。
•  標記屬性，例如disabled, async, defer以及何時使用data-*。
•  知道如何聲明你的doctype（很多人因為不是每天都寫新頁面，從而忘記了這一點），以及可以使用哪些meta標簽。
•  可訪問性問題，例如：確保輸入復選框具有更大的響應區(qū)域（使用標簽“for”）。 另外還有role =“button”，role =“presentation”等。

系統(tǒng)設計

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

•  渲染： 客戶端渲染（CSR），服務器端渲染（SSR）和通用渲染。
•  布局： 如果你正在設計多個開發(fā)團隊使用的系統(tǒng)，則需要考慮構建組件，以及是否需要團隊遵循一致的規(guī)范來使用這些組件。
•  狀態(tài)管理：例如在單向數(shù)據(jù)流或雙向數(shù)據(jù)綁定之間進行選擇。你還應該考慮自己的設計是否遵循被動或響應式編程模型，以及組件應該如何相互關聯(lián)。
•  異步流： 你的組件可能需要與服務器實時通信。你的設計應考慮XHR與雙向調用。如果面試官要求你支持舊版瀏覽器，那么你的設計需要在隱藏的iFrame，腳本標簽或XHR之間進行選擇以進行消息傳遞。如果沒有，你可以建議使用websockets，或者你可能決定服務器發(fā)送事件（SSE）更好。
•  關注點分離： MVC、MVVM和MVP模式。
•  多設備支持： 你的設計是否會針對Web、移動Web和混合應用使用相同的實現(xiàn)，或是單獨實現(xiàn)？如果你正在開發(fā)類似于Pinterest這樣的站點，可能會考慮在Web上使用三列，但在移動設備上只考慮一列，那么你的設計該如何處理這個問題？
•  交付： 在大型應用程序中，讓獨立團隊擁有自己的代碼庫并不罕見。這些不同的代碼庫可能彼此依賴，每個代碼庫通常都有自己的管道來釋放對生產(chǎn)環(huán)境的更改。你的設計應考慮如何使用依賴關系（代碼拆分）、測試（單元和集成測試）和部署來構建這些資源。你還應該考慮如何通過CDN分發(fā)資源或內聯(lián)它們以減少網(wǎng)絡延遲。

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

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

•  關鍵渲染路徑。
•  Service workers。
•  圖像優(yōu)化。
•  延遲加載和捆綁拆分。
•  HTTP/2和服務器推送的一般含義。
•  何時預取和預加載資源。
•  減少瀏覽器重排以及何時將元素渲染交給GPU。
•  瀏覽器布局，合成和繪制之間的差異。

數(shù)據(jù)結構和算法

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

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

常用Web知識

你需要掌握構成Web的技術和范例。

•  HTTP請求： GET和POST以及相關標頭，如Cache-Control，ETag，Status Codes和Transfer-Encoding。
•  REST與RPC。
•  安全性：何時使用JSONP，CORs和iFrame策略。

總結

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

除了本文涉及的技術主題外，在面試中你還需要談談自己過去的項目，描述有趣的糾結點以及所做的權衡。

我知道前端面試中還有很多方面被我忽略了，所以我很想聽聽你的經(jīng)歷，或者你認為自己在面試時被問到，但是被我忽略的那些重要內容。