前端開發面試集錦【轉載】

前言：@darcyclarke 在 Github 上分享了一個 repo，其中包括了很多前端面試問題，可用於檢驗潛在的候選人。毫不推薦在單個候選人身上用上所用的問題（那樣會花費好幾個小時滴）。從這個列表選擇一些，應該能從候選人身上，檢測出你所須要的技能。

請記住，下面的不少問題都是開放式的，無標準答案，並能引起有趣的討論。相比直接的答案，相信你在面試前端工程師時，從討論中你對候選人會了解的更多。

如下中文譯文由@shawnqiang 完成。

 

問題貢獻者

@bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.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/) and @darcy_clarke (http://darcyclarke.me)

 

通常問題

★你用Twitter嗎？ （在天朝最好問你用微博嗎？）

→若是用，你都關注那些人？

★你用Github嗎？

→若是用，你關注的項目有什麼？

★你關注的博客有那些？

★你使用那些版本管理系統，好比Git，SVN等？

★你經常使用的開發環境是怎樣的？好比操做系統，文本編輯器，瀏覽器，及其餘工具等。

★你能描述一下你製做一個網頁的工做流程嗎？

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

→若是提到了特性檢測，能夠加分。

★請解釋一下什麼是語義化的HTML？

★你更喜歡在哪一個瀏覽器下進行開發？你使用那些開發人員工具？

★你如何對網站的文件和資源進行優化？期待的解決方案包括：

· 文件合併

· 文件最小化/文件壓縮

· 使用CDN託管

· 緩存的使用

· 其餘

★爲何利用多個域名來存儲網站資源會更有效？

→瀏覽器一次能夠從一個域名下作多少資源？

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

★若是你接到了一個使用Tab來縮進代碼的項目，可是你喜歡空格，你會怎麼作？

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

· 爲了保持一致性，轉換成項目原有的風格

· 直接使用VIM的retab命令

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

→若是不使用JS來完成，能夠加分。

★你都使用那些工做來測試代碼的性能？

· 例如JSPerf (http://jsperf.com/)

· 例如Dromaeo (http://dromaeo.com/)

· 其它。

★若是今年你打算熟練掌握一項新技術，那會是什麼？

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

★什麼是FOUC？你如何來避免FOUC？

 

HTML相關問題

★文檔類型的做用是什麼？你知道多少種文檔類型？

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

★使用XHTML的侷限有那些？

→若是頁面使用’application/xhtml+xml’會有什麼問題嗎？

★若是網頁內容須要支持多語言，你會怎麼作？

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

★在HTML5的頁面中可使用XHTML的語法嗎？

★在HTML5中如何使用XML？

★’data-’屬性的做用是什麼？

★若是把HTML5看做作一個開放平臺，那它的構建模塊有那些？

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

 

JS相關問題

★你使用過那些Javascript庫？

★你是否研究過你所使用的JS庫或者框架的源代碼？

★什麼是哈希表？

★’undefined’變量和’undeclared’變量分別指什麼？

★閉包是什麼，如何使用它，爲何要使用它？

→你喜歡的使用閉包的模式是什麼？

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

★請解釋什麼是Javascript的模塊模式，並舉出實用實例。

·若是有提到無污染的命名空間，能夠考慮加分。

·若是你的模塊沒有本身的命名空間會怎麼樣？

★你如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？

★請指出Javascript宿主對象和內置對象的區別？

★指出下列代碼的區別：

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

★’.call’和’.apply’的區別是什麼？

★請解釋’Funciton.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	[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

★描述一種JavaScript memoization（避免重複運算）的策略。

★什麼是三元條件語句？

★函數的參數元是什麼？

★什麼是」use strict」?使用它的好處和壞處分別是什麼？

 

JS代碼示例：

1

~~3.14

★問題：上面的語句的返回值是什麼？ **答案：3

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

★問題：上面的語句的返回值是什麼？ **答案：」goh angasal a m’i」

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

★問題：window.foo的值是什麼？ **答案：」bar」 只有window.foo爲假時的纔是上面答案，不然就是它自己的值。

1 2 3

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

★問題：上面兩個alert的結果是什麼 答案: 「Hello World」 & ReferenceError: bar is not defined

1 2 3

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

★問題：foo.length的值是什麼？ **答案：’2′

1 2	var foo = {};   foo.bar = 'hello' ;

★問題：foo.length的值是什麼？ **答案: undefined

 

jQuery相關問題

★解釋」chaining」。

★解釋」deferreds」。

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

★請解釋’.end()’的用途。

★你如何給一個事件處理函數命名空間，爲何要這樣作？

★請說出你能夠傳遞到jQuery方法的四種不一樣值。

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

★什麼是效果隊列？

★請指出’.get()’、’[]‘、’eq()’,的區別。

★請指出’.bing()’、’.live()’ 和 ‘.delegate()’的區別。

★請指出 ‘$’ 和 ‘$.fn’ 的區別？或者解釋什麼是 ‘$.fn’ 。

★請優化下列選擇器：

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

 

CSS相關問題

★描述css reset的做用和用途。

★描述下浮動和它的工做原理。

★清除浮動的方法有那些，分別適用於什麼情形。

★解釋css sprites，如何使用。

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

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

★如何爲有功能限制的瀏覽器提供網頁。

→你會使用那些技術和處理方法。

★何視覺隱藏網頁內容，只讓它們在屏幕閱讀器中可用。

★你使用過網格系統嗎？若是使用過，你最喜歡哪一種？

★你使用過meidia queries（媒體查詢）嗎，或者移動網站相關的CSS佈局。

★你熟悉SVG樣式的書寫嗎？

★如何優化網頁的打印樣式。

★在書寫高效CSS文件時會有哪些問題須要考慮。

★你使用CSS預處理器嗎？(SASS,Compass,Stylus,LESS)

→若是使用，描述你的喜愛。

★你是否接觸過使用非標準字體的設計？

→字體服務，Google Webfonts, Typekit,等等。

★請解釋瀏覽器是如何根據CSS選擇器選擇對應元素的。

 

可選的有趣問題

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

★你知道HTML5的幫派標誌嗎？

★你是否正在或曾經在一艘船上。(不懂這個幽默）

★你使用的開發工具中，你最喜歡的部分是什麼？

★你有什麼業餘項目嗎？是那種類型的？

★解釋cornify的重要性？(本題徹底摸不到頭腦）

★在一張紙上，垂直寫下ABCDE，而後不用任何代碼，將他們到序排列。

→靜靜地看他們是否將紙翻轉。

★海盜仍是忍者？

→若是是二者的合體，並有恰當理由，能夠加分。若是是殭屍猴子海盜加忍者加兩分。(譯註，此題文化差別過大）

★若是沒有在Web開發，你會作什麼？

★卡門聖迭哥的隱藏處在哪裏？

→提示：本題的答案永遠是錯的。

★你最愛的IE特性是什麼？

★完句填空： Brendan Eich和Doug Crockford是JavaScript的________。

★討論：jQuery是牛逼的庫仍是最牛逼的庫。

 

—————————————–

伯樂在線注：也歡迎國內前端開發人員來給這個列表添磚加瓦。