[[95588]]

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

請記住，下面的很多問題都是開放式的，無標(biāo)準(zhǔn)答案，并能引發(fā)有趣的討論。相比直接的答案，相信你在面試前端工程師時，從討論中你對候選人會了解的更多。

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

問題貢獻(xiàn)者

@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嗎？ （在天朝***問你用微博嗎？）

→如果用，你都關(guān)注那些人？

★你用Github嗎？

→如果用，你關(guān)注的項目有什么？

★你關(guān)注的博客有那些？

★你使用那些版本管理系統(tǒng)，比如Git，SVN等？

★你常用的開發(fā)環(huán)境是怎樣的？比如操作系統(tǒng)，文本編輯器，瀏覽器，及其他工具等。

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

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

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

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

★你更喜歡在哪個瀏覽器下進(jìn)行開發(fā)？你使用那些開發(fā)人員工具？

★你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化？期待的解決方案包括：

· 文件合并

· 文件最小化/文件壓縮

· 使用CDN托管

· 緩存的使用

· 其他

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

→瀏覽器一次可以從一個域名下做多少資源？

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

★如果你接到了一個使用Tab來縮進(jìn)代碼的項目，但是你喜歡空格，你會怎么做？

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

· 為了保持一致性，轉(zhuǎn)換成項目原有的風(fēng)格

· 直接使用VIM的retab命令

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

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

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

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

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

· 其它。

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

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

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

#p#

HTML相關(guān)問題

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

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

★使用XHTML的局限有那些？

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

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

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

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

★在HTML5中如何使用XML？

★’data-’屬性的作用是什么？

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

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

JS相關(guān)問題

★你使用過那些Javascript庫？

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

★什么是哈希表？

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

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

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

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

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

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

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

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

★請指出Javascript宿主對象和內(nèi)置對象的區(qū)別？

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

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

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

★請解釋’Funciton.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的繼承模式。

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

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

★描述一種JavaScript memoization（避免重復(fù)運(yùn)算）的策略。

★什么是三元條件語句？

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

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

#p#

JS代碼示例：

~~3.14   

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

"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′

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

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

#p#

jQuery相關(guān)問題

★解釋”chaining”。

★解釋”deferreds”。

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

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

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

★請說出你可以傳遞到j(luò)Query方法的四種不同值。

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

★什么是效果隊列？

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

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

★請指出 ‘$’ 和 ‘$.fn’ 的區(qū)別？或者解釋什么是 ‘$.fn’ 。

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

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

#p#

CSS相關(guān)問題

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

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

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

★解釋css sprites，如何使用。

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

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

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

→你會使用那些技術(shù)和處理方法。

★何視覺隱藏網(wǎng)頁內(nèi)容，只讓它們在屏幕閱讀器中可用。

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

★你使用過meidia queries（媒體查詢）嗎，或者移動網(wǎng)站相關(guān)的CSS布局。

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

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

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

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

→如果使用，描述你的喜好。

★你是否接觸過使用非標(biāo)準(zhǔn)字體的設(shè)計？

→字體服務(wù)，Google Webfonts, Typekit,等等。

★請解釋瀏覽器是如何根據(jù)CSS選擇器選擇對應(yīng)元素的。

可選的有趣問題

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

★你知道HTML5的幫派標(biāo)志嗎？

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

★你使用的開發(fā)工具中，你最喜歡的部分是什么？

★你有什么業(yè)余項目嗎？是那種類型的？

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

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

→靜靜地看他們是否將紙翻轉(zhuǎn)。

★海盜還是忍者？

→如果是兩者的合體，并有恰當(dāng)理由，可以加分。如果是僵尸猴子海盜加忍者加兩分。(譯注，此題文化差異過大）

★如果沒有在Web開發(fā)，你會做什么？

★卡門圣迭哥的隱藏處在哪里？

→提示：本題的答案永遠(yuǎn)是錯的。

★你***的IE特性是什么？

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

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

原文鏈接：http://blog.jobbole.com/29269/