世界頂級公司的前端面試都問些什麼

時間 2019-11-06

標籤世界頂級公司前端面試什麼欄目快樂工作简体版

原文原文鏈接

原文：davidshariff.com/blog/prepar…前端

做者：David Shariff （亞馬遜 UI基礎架構團隊Leader）web

翻譯：瘋狂的技術宅面試

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

免責聲明：本文的目的並非爲你列出在前端面試中可能會被問到的問題，可是能夠將其視爲知識儲備。編程

面試是一件很難的事情。做爲候選人，一般會給你45分鐘的時間來讓你展現本身的技能。做爲一名面試官，一樣難以在這麼短的時間裏評估這我的是否適合這項工做。對於面試來講，沒有任何一種標準可以適合全部人，面試官一般會覆蓋某一個領域，但除此以外，他們會自行決定應該問哪些問題。後端

無論你坐在面試桌的哪一側，這篇文章都會盡量的涵蓋前端開發中那些最重要的領域。promise

常見的誤解

我看到面試者犯的最大錯誤之一是喜歡準備一些瑣碎的問題，例如「什麼是盒子模型？」或「告訴我在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分發資源或內聯它們以減小網絡延遲。