摘要：前端工作面試問題備注本包含了一些前端面試問題用于考查候選者。不建議對單個候選者問及每個問題那需要好幾個小時。列舉不同的清除浮動的技巧，并指出它們各自適用的使用場景。選擇器字符串，字符串，回調函數，元素，對象，數組，元素數組，對象等。

https://github.com/darcyclarke/Front-end-Developer-Interview-Questions

前端工作面試問題

備注: 本 repo 包含了一些前端面試問題用于考查候選者。不建議對單個候選者問及每個問題（那需要好幾個小時）。只要從列表里挑選一些，就能幫助你考查候選者是否具備所需要的技能了。

Rebecca Murphey 的 Baseline For Front-End Developers 是你在準備面試前應該閱讀的絕佳資源。

記住： 很多問題都是開放的，可以引發有趣的討論。這比直接的答案更能體現此人的能力。

目錄

最初的貢獻者

常見問題

HTML 相關問題

CSS 相關問題

JS 相關問題

jQuery 相關問題

代碼相關的問題

有趣的問題

其他參考資料

[?] 最初貢獻者

這里大部分的面試題都摘抄自 Paul Irish (@paul_irish) 在 oksoclap 創建的帖子，這份原帖的貢獻者還有：

@bentruyman - http://bentruyman.com

@cowboy - http://benalman.com

@ajpiano - http://ajpiano.com

@SlexAxton - http://alexsexton.com

@boazsender - http://boazsender.com

@miketaylr - http://miketaylr.com

@vladikoff - http://vladfilippov.com

@gf3 - http://gf3.ca

@jon_neal - http://twitter.com/jon_neal

@wookiehangover - http://wookiehangover.com

@darcy_clarke - http://darcyclarke.me

@iansym

[?] 常見問題：

你在昨天/本周學到了什么？

編寫代碼的哪些方面能夠使你興奮或感興趣？

在制作一個Web應用或Web站點的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護性以及技術因素的？

談談你喜歡的開發環境。(例如操作系統，編輯器，瀏覽器，工具等等。)

你最熟悉哪一套版本控制系統？

你能描述一下當你制作一個網頁的工作流程嗎？

你能描述一下漸進增強和優雅降級之間的不同嗎?

如果提到了特性檢測，可以加分。

請解釋一下什么是“語義化的 HTML”。

你如何對網站的文件和資源進行優化？

期待的解決方案包括：

文件合并

文件最小化/文件壓縮

使用 CDN 托管

緩存的使用

其他

為什么利用多個域名來提供網站資源會更有效？

瀏覽器同一時間可以從一個域名下載多少資源？

請說出三種減少頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）

如果你參與到一個項目中，發現他們使用 Tab 來縮進代碼，但是你喜歡空格，你會怎么做？

建議這個項目使用像 EditorConfig (http://editorconfig.org/) 之類的規范

為了保持一致性，接受項目原有的風格

直接使用 VIM 的 retab 命令

請寫一個簡單的幻燈效果頁面

如果不使用JS來完成，可以加分。

你都使用哪些工具來測試代碼的性能？

Profiler, JSPerf, Dromaeo

如果今年你打算熟練掌握一項新技術，那會是什么？

Long-Polling, Websockets, SSE(Server-Sent Event) 之間有什么區別？

請談一下你對網頁標準和標準制定機構重要性的理解。

什么是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

請盡可能完整得描述下從輸入URL到整個網頁加載完畢及顯示在屏幕上的整個流程

[?] HTML相關問題：

doctype（文檔類型）的作用是什么？

瀏覽器標準模式和怪異模式之間的區別是什么？

使用 XHTML 的局限有哪些？

如果頁面使用 "application/xhtml+xml" 會有什么問題嗎？

如果網頁內容需要支持多語言，你會怎么做？

在設計和開發多語言網站時，有哪些問題你必須要考慮？

data-屬性的作用是什么？

如果把 HTML5 看作做一個開放平臺，那它的構建模塊有哪些？

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

請描述一下 GET 和 POST 的區別?

[?] CSS 相關問題：

描述下 “reset” CSS 文件的作用和使用它的好處。

解釋下浮動和它的工作原理。

列舉不同的清除浮動的技巧，并指出它們各自適用的使用場景。

解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。

你最喜歡的圖片替換方法是什么，你如何選擇使用。

討論CSS hacks，條件引用或者其他。

如何為有功能限制的瀏覽器提供網頁？

你會使用哪些技術和處理方法？

有哪些的隱藏內容的方法（如果同時還要保證屏幕閱讀器可用呢？）

你用過柵格系統嗎？如果使用過，你最喜歡哪種？

你用過媒體查詢，或針對移動端的布局/CSS 嗎？

你熟悉 SVG 樣式的書寫嗎？

如何優化網頁的打印樣式？

在書寫高效 CSS 時會有哪些問題需要考慮？

使用 CSS 預處理器的優缺點有哪些？(SASS，Compass，Stylus，LESS)

描述下你曾經使用過的 CSS 預處理的優缺點。

如果設計中使用了非標準的字體，你該如何去實現？

Webfonts (字體服務例如：Google Webfonts，Typekit 等等。)

解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？

解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的布局。

請解釋一下 * { box-sizing: border-box; } 的作用, 并且說明使用它有什么好處？

請羅列出你所知道的 display 屬性的全部值

請解釋一下 inline 和 inline-block 的區別？

請解釋一下 relative、fixed、absolute 和 static 元素的區別

你目前在使用哪一套CSS框架，或者在產品線上使用過哪一套？(Bootstrap, PureCSS, Foundation 等等)

如果有，請問是哪一套？如果可以，你如何改善CSS框架？

請問你有使用過 CSS Flexbox 或者 Grid specs 嗎？

如果有，請問在性能和效率的方面你是怎么看的？

[?] JS相關問題：

解釋下事件代理。

解釋下 JavaScript 中 this 是如何工作的。

解釋下原型繼承的原理。

你是如何測試JavaScript代碼的？

AMD vs. CommonJS？

什么是哈希表？

解釋下為什么接下來這段代碼不是 IIFE(立即調用的函數表達式)：function foo(){ }();.

要做哪些改動使它變成 IIFE?

描述以下變量的區別：null，undefined 或 undeclared？

該如何檢測它們？

什么是閉包，如何使用它，為什么要使用它？

請舉出一個匿名函數的典型用例？

解釋 “JavaScript 模塊模式” 以及你在何時使用它。

如果有提到無污染的命名空間，可以考慮加分。

如果你的模塊沒有自己的命名空間會怎么樣？

你是如何組織自己的代碼？是使用模塊模式，還是使用經典繼承的方法？

請指出 JavaScript 宿主對象和原生對象的區別？

指出下列代碼的區別：

function Person(){} 
var person = Person(); 
var person = new Person();

.call 和 .apply 的區別是什么？

請解釋 Function.prototype.bind 的作用？

你何時優化自己的代碼？

你能解釋一下 JavaScript 中的繼承是如何工作的嗎？

在什么時候你會使用 document.write()？

大多數生成的廣告代碼依舊使用 document.write()，雖然這種用法會讓人很不爽。

請指出瀏覽器特性檢測，特性推斷和瀏覽器 UA 字符串嗅探的區別？

請盡可能詳盡的解釋 AJAX 的工作原理。

請解釋 JSONP 的工作原理，以及它為什么不是真正的 AJAX。

你使用過 JavaScript 模板系統嗎？

如有使用過，請談談你都使用過哪些庫，比如 Mustache.js，Handlebars 等等。

請解釋變量聲明提升。

請描述下事件冒泡機制。

"attribute" 和 "property" 的區別是什么？

為什么擴展 JavaScript 內置對象不是好的做法？

為什么擴展 JavaScript 內置對象是好的做法？

請指出 document load 和 document ready 兩個事件的區別。

== 和 === 有什么不同？

你如何從瀏覽器的 URL 中獲取查詢字符串參數。

請解釋一下 JavaScript 的同源策略。

請描述一下 JavaScript 的繼承模式。

如何實現下列代碼：

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

描述一種 JavaScript 中實現 memoization(避免重復運算)的策略。

什么是三元表達式？“三元” 表示什么意思？

函數的參數元是什么？

什么是 "use strict"; ? 使用它的好處和壞處分別是什么？

[?] jQuery 相關問題：

解釋"chaining"。

解釋"deferreds"。

你知道哪些針對 jQuery 的優化方法。

請解釋 .end() 的用途。

你如何給一個事件處理函數命名空間，為什么要這樣做？

請說出你可以傳遞給 jQuery 方法的四種不同值。

選擇器（字符串），HTML（字符串），回調函數，HTML元素，對象，數組，元素數組，jQuery對象等。

什么是效果隊列？

請指出 .get()，[]，eq() 的區別。

請指出 .bind()，.live() 和 .delegate() 的區別。

請指出 $ 和 $.fn 的區別，或者說出 $.fn 的用途。

請優化下列選擇器：

$(".foo div#bar:eq(0)")

[?] 代碼相關的問題：

modulo(12, 5) // 2

問題：實現滿足上述結果的modulo函數

"i"m a lasagna hog".split("").reverse().join("");

問題：上面的語句的返回值是什么？
答案："goh angasal a m"i"

( window.foo || ( window.foo = "bar" ) );

問題：window.foo 的值是什么？
答案："bar"
只有 window.foo 為假時的才是上面答案，否則就是它本身的值。

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

問題：上面兩個 alert 的結果是什么
答案: "Hello World" 和 ReferenceError: bar is not defined

var foo = [];
foo.push(1);
foo.push(2);

問題：foo.length 的值是什么？
答案：2

[?] 有趣的問題：

你編寫過的最酷的代碼是什么？其中你最自豪的是什么？

在你使用過的開發工具中，最喜歡哪個？

你有什么業余項目嗎？是哪種類型的？

你最愛的 IE 特性是什么？

[?] 其他參考資料：

http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before

http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/

http://css-tricks.com/interview-questions-css/

http://davidshariff.com/quiz/

http://blog.sourcing.io/interview-questions