前言：@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是牛逼的庫還是最牛逼的庫。
—————————————–
伯樂線上注：也歡迎國內前端開發人員來給這個列表添磚加瓦。