作者：David Shariff （亞馬遜 UI基礎架構團隊Leader）
翻譯：瘋狂的技術宅
在過去的幾年裡，我在亞馬遜和雅虎面試過許多前端工程師。在這篇文章中，我想分享一些技巧，幫助大家做好準備。
免責宣告：本文的目的並不是為你列出在前端面試中可能會被問到的問題，但是可以將其視為知識儲備。
面試是一件很難的事情。作為候選人，通常會給你45分鐘的時間來讓你展示自己的技能。 作為一名面試官，同樣難以在這麼短的時間裡評估這個人是否適合這項工作。 對於面試來說，沒有任何一種標準能夠適合所有人，面試官通常會覆蓋某一個領域，但除此之外，他們會自行決定應該問哪些問題。
不管你坐在面試桌的哪一側，這篇文章都會盡可能的涵蓋前端開發中那些最重要的領域。
常見的誤解
我看到面試者犯的最大錯誤之一是喜歡準備一些瑣碎的問題，例如“什麼是盒子模型？”或“告訴我在JavaScript中==和===之間的區別？”等等。知道這些問題的答案固然很好，但它並不能告訴面試官你真正的水平。
相反，你應該為面試做一些非常實際的準備，能夠真正體現出自己的JavaScript，CSS和HTML編碼水平。為面試的準備包括去實現UI，構建視窗小部件或實現諸如Lodash和Underscore.js庫中常見的功能，例如：
-
構建常見Web應用程式的佈局和互動，例如Netflix瀏覽器站點。
-
實現小工具，如日期選擇器，輪播或電子商務購物車。
-
編寫類似debounce或深度克隆物件的函式。
說到庫，常見的另一個錯誤是人們喜歡完全依賴最新的框架來解決面試問題。你可能會想：既然在開發中我可以使用jQuery，React，Angular等，為什麼還要重新發明輪子，為什麼不能在面試中使用它？這個問題很好，技術、框架和庫總會隨著時間的推移而發生變化 —— 我更感興趣的是：你需要了解前端開發的基本原理，而不是依賴更高階別的抽象。如果你不能在不依賴這些庫的情況下回答的面試問題，我希望你至少可以徹底解釋和推測庫在背後都做了什麼。
總的來說，你應該期望大部分的面試都是非常實際的。
JavaScript
你需要了解JavaScript，而且是深入瞭解。在面試中，越高階別的人對語言知識深度的期望也越高。 至少，以下是你應該熟悉的JavaScript內容：
-
執行上下文、尤其是詞法作用域和閉包。
-
提升機制、函式與塊作用域、以及函式表示式和宣告。
-
繫結 - 特別是呼叫、bind、apply 和this關鍵字。
-
物件原型，建構函式和mixins。
-
組合函式和高階函式。
-
時間委託和冒泡。
-
typeof，instanceof和Object.prototype.toString。
-
使用回撥，promises，await和async處理非同步呼叫。
-
何時使用函式宣告和表示式。
DOM
如何遍歷和操作DOM很重要，如果他們依賴jQuery或者編寫了很多React和Angular型別的應用，那麼這就是大多數面試者應該努力的地方。你可能不會每天都做這些，因為我們大多數人都使用抽象排序。但是如果不依賴第三方庫，你應該知道該如何進行以下操作：
-
使用document.querySelector和舊版瀏覽器中的document.getElementsByTagName選擇或查詢節點。
-
上下遍歷： Node.parentNode，Node.firstChild，Node.lastChild和Node.childNodes。
-
左右遍歷： Node.previousSibling和Node.nextSibling。
-
操作：在DOM樹中新增，刪除，複製和建立節點。 你應該瞭解如何修改節點的文字內容，以及切換，刪除或新增CSS類名等操作。
-
效能：當你有很多節點時，操作DOM的代價可能會很高，所以你至少應該知道文件片段和節點快取。
CSS
至少，你應該知道如何在頁面上佈局元素，如何使用子元素或直接用後代選擇器來定位元素，以及何時使用classes與id。
-
佈局：坐在彼此相鄰的元素以及如何將元素放在兩列與三列中。
-
響應式設計：根據瀏覽器寬度更改元素的尺寸。
-
自適應設計：根據特定斷點更改元素的尺寸。
-
特異性：如何計算選擇器的特異性以及級聯怎樣影響屬性。
-
使用恰當的名稱空間和類名。
HTML
知道哪些HTML標籤能最好的表現你正在顯示的內容以及相關屬性，應該掌握手寫HTML的技能。
-
語義標記。
-
標記屬性，例如disabled, async, defer以及何時使用data-*。
-
知道如何宣告你的doctype（很多人因為不是每天都寫新頁面，從而忘記了這一點），以及可以使用哪些meta標籤。
-
可訪問性問題，例如：確保輸入核取方塊具有更大的響應區域（使用標籤“for”）。 另外還有role =“button”，role =“presentation”等。
系統設計
針對後端系統設計的面試通常會涉及MapReduce、設計分散式鍵值儲存或需要CAP定理等知識。 儘管你的前端工作不需要深入瞭解此類系統是如何設計的，但是在被要求設計常見應用程式的前端架構時，千萬不要感到驚訝。通常這些問題會問的含糊，比如“設計像Pinterest這樣的網站”或“告訴我如何構建購物結賬服務？”。 以下是需要考慮的領域：
-
渲染： 客戶端渲染（CSR），伺服器端渲染（SSR）和通用渲染。
-
佈局： 如果你正在設計多個開發團隊使用的系統，則需要考慮構建元件，以及是否需要團隊遵循一致的規範來使用這些元件。
-
狀態管理：例如在單向資料流或雙向資料繫結之間進行選擇。你還應該考慮自己的設計是否遵循被動或響應式程式設計模型，以及元件應該如何相互關聯。
-
非同步流： 你的元件可能需要與伺服器實時通訊。你的設計應考慮XHR與雙向呼叫。如果面試官要求你支援舊版瀏覽器，那麼你的設計需要在隱藏的iFrame，指令碼標籤或XHR之間進行選擇以進行訊息傳遞。如果沒有，你可以建議使用websockets，或者你可能決定伺服器傳送事件（SSE）更好。
-
關注點分離： MVC、MVVM和MVP模式。
-
多裝置支援： 你的設計是否會針對Web、移動Web和混合應用使用相同的實現，或是單獨實現？如果你正在開發類似於Pinterest這樣的站點，可能會考慮在Web上使用三列，但在移動裝置上只考慮一列，那麼你的設計該如何處理這個問題？
-
交付： 在大型應用程式中，讓獨立團隊擁有自己的程式碼庫並不罕見。這些不同的程式碼庫可能彼此依賴，每個程式碼庫通常都有自己的管道來釋放對生產環境的更改。你的設計應考慮如何使用依賴關係（程式碼拆分）、測試（單元和整合測試）和部署來構建這些資源。你還應該考慮如何通過CDN分發資源或內聯它們以減少網路延遲。
網路表現
除了通用程式設計技術之外，你應該期望面試官檢視你的程式碼或設計及其對效能的影響。 在以前將CSS放在頁面的頂部，並在底部放置JS指令碼的做法就足夠了，但是Web正在快速發展，你應該熟悉這個領域的複雜性。
-
關鍵渲染路徑。
-
Service workers。
-
影像優化。
-
延遲載入和捆綁拆分。
-
HTTP/2和伺服器推送的一般含義。
-
何時預取和預載入資源。
-
減少瀏覽器重排以及何時將元素渲染交給GPU。
-
瀏覽器佈局，合成和繪製之間的差異。
資料結構和演算法
這點可能具有爭議，但是不瞭解高時間複雜度和常見執行時（如O(N)和O(N Log N)的基本知識會對你造成困擾。理解記憶體管理等方面的知識對當前十分常見的單頁應用非常有幫助。 例如：如果你要實現一個拼寫檢查功能，那麼瞭解常見的資料結構和演算法將使你的工作變得更加輕鬆。
我不是說你需要一個CS學位，但是這個行業已經不再是寫一個簡單的頁面了。 網上有很多資源，你可以很快掌握這些基礎知識。
常用Web知識
你需要掌握構成Web的技術和範例。
-
HTTP請求： GET和POST以及相關標頭，如Cache-Control，ETag，Status Codes和Transfer-Encoding。
-
REST與RPC。
-
安全性：何時使用JSONP，CORs和iFrame策略。
總結
作為Web開發人員或工程師，需要大量的知識。 不要拘泥於所需的知識深度，而要保持開放的心態，學習開發所需的所有複雜技術。
除了本文涉及的技術主題外，在面試中你還需要談談自己過去的專案，描述有趣的糾結點以及所做的權衡。
我知道前端面試中還有很多方面被我忽略了，所以我很想聽聽你的經歷，或者你認為自己在面試時被問到，但是被我忽略的那些重要內容。
原文最早釋出於京程一燈公眾號：jingchengyideng
關注公眾號 jingchengyideng ，回覆“6”，獲取本文所講到的知識體系大圖。檢視自己離年薪40萬還差哪些技能點。