透過面試不是件容易的事，作為候選人，通常需要在 45 分鐘的時間內展示自己能做些什麼。作為一名面試官，同樣難以在這麼短的時間內評估候選人是否適合。對於面試來說，並不存在一刀切的方法，面試官問的問題通常會有一個範圍，但除此之外，他們可以自行決定要問哪些其他問題。

在過去的幾年裡，我面試過很多專注於前端開發的 Web 開發者和軟體工程師，在這篇文章中，我想分享一些面試技巧，幫助候選人為面試做好準備。

作為曾經的候選人和麵試官，我試圖在這篇文章中涵蓋你可能會在面試中被問到的最重要的前端開發知識。

常見的誤解

我見過候選人犯的最大錯誤之一就是準備了一些瑣碎的問題，例如“什麼是盒子模型”或者“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 應用程式需要掌握大量的知識。不要被知識的深度所限制，而是要保持開放的心態去學習所有複雜的部分。

除了這裡涉及的技術主題之外，你還需要討論過去參與的專案，描述發生了哪些有趣的事情以及做出了哪些權衡。

自己是從事五年的前端工程師了，不少人私下問我，2019年前端該怎麼學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助那些想學習前端，卻又不知道怎麼開始學習的同學。

如果你依然在程式設計的世界裡迷茫，不知道自己的未來規劃，可以加入web前端學習交流群：731771211 裡面可以與大神一起交流並走出迷茫。新手可進群免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行！群裡不停更新最新的教程和學習方法（進群送web前端系統學習路線，詳細的前端專案實戰教學影片），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入

點選：

巨頭公司的前端面試都喜歡問些什麼？45分鐘高分虜獲offer！

相關文章