前端工作面試問(wèn)題
備注: 本 repo 包含了一些前端面試問(wèn)題用于考查候選者。不建議對(duì)單個(gè)候選者問(wèn)及每個(gè)問(wèn)題（那需要好幾個(gè)小時(shí)）性昭。只要從列表里挑選一些，就能幫助你考查候選者是否具備所需要的技能了。
Rebecca Murphey 的 Baseline For Front-End Developers 是你在準(zhǔn)備面試前應(yīng)該閱讀的絕佳資源掸读。
記住： 很多問(wèn)題都是開(kāi)放的宏多，可以引發(fā)有趣的討論儿惫。這比直接的答案更能體現(xiàn)此人的能力。
<a name='toc'>目錄</a>
- 最初的貢獻(xiàn)者
- 常見(jiàn)問(wèn)題
- HTML 相關(guān)問(wèn)題
- CSS 相關(guān)問(wèn)題
- JS 相關(guān)問(wèn)題
- jQuery 相關(guān)問(wèn)題
- 代碼相關(guān)的問(wèn)題
- 有趣的問(wèn)題
- 其他參考資料
- 協(xié)議
[?] <a name='contributors'>最初貢獻(xiàn)者</a>
這里大部分的面試題都摘抄自 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
[?] <a name='general'>常見(jiàn)問(wèn)題：</a>
你在昨天/本周學(xué)到了什么肾请？
編寫代碼的哪些方面能夠使你興奮或感興趣？
在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過(guò)程中更胖，你是如何考慮它的UI铛铁、安全性、高性能函喉、SEO避归、可維護(hù)性以及技術(shù)因素的？
談?wù)勀阆矚g的開(kāi)發(fā)環(huán)境管呵。(例如操作系統(tǒng)梳毙，編輯器，瀏覽器捐下，工具等等账锹。)
OSX, sublime Text3, Chrome, SourceTree...你最熟悉哪一套版本控制系統(tǒng)萌业？
git你能描述一下當(dāng)你制作一個(gè)網(wǎng)頁(yè)的工作流程嗎？
-
你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?
- 如果提到了特性檢測(cè)奸柬，可以加分生年。
-
假若你有5個(gè)不同的 CSS 文件, 加載進(jìn)頁(yè)面的最好方式是?
- 文件拼合
-
你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？
- 期待的解決方案包括：
- 文件合并
- 文件最小化/文件壓縮
- 使用 CDN 托管
- 緩存的使用
- 其他
- 期待的解決方案包括：
-
為什么利用多個(gè)域名來(lái)提供網(wǎng)站資源會(huì)更有效廓奕？
- 瀏覽器同一時(shí)間可以從一個(gè)域名下載多少資源抱婉？
- 有什么例外嗎？
- 加分項(xiàng)： 指出在手機(jī)端可能有負(fù)面影響 (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/)
- 加分項(xiàng)： HTTP2 / SPDY
請(qǐng)說(shuō)出三種減少頁(yè)面加載時(shí)間的方法桌粉。（加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間）
-
如果你參與到一個(gè)項(xiàng)目中蒸绩，發(fā)現(xiàn)他們使用 Tab 來(lái)縮進(jìn)代碼，但是你喜歡空格铃肯，你會(huì)怎么做患亿？
- 建議這個(gè)項(xiàng)目使用像 EditorConfig (http://editorconfig.org/) 之類的規(guī)范
- 為了保持一致性，接受項(xiàng)目原有的風(fēng)格
- 直接使用 VIM 的 retab 命令
-
請(qǐng)寫一個(gè)簡(jiǎn)單的幻燈效果頁(yè)面
- 如果不使用JS來(lái)完成押逼，可以加分步藕。
-
你都使用哪些工具來(lái)測(cè)試代碼的性能？
- Profiler, JSPerf, Dromaeo
如果今年你打算熟練掌握一項(xiàng)新技術(shù)挑格，那會(huì)是什么咙冗？
Long-Polling, Websockets, SSE(Server-Sent Event) 之間有什么區(qū)別？
請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解恕齐。
什么是 FOUC（無(wú)樣式內(nèi)容閃爍）乞娄？你如何來(lái)避免 FOUC？
請(qǐng)盡可能完整得描述下從輸入U(xiǎn)RL到整個(gè)網(wǎng)頁(yè)加載完畢及顯示在屏幕上的整個(gè)流程
[?] <a name='html'>HTML相關(guān)問(wèn)題：</a>
doctype（文檔類型）的作用是什么显歧？瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么仪或？
-
使用 XHTML 的局限有哪些？
- 如果頁(yè)面使用 'application/xhtml+xml' 會(huì)有什么問(wèn)題嗎士骤？
-
如果網(wǎng)頁(yè)內(nèi)容需要支持多語(yǔ)言范删，你會(huì)怎么做？
- 在設(shè)計(jì)和開(kāi)發(fā)多語(yǔ)言網(wǎng)站時(shí)拷肌，有哪些問(wèn)題你必須要考慮到旦？
data-屬性的作用是什么？如果把 HTML5 看作做一個(gè)開(kāi)放平臺(tái)巨缘，那它的構(gòu)建模塊有哪些添忘？
請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別若锁？
請(qǐng)描述一下
GET和POST的區(qū)別?
[?] <a name='css'>CSS 相關(guān)問(wèn)題：</a>
CSS 中類(classes)和 ID 的區(qū)別搁骑。
-
描述下 “reset” CSS 文件的作用和使用它的好處。
- 期待能夠指出它的負(fù)面影響，或者提到它的一個(gè)更好的替換者"normalize"
解釋下浮動(dòng)和它的工作原理仲器。
描述
z-index和疊加上下文是如何形成的煤率。列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場(chǎng)景乏冀。
解釋下 CSS sprites蝶糯，以及你要如何在頁(yè)面或網(wǎng)站中實(shí)現(xiàn)它。
你最喜歡的圖片替換方法是什么辆沦，你如何選擇使用昼捍。
討論CSS hacks，條件引用或者其他众辨。
-
如何為有功能限制的瀏覽器提供網(wǎng)頁(yè)端三？
- 你會(huì)使用哪些技術(shù)和處理方法？
有哪些的隱藏內(nèi)容的方法（如果同時(shí)還要保證屏幕閱讀器可用呢鹃彻？）
你用過(guò)柵格系統(tǒng)嗎？如果使用過(guò)妻献，你最喜歡哪種蛛株？
你用過(guò)媒體查詢，或針對(duì)移動(dòng)端的布局/CSS 嗎育拨？
你熟悉 SVG 樣式的書(shū)寫嗎谨履？
如何優(yōu)化網(wǎng)頁(yè)的打印樣式？
在書(shū)寫高效 CSS 時(shí)會(huì)有哪些問(wèn)題需要考慮熬丧？
-
使用 CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些笋粟？(SASS，Compass析蝴，Stylus害捕，LESS)
- 描述下你曾經(jīng)使用過(guò)的 CSS 預(yù)處理的優(yōu)缺點(diǎn)。
-
如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體闷畸，你該如何去實(shí)現(xiàn)尝盼？
- Webfonts (字體服務(wù)例如：Google Webfonts，Typekit 等等佑菩。)
解釋下瀏覽器是如何判斷元素是否匹配某個(gè) CSS 選擇器盾沫？
解釋一下你對(duì)盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來(lái)渲染你的布局殿漠。
請(qǐng)解釋一下
* { box-sizing: border-box; }的作用, 并且說(shuō)明使用它有什么好處赴精？請(qǐng)羅列出你所知道的 display 屬性的全部值
請(qǐng)解釋一下 inline 和 inline-block 的區(qū)別？
請(qǐng)解釋一下 relative绞幌、fixed蕾哟、absolute 和 static 元素的區(qū)別
-
你目前在使用哪一套CSS框架，或者在產(chǎn)品線上使用過(guò)哪一套？(Bootstrap, PureCSS, Foundation 等等)
- 如果有渐苏，請(qǐng)問(wèn)是哪一套掀潮？如果可以，你如何改善CSS框架琼富？
-
請(qǐng)問(wèn)你有使用過(guò) CSS Flexbox 或者 Grid specs 嗎仪吧？
- 如果有，請(qǐng)問(wèn)在性能和效率的方面你是怎么看的鞠眉？
為什么響應(yīng)式設(shè)計(jì)（responsive design）和自適應(yīng)設(shè)計(jì)（adaptive design）不同薯鼠？
你有兼容 retina 屏幕的經(jīng)歷嗎？如果有械蹋，在什么地方使用了何種技術(shù)出皇？
[?] <a name='js'>JS相關(guān)問(wèn)題：</a>
解釋下事件代理。
解釋下 JavaScript 中
this是如何工作的哗戈。解釋下原型繼承的原理郊艘。
你是如何測(cè)試 JavaScript 代碼的？
AMD vs. CommonJS唯咬？
什么是哈希表纱注？
-
解釋下為什么接下來(lái)這段代碼不是 IIFE(立即調(diào)用的函數(shù)表達(dá)式)：
function foo(){ }();.- 要做哪些改動(dòng)使它變成 IIFE?
-
描述以下變量的區(qū)別：
null，undefined或undeclared胆胰？- 該如何檢測(cè)它們狞贱？
什么是閉包，如何使用它蜀涨，為什么要使用它瞎嬉？
請(qǐng)舉出一個(gè)匿名函數(shù)的典型用例？
-
解釋 “JavaScript 模塊模式” 以及你在何時(shí)使用它厚柳。
- 如果有提到無(wú)污染的命名空間氧枣，可以考慮加分。
- 如果你的模塊沒(méi)有自己的命名空間會(huì)怎么樣草娜？
你是如何組織自己的代碼挑胸？是使用模塊模式，還是使用經(jīng)典繼承的方法宰闰？
請(qǐng)指出 JavaScript 宿主對(duì)象和原生對(duì)象的區(qū)別茬贵？
指出下列代碼的區(qū)別：
function Person(){}
var person = Person();
var person = new Person();
.call和.apply的區(qū)別是什么？請(qǐng)解釋
Function.prototype.bind移袍？你何時(shí)優(yōu)化自己的代碼解藻？
-
在什么時(shí)候你會(huì)使用
document.write()？- 大多數(shù)生成的廣告代碼依舊使用
document.write()葡盗，雖然這種用法會(huì)讓人很不爽螟左。
- 大多數(shù)生成的廣告代碼依舊使用
請(qǐng)指出瀏覽器特性檢測(cè)啡浊，特性推斷和瀏覽器 UA 字符串嗅探的區(qū)別？
請(qǐng)盡可能詳盡的解釋 AJAX 的工作原理胶背。
請(qǐng)解釋 JSONP 的工作原理巷嚣，以及它為什么不是真正的 AJAX。
-
你使用過(guò) JavaScript 模板系統(tǒng)嗎钳吟？
- 如有使用過(guò)廷粒，請(qǐng)談?wù)勀愣际褂眠^(guò)哪些庫(kù)，比如 Mustache.js红且，Handlebars 等等坝茎。
請(qǐng)解釋變量聲明提升。
請(qǐng)描述下事件冒泡機(jī)制暇番。
"attribute" 和 "property" 的區(qū)別是什么嗤放？
為什么擴(kuò)展 JavaScript 內(nèi)置對(duì)象不是好的做法？
請(qǐng)指出 document load 和 document ready 兩個(gè)事件的區(qū)別壁酬。
==和===有什么不同次酌？請(qǐng)解釋一下 JavaScript 的同源策略。
如何實(shí)現(xiàn)下列代碼：
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
什么是三元表達(dá)式舆乔？“三元” 表示什么意思和措？
什么是
"use strict";? 使用它的好處和壞處分別是什么？
[?] <a name='jquery'>jQuery 相關(guān)問(wèn)題：</a>
解釋"chaining"蜕煌。
解釋"deferreds"。
你知道哪些針對(duì) jQuery 的優(yōu)化方法诬留。
請(qǐng)解釋
.end()的用途斜纪。你如何給一個(gè)事件處理函數(shù)命名空間，為什么要這樣做文兑？
-
請(qǐng)說(shuō)出你可以傳遞給 jQuery 方法的四種不同值盒刚。
- 選擇器（字符串），HTML（字符串）绿贞，回調(diào)函數(shù)因块，HTML元素，對(duì)象籍铁，數(shù)組涡上，元素?cái)?shù)組，jQuery對(duì)象等拒名。
什么是效果隊(duì)列吩愧？
請(qǐng)指出
.get()，[]增显，eq()的區(qū)別雁佳。請(qǐng)指出
.bind()，.live()和.delegate()的區(qū)別。請(qǐng)指出
$和$.fn的區(qū)別糖权，或者說(shuō)出$.fn的用途堵腹。請(qǐng)優(yōu)化下列選擇器：
$(".foo div#bar:eq(0)")
[?] <a name='jscode'>代碼相關(guān)的問(wèn)題：</a>
modulo(12, 5) // 2
問(wèn)題：實(shí)現(xiàn)滿足上述結(jié)果的modulo函數(shù)
"i'm a lasagna hog".split("").reverse().join("");
問(wèn)題：上面的語(yǔ)句的返回值是什么？
答案："goh angasal a m'i"
( window.foo || ( window.foo = "bar" ) );
問(wèn)題：window.foo 的值是什么星澳？
答案："bar"
只有 window.foo 為假時(shí)的才是上面答案疚顷，否則就是它本身的值。
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);
問(wèn)題：上面兩個(gè) alert 的結(jié)果是什么
答案: "Hello World" 和 ReferenceError: bar is not defined
var foo = [];
foo.push(1);
foo.push(2);
問(wèn)題：foo.length 的值是什么募判？
答案：2
[?] <a name='fun'>有趣的問(wèn)題：</a>
你編寫過(guò)的最酷的代碼是什么荡含？其中你最自豪的是什么？
在你使用的開(kāi)發(fā)工具中届垫，最喜歡哪些方面释液？
你有什么業(yè)余項(xiàng)目嗎？是哪種類型的装处？
你最愛(ài)的 IE 特性是什么误债？
[?] <a name='references'>其他參考資料：</a>
- 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
- http://www.toptal.com/javascript/interview-questions
[?] <a name='license'>協(xié)議:</a>
Copyright 2012 by Darcy Clarke, 基于MIT License 協(xié)議。點(diǎn)擊協(xié)議文件查看詳細(xì)妄迁。
