在過去的幾年裏，我在亞馬遜和雅虎面試過很多專注於前端開發的Web開發者和軟件工程師，在這篇文章中，我想分享一些面試技巧，幫助候選人爲面試做好準備。
免責聲明——本文並非旨在列出在前端面試中可能會被問到的所有問題，但可以將其視爲知識的基線。
通過面試不是件容易的事，作爲候選人，通常需要在45分鐘的時間內展示自己能做些什麼。作爲一名面試官，同樣難以在這麼短的時間內評估候選人是否適合。對於面試來說，並不存在一刀切的方法，面試官問的問題通常會有一個範圍，但除此之外，他們可以自行決定要問哪些其他問題。
作爲曾經的候選人和面試官，我試圖在這篇文章中涵蓋你可能會在面試中被問到的最重要的前端開發知識。
常見的誤解
我見過候選人犯的最大錯誤之一就是準備了一些瑣碎的問題，例如“什麼是盒子模型”或者“JavaScript中的==和===之間的區別是什麼”。知道這些問題的答案固然是好，但這並不會告訴面試官來太多有用的信息。
相反，在實際的面試中，你可能需要使用JavaScript、CSS和HTML來編寫代碼。在你的面試期間，你可能需要實現UI、構建窗口小部件或使用Lodash和Underscore.js這樣的庫編寫常用的實用程序函數。例如：
-
構建常見的Web應用程序的佈局和交互，例如類似Netflix網站那樣的。
-
實現小部件，如日期選擇器、輪播或電子商務網站購物車。
-
寫一個類似debounce或深度clone對象的函數。
說到庫，我看到候選人經常犯的另一個錯誤是他們需要完全依賴最新的框架來解決面試問題。你可能會想，如果我可以在生產環境中使用jQuery、React、Angular等，那爲什麼就不能在面試中使用它們呢？技術、框架和庫會隨着時間的推移而發生變化——我更感興趣的是你是否瞭解前端開發的底層原理，而不是依賴更高層次的抽象。如果你不能在沒有它們的情況下回答面試問題，我希望你至少可以徹底解釋和推測這些庫背後的原理。
總的來說，大部分的面試都涉及實際的編碼。
JavaScript
你需要了解JavaScript，而且是徹底地瞭解。你面試的職位越高，對語言知識的要求就越高。以下是你應該熟悉的JavaScript知識點：
-
執行上下文，尤其是詞法作用域和閉包；
-
提升、函數和塊作用域，以及函數表達式和聲明；
-
綁定——特別是call、bind、apply和this；
-
對象原型、構造函數和mixin；
-
組合和高階函數；
-
事件委託和冒泡；
-
使用typeof、instanceof和Object.prototype.toString進行類型轉換；
-
使用回調、promise、await和async處理異步調用；
-
什麼時候可以使用函數聲明和表達式。
DOM
知道如何遍歷和操作DOM非常重要，對於重度依賴jQuery或者開發了很多React & Angular類型應用程序的候選人來說，他們可能會在這個問題上栽跟斗。你可能不會每天都直接接觸DOM，因爲我們大多數人都在使用各種抽象。在不使用第三方庫的情況下，你需要知道如何執行以下這些操作：
-
使用document.querySelector選擇或查找節點，在舊版瀏覽器中使用document.getElementsByTagName；
-
上下遍歷——Node.parentNode、Node.firstChild、Node.lastChild和Node.childNodes；
-
左右遍歷——Node.previousSibling和Node.nextSibling；
-
操作——在DOM樹中添加、刪除、複製和創建節點。你應該瞭解如何修改節點的文本內容以及切換、刪除或添加CSS類名等操作；
-
性能——當有很多節點時，修改DOM的成本會很高，你至少應該知道如何使用文檔片段和節點緩存。
CSS
至少，你應該知道如何在頁面上佈局元素，如何使用子元素或直接後代選擇器來定位元素，以及什麼時候該用類、什麼時候該用ID。
-
佈局——安排彼此相鄰的元素的位置，以及如何將元素佈置成兩列或三列；
-
響應式設計——根據瀏覽器寬度大小更改元素的尺寸；
-
自適應設計——根據特定斷點更改元素的尺寸；
-
特異性——如何計算選擇器的特異性，以及級聯如何影響屬性；
-
適當的命名空間和類命名。
HTML
知道哪些HTML標籤最能代表你正在顯示的內容以及相關屬性，應該掌握手工知識。
-
語義標記；
-
標記屬性，例如disabled、async、defer以及何時使用data-*；
-
知道如何聲明doctype（大多數人不是每天都會寫新頁面，所以可能會忘了這個）以及可以使用哪些元標籤；
-
可訪問性問題，例如，確保輸入複選框具有更大的響應區域（使用標籤“for”）。另外還有role=“button”、role=“presentation”，等等。
系統設計
在系統設計方面，通常涉及MapReduce、分佈式鍵值存儲系統或CAP定理等知識。雖然前端工程師日常不需要深入瞭解如何設計這類系統，但在被要求設計出常見應用程序的前端架構時，你也不應該感到驚訝。這些問題通常含糊不清，比如“設計一個像Pinterest這樣的網站”或者“如何構建購物結賬服務？”。以下是需要考慮的知識點：
-
渲染——客戶端渲染（CSR）、服務器端渲染（SSR）和全局渲染；
-
佈局——如果你正在設計被多個開發團隊使用的系統，需要考慮進行組件化，以及是否需要開發團隊通過指定標記來使用組件；
-
狀態管理，例如在單向數據流或雙向數據綁定之間做出選擇。你還應該考慮你的設計是採用被動式還是反應式編程模型，以及組件如何相互關聯，例如是Foo->Bar還是Foo->Bar；
-
異步——你的組件可能需要與服務器進行實時的通信。在設計時需要考慮使用XHR或雙向調用。如果你的面試官要求你支持舊瀏覽器，那麼你需要在隱藏iFrame、script標籤或XHR之間做出選擇。如果沒有，你可以建議使用websocket，或者使用服務器發送事件（SSE），這樣會更好；
-
關注點分離——Model-View-Controller（MVC）、Model-View-ViewModel（MVVM）和Model-View-Presenter（MVP）模式；
-
多設備支持——你的實現是否同時支持Web、移動Web和混合應用程序，還是爲每一種場景提供單獨的實現？如果你正在構建像Pinterest這樣的網站，你可能會考慮在Web上使用三列，但在移動設備上只使用一列，你的設計將如何處理這個問題；
-
資產文件交付——在大型應用程序中，獨立團隊擁有自己的代碼庫是常有的事。這些不同的代碼庫可能彼此依賴，每個代碼庫通常都有自己的管道來發布代碼變更。你的設計需要考慮如何基於依賴項進行資產文件的構建（代碼拆分）、測試（單元測試和集成測試）和部署。你還需要考慮如何通過CDN交付資產文件或者內聯它們來減少網絡延遲。
Web性能
除了通用編程最佳實踐之外，你應該期望訪問者查看你的代碼或設計及其性能影響。它曾經足以將CSS置於文檔的頂部，而JS腳本位於頁面底部，但Web正在快速移動，你應該熟悉這個領域的複雜性。
-
關鍵渲染路徑；
-
Service Worker；
-
圖像優化；
-
延遲加載和捆綁拆分；
-
HTTP/2和服務器推送的一般含義；
-
何時預取和預加載資源；
-
減少瀏覽器迴流以及何時將元素提升到GPU；
-
瀏覽器佈局、組合和繪製之間的區別。
數據結構和算法
這個可能有點爭議，但對Big-O時間複雜性和常見運行時間（如O(N)和O(N Log N)）有一個基本的瞭解對你來說不會是壞事。單頁應用程序現在非常常見，所以瞭解內存管理等方面的知識是有幫助的。例如，如果你被要求構建客戶端拼寫檢查程序，那麼瞭解常見的數據結構和算法將會讓你的任務變得輕鬆許多。
我不是說你一定需要念一個計算機學位，但這個行業已經從構建簡單的網頁轉移到了計算機科學。網上有很多資源可以讓那個你快速掌握基礎知識。
一般的Web知識
你需要掌握一些構成Web的技術和範式。
-
HTTP請求——GET和POST以及相關標頭，如Cache-Control、ETag、Status Codes和Transfer-Encoding；
-
REST與RPC；
-
安全性——何時使用JSONP、COR和iFrame。
總結
對Web開發人員或工程師來說，構建Web應用程序需要掌握大量的知識。不要被知識的深度所限制，而是要保持開放的心態去學習所有複雜的部分。
除了這裏涉及的技術主題之外，你還需要討論過去參與的項目，描述發生了哪些有趣的事情以及做出了哪些權衡。
更多內容，請關注前端之巔。
英文原文：http://davidshariff.com/blog/preparing-for-a-front-end-web-development-interview-in-2017/