在外網(wǎng)看到davidshariff這篇關于前端應該學習的內容，給了我很大的啟發(fā)恃疯，也明確了哪些知識是我們應該著重去學習和關注的预伺。所以花了些時間翻譯出來职祷，希望給曾經(jīng)在前端浩瀚學海里面迷茫找不到方向的人一些參考。文中有翻譯不夠準確的地方歡迎指正蚁鳖。

在亞馬遜和雅虎任職的這幾年磺芭，我面試了許許多多前端方面的應聘者。在這篇文章中我想分享一些能夠幫助大家更好準備面試的關鍵點醉箕。

事先聲明钾腺，這篇文章的內容不是在前端面試時你可能會被問到的具體的問題清單，而是面試中會涉及到的知識點的原理的一個概括讥裤。

面試并不容易放棒，作為應聘者，你必須在45分鐘之內好好的展示自己己英。而作為面試官间螟，如果在這短短時間內去判斷一個候選人是否適合這個崗位也很有難度。面試很難幫我們確認候選人跟崗位是完全匹配的损肛，但是通過對面試問題的回答可以對于候選人有個區(qū)分度厢破。

即作為應聘者也曾擔任過面試官的我，希望能通過這篇文章來展示前端開發(fā)當中最為重要的幾個方面治拿。

常見誤區(qū)

最常見的一個問題就是許多候選人準備面試非常糾結于一些很細節(jié)化的問題摩泪，諸如“什么是盒子模型”或者“js當中==和===的區(qū)別”等。當然這些細節(jié)問題如果了解當然是很好的忍啤，但是這些問題并不能真正反映出應聘者的水平加勤。

相反的，可以預見我們所遇到的面試大多可能更注重手撕代碼同波。面試中經(jīng)常會要求應聘者實現(xiàn)UI布局鳄梅，封裝組件或者實現(xiàn)一個Lodash或者Underscore.js中封裝好的方法。比如：

• 實現(xiàn)網(wǎng)站的基本布局
• 實現(xiàn)一個日期選擇器（date picker）未檩，carousel或者購物車
• 實現(xiàn)個debounce方法或者深拷貝

而說到各種框架戴尸，另一個我常見的問題就是應聘者拿最新框架中的方法來解決面試所問的問題。你可能不理解當我在實際工作當中使用的都是jQuery, React, Angular這樣的成熟框架冤狡，為什么還要自己重復造輪子孙蒙，而不是在面試中直接用這些框架去回答项棠。
我們要知道，技術挎峦、框架和組件庫會不斷的更新香追，而更為看重的能力是對于前端開發(fā)的底層原理的理解而不是對封裝工具的依賴性。如果脫離了輪子你就無法解答問題坦胶，那么至少希望候選人能大概了解并能解釋所用的工具在運行的時候的原理是什么透典。

總體來說，我們對大部分的面試的設想還是要更多傾向于實用性編程顿苇。

JavaScript

作為候選人了解js和其底層原理是很有必要的峭咒。當我們在應聘一些更資深級別的面試的時候往往會考察對于語言了解的深度。至少纪岁，以下這幾個js的原理必須要理解凑队。

• Execution context, especially lexical scope and closures.
• 執(zhí)行上下文，尤其是詞法作用域和閉包
• Hoisting, function & block scoping and function expressions & declarations.
• 變量提升幔翰，函數(shù)漩氨、塊級作用域和函數(shù)表達式以及聲明
• Binding – specifically call, bind, apply and lexical this.
• 綁定，尤其是call bind apply和this指向
• Object prototypes, constructors and mixins.
• 對象原型导匣、構造函數(shù)和繼承
• Composition and high order functions.
• 高階函數(shù)
• Event delegation and bubbling.
• 事件捕獲和事件冒泡
• Type Coercion using typeof, instanceof and Object.prototype.toString.
• 類型判斷才菠，typeof, instanceof and Object.prototype.toString.
• Handling asynchronous calls with callbacks, promises, await and async.
• 異步處理，promises, await and async.
• When to use function declarations and expressions.
• 什么時候使用函數(shù)聲明和表達式

DOM

如何遍歷和操作DOM非常重要贡定。但是這對于非常依賴jQuery赋访、angular和react這些框架的開發(fā)者來說非常困難。由于框架的使用缓待，在日常工作中蚓耽，我們很少會直接去進行DOM操作。但是在沒有框架的時候旋炒，我們需要了解這些方面：

• Selecting or finding nodes using document.querySelector and in older browsers document.getElementsByTagName.
• 能用document.querySelector定位到具體的節(jié)點（還有老式瀏覽器中document.getElementsByTagName）
• Traversal up and down – Node.parentNode, Node.firstChild, Node.lastChild and Node.childNodes.
• 上下遍歷-Node.parentNode, Node.firstChild, Node.lastChild and Node.childNodes.這些節(jié)點代表的含義
• Traversal left and right – Node.previousSibling and Node.nextSibling.
• 左右遍歷- Node.previousSibling and Node.nextSibling.
• Manipulation – add, remove, copy, and create nodes in the DOM tree. You should know operations such as how to change the text content of a node and toggle, remove or add a CSS classname.
• DOM操縱-DOM樹的增刪改查步悠。必須要了解如何修改dom節(jié)點的文本內容以及怎么修改其CSS class
• Performance – touching the DOM can be expensive when you have many nodes, you should at least know about document fragments and node caching.
• 性能-在DOM節(jié)點很多的情況下操作DOM樹可能帶來性能問題。至少要了解document fragments和node caching

CSS

最基本的我們要知道頁面如何布局瘫镇，如何使用子選擇器或者后代選擇器來命中元素鼎兽。以及什么時候應該使用class和id。

• Layout – sitting elements next to each other and how to place elements in two columns vs three columns.
• 布局-相鄰元素布局和兩列三列布局
• Responsive design – changing an element’s dimensions based on the browser width size.
• 響應式布局-如何根據(jù)瀏覽器的寬度修改元素的大小
• Adaptive design – changing an element’s dimensions based on specific break points.
• 自適應布局-根據(jù)不同屏幕像素改變元素的大小
• Specificity – how to calculate a selector’s specificity and how the cascade affects attributes.
• 權重-如何計算選擇器的具體權重和繼承所影響的屬性铣除。
• Appropriate namespacing and naming of classnames.
• 恰當?shù)拿臻g和class命名

HTML

對于實現(xiàn)的布局和相關的屬性應該使用哪個HTML標簽應該手到擒來谚咬。

• Semantic markup.
  HTML標簽的語義
• Tag attributes, such as disabled, async, defer and when to use data-.
  標簽屬性，如：disabled, async, defer和何時使用 data-
• Knowing how to declare your doctype (most people are not writing new pages every day and forget this) and what meta tags are available to use.
  懂得不同doctype聲明的使用場景（大部分人不會每天都寫新的頁面尚粘，因而容易遺忘這一點）择卦，以及該使用什么樣的meta標簽。
• Accessibility concerns, for example, making sure an input checkbox has a larger responding area (use label “for”). Also, role=”button”, role=”presentation”, etc.
  良好的交互性，比如：保證input checkbox輸入框有較大的輸入?yún)^(qū)域（使用"for"屬性）秉继，還有設置role=”button”或者role=”presentation”等祈噪。

系統(tǒng)設計

系統(tǒng)設計的面試通常是針對后端開發(fā)人員，尤其是涉及到MapReduce尚辑、設計分布式鍵對值存儲或者CAP定理以及相關的知識點辑鲤。盡管對于日常主要做前端開發(fā)的工程師來說可以不需要對系統(tǒng)設計等知識有非常深入的了解，但是工作中遇到設計前端應用框架也是很正常的腌巾。這些問題通常是比較寬泛的遂填，類似于：“設計一個仿Pinterest的網(wǎng)站”或者“介紹一下如何實現(xiàn)一個購物結算的服務”铲觉。我列出了以下幾個方面值得大家思考的：

• Rendering – client-side (CSR), server-side (SSR) and universal rendering.
• 渲染-客戶端澈蝙、服務端和全局渲染機制
• Layout – if you’re designing a system used by multiple development teams, you need to think about building components and if you require teams to follow a consist markup to use said components.
• 布局。如果你所設計的系統(tǒng)會被多個開發(fā)團隊使用撵幽，你需要考慮可構建組件灯荧，如果你希望團隊遵循包含的標記來使用組件，那可以考慮聲明式組件盐杂。
• State management such as choosing between unidirectional data flow or two-way data binding. You should also think about if your design will follow a passive or reactive programming model, and how components related to each other for example Foo–> Bar or Foo –>Bar.
• 狀態(tài)管理逗载，如在單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定的狀態(tài)管理。同時也要考慮設計是遵循被動模型還是響應式變成模型链烈，以及組件之間是如何彼此關聯(lián)的厉斟，例如Foo–> Bar or Foo –>Bar.
• Async flow – your components may need to communicate in real-time with the server. The design you propose should consider XHR vs bidirectional calls. If your interviewer asks you to support older browsers, your design will need to choose between hidden iFrames, script tags or XHR for messaging. If not, you could propose using websockets or you might decide server-sent events (SSE) are better.
• 異步數(shù)據(jù)流。你的組件可能會需要與服務端請求實時數(shù)據(jù)强衡。在設計的過程中擦秽，需要考慮XHR和雙工通信的對比。如果在面試中問到需要向下兼容瀏覽器漩勤，那么你所考慮的具體方案還需要靠考慮到隱藏式iFrames感挥、script標簽或者XHR等通信方式。如果不需要考慮兼容性越败，那么可以考慮使用websockets或者server-sent events (SSE)會更好触幼。
• Separation of concerns – Model-View-Controller (MVC), Model-View-ViewModel (MVVM) and Model-View-Presenter (MVP) patterns.
• 分離模式設計。Model-View-Controller (MVC)究飞、Model-View-ViewModel (MVVM) 和Model-View-Presenter (MVP) 模式的異同置谦。
• Multi-device support – Will your design use the same implementation for the web, mobile web, and hybrid apps or will they be separate implementations? If you were building a site like Pinterest, you might consider three columns on the web but only one column on mobile devices. How would your design handle this?
• 多設備支持。你是否會遇到一套代碼需要適配web亿傅、移動端web以及混合APP媒峡，或者說不同平臺分別實現(xiàn)？袱蜡。如果是創(chuàng)建一個適配PC和移動端的網(wǎng)站丝蹭，需要考慮到web端的三列布局，但是移動端只有一列布局之間應該如何設計和實現(xiàn)。
• Asset delivery – In large applications, it’s not uncommon to have independent teams owning their own codebases. These different codebases probably have dependencies on each other and each usually has their own pipeline to release changes to production. Your design should consider how assets are built with dependencies (code splitting), tested (unit and integration tests) and deployed. You should also think about how you will vend assets through a CDN or inline them to reduce network latency.
• Asset資源調度奔穿。在大型應用當中镜沽，每個獨立團隊有自己的代碼倉非常常見。這些不同的代碼倉可能互相依賴贱田，而且每個代碼倉通常都有獨立的流程來發(fā)布生產(chǎn)環(huán)境更新缅茉。在設計的時候需要考慮到assets資源文件與依賴如何打包、測試和發(fā)布男摧。同時還要考慮到如何通過CDN來加載資源或者內置資源來減少網(wǎng)絡請求异吻。

前端方面的系統(tǒng)設計是一個非常大的課題徽龟，值得我們更多的關注。后續(xù)我會再寫一篇博客來詳細展開這方面的內容。

Web性能

除了常見的編程實踐方案之外射沟，面試官有可能會要求查看你的代碼設計及其性能優(yōu)化點窄坦。常見有比如吧css加載放在document上方屯吊，js文件放下document代碼下方加載》瓯叮現(xiàn)在web快速發(fā)展，因此需要我們對這方面都要有所了解竿刁。

• Critical rendering path.
• 關鍵渲染順序
• Service workers.
• Service workers
• Image optimizations.
• 圖片優(yōu)化
• Lazy loading and bundle splitting.
• 懶加載和分包
• General implications of HTTP/2 and server-push.
• HTTP2和服務端推送的基本原理
• When to prefetch and preload resources.
• 資源預加載的發(fā)生時間
• Reduce browser reflows and when to promote an element to the GPU.
• 減少瀏覽器回流和以及GPU什么時候重構元素
• Differences between the browser layout, compositing and painting.
• 不同瀏覽器布局黄锤、組成和繪制

數(shù)據(jù)結構和算法

前端是否要掌握算法和數(shù)據(jù)結構具有一定的爭議，但是對于時間復雜度的概念和常見的時間復雜度如O(n),O(nlogn)有一個基本認識對你來說百利而無一害食拜。單頁應用如今非常常見鸵熟，了解如內存管理等只是對于應用開發(fā)非常有幫助。比如负甸，如果你需要創(chuàng)建一個客戶端輸入檢查的應用流强，了解基本的數(shù)據(jù)結構和算法會給你很大的幫助。

當然我并不是說你要具備CS學位惑惶，但是如今的前端發(fā)展迅速煮盼，再也不是像以前一樣簡單的寫寫頁面了，因而需要我們有良好的計算機基礎带污。在網(wǎng)上有許許多多的在線資源可以可以快速學習這些基礎只是僵控。

基本的網(wǎng)絡知識

對于web網(wǎng)絡的技術和規(guī)范要有一個基本了解。

• HTTP requests – GET and POST along with associated headers such as Cache-Control, ETag, Status Codes, and Transfer-Encoding.
• HTTP請求符鱼冀。Get和POST以及其相關的請求頭如 Cache-Control, ETag, Status Codes和Transfer-Encoding.
• REST vs RPC.
• REST與RPC
• Security – when to use JSONP, CORs, and iFrame policies.
  網(wǎng)絡安全报破，什么時候使用JSONP，CORs和iFrame

總結

成為一個前端工程師需要非常多的知識儲備千绪。不要被所需要的知識深度所限制充易，而是要積極去學習用戶們使用的產(chǎn)品背后所有涉及到的各個部分的原理。

除了這篇文章所提到的技術要點荸型，你還有可能需要展示自己的項目經(jīng)歷盹靴，介紹遇到的有挑戰(zhàn)的場景以及對對不同方案所做的權衡。

當然這篇文章不可能涵蓋前端面試的方方面面，我寫的肯定有所遺漏稿静。如果遺漏了重要的知識點梭冠，歡迎分享你的面試經(jīng)驗，跟我一起優(yōu)化這篇文章的內容改备。

原文需墻：Preparing for a Front-End Web Development Interview at Top Tech Companies
作者：davidshariff