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

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

前端工作面試問題

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

Rebecca Murphey 的 Baseline For Front-End Developers 是你在準(zhǔn)備面試前應(yīng)該閱讀的絕佳資源。

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

目錄

最初的貢獻(xiàn)者

常見問題

HTML 相關(guān)問題

CSS 相關(guān)問題

JS 相關(guān)問題

jQuery 相關(guān)問題

代碼相關(guān)的問題

有趣的問題

其他參考資料

[?] 最初貢獻(xiàn)者

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

@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

[?] 常見問題：

你在昨天/本周學(xué)到了什么？

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

在制作一個Web應(yīng)用或Web站點(diǎn)的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的？

談?wù)勀阆矚g的開發(fā)環(huán)境。(例如操作系統(tǒng)，編輯器，瀏覽器，工具等等。)

你最熟悉哪一套版本控制系統(tǒng)？

你能描述一下當(dāng)你制作一個網(wǎng)頁的工作流程嗎？

你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級之間的不同嗎?

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

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

你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化？

期待的解決方案包括：

文件合并

文件最小化/文件壓縮

使用 CDN 托管

緩存的使用

其他

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

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

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

如果你參與到一個項(xiàng)目中，發(fā)現(xiàn)他們使用 Tab 來縮進(jìn)代碼，但是你喜歡空格，你會怎么做？

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

為了保持一致性，接受項(xiàng)目原有的風(fēng)格

直接使用 VIM 的 retab 命令

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

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

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

Profiler, JSPerf, Dromaeo

如果今年你打算熟練掌握一項(xiàng)新技術(shù)，那會是什么？

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

請談一下你對網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。

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

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

[?] HTML相關(guān)問題：

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

瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？

使用 XHTML 的局限有哪些？

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

如果網(wǎng)頁內(nèi)容需要支持多語言，你會怎么做？

在設(shè)計(jì)和開發(fā)多語言網(wǎng)站時，有哪些問題你必須要考慮？

data-屬性的作用是什么？

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

請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

請描述一下 GET 和 POST 的區(qū)別?

[?] CSS 相關(guān)問題：

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

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

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

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

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

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

如何為有功能限制的瀏覽器提供網(wǎng)頁？

你會使用哪些技術(shù)和處理方法？

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

你用過柵格系統(tǒng)嗎？如果使用過，你最喜歡哪種？

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

你熟悉 SVG 樣式的書寫嗎？

如何優(yōu)化網(wǎng)頁的打印樣式？

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

使用 CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些？(SASS，Compass，Stylus，LESS)

描述下你曾經(jīng)使用過的 CSS 預(yù)處理的優(yōu)缺點(diǎn)。

如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)？

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

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

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

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

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

請解釋一下 inline 和 inline-block 的區(qū)別？

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

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

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

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

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

[?] JS相關(guān)問題：

解釋下事件代理。

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

解釋下原型繼承的原理。

你是如何測試JavaScript代碼的？

AMD vs. CommonJS？

什么是哈希表？

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

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

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

該如何檢測它們？

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

請舉出一個匿名函數(shù)的典型用例？

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

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

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

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

請指出 JavaScript 宿主對象和原生對象的區(qū)別？

指出下列代碼的區(qū)別：

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

.call 和 .apply 的區(qū)別是什么？

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

你何時優(yōu)化自己的代碼？

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

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

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

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

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

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

你使用過 JavaScript 模板系統(tǒng)嗎？

如有使用過，請談?wù)勀愣际褂眠^哪些庫，比如 Mustache.js，Handlebars 等等。

請解釋變量聲明提升。

請描述下事件冒泡機(jī)制。

"attribute" 和 "property" 的區(qū)別是什么？

為什么擴(kuò)展 JavaScript 內(nèi)置對象不是好的做法？

為什么擴(kuò)展 JavaScript 內(nèi)置對象是好的做法？

請指出 document load 和 document ready 兩個事件的區(qū)別。

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

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

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

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

如何實(shí)現(xiàn)下列代碼：

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

描述一種 JavaScript 中實(shí)現(xiàn) memoization(避免重復(fù)運(yùn)算)的策略。

什么是三元表達(dá)式？“三元” 表示什么意思？

函數(shù)的參數(shù)元是什么？

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

[?] jQuery 相關(guān)問題：

解釋"chaining"。

解釋"deferreds"。

你知道哪些針對 jQuery 的優(yōu)化方法。

請解釋 .end() 的用途。

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

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

選擇器（字符串），HTML（字符串），回調(diào)函數(shù)，HTML元素，對象，數(shù)組，元素數(shù)組，jQuery對象等。

什么是效果隊(duì)列？

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

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

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

請優(yōu)化下列選擇器：

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

[?] 代碼相關(guān)的問題：

modulo(12, 5) // 2

問題：實(shí)現(xiàn)滿足上述結(jié)果的modulo函數(shù)

"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 的結(jié)果是什么
答案: "Hello World" 和 ReferenceError: bar is not defined

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

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

[?] 有趣的問題：

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

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

你有什么業(yè)余項(xiàng)目嗎？是哪種類型的？

你最愛的 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