那些巨頭公司的前端面試都喜歡問些什麼？

在過去的幾年裡，我在亞馬遜和雅虎面試過很多專注於前端開發的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 \u0026amp; 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-\u0026gt;Bar還是Foo-\u0026gt;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/