前言:本文是轉載文,文中的我指原作者。
來源:segmentfault
作者:瘋狂的技術宅
在過去的幾年裏,我在亞馬遜和雅虎面試過許多前端工程師。在這篇文章中,我想分享一些技巧,幫助大家做好準備。
免責聲明:本文的目的並不是爲你列出在前端面試中可能會被問到的問題,但是可以將其視爲知識儲備。
面試很難,作爲候選人,通常會給你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開發人員或工程師,需要大量的知識。不要拘泥於所需的知識深度,而要保持開放的心態,學習開發所需的所有複雜技術。
除了本文涉及的技術主題外,在面試中你還需要談談自己過去的項目,描述有趣的糾結點以及所做的權衡。
我知道前端面試中還有很多方面被我忽略了,所以我很想聽聽你的經歷,或者你認爲自己在面試時被問到,但是被我忽略的那些重要內容。