前端工作面試問題
本文包含了一些用于考查候選者的前端面試問題路幸。不建議對單個候選者問及每個問題 (那需要好幾個小時)。只要從列表里挑選一些付翁，就能幫助你考查候選者是否具備所需要的技能简肴。
備注： 這些問題中很多都是開放性的，可以引發(fā)有趣的討論百侧。這比直接的答案更能體現(xiàn)此人的能力砰识。
<a name='toc'>目錄</a>
- 常見問題
- HTML 相關(guān)問題
- CSS 相關(guān)問題
- JS 相關(guān)問題
- 測試相關(guān)問題
- 效能相關(guān)問題
- 網(wǎng)絡(luò)相關(guān)問題
- 代碼相關(guān)問題
- 趣味問題
參與協(xié)作
<a name='general-questions'>常見問題：</a>
- 你在昨天/本周學(xué)到了什么能扒？
- 編寫代碼的哪些方面能夠使你興奮或感興趣？
- 你最近遇到過什么技術(shù)挑戰(zhàn)辫狼？你是如何解決的初斑？
- 在制作一個網(wǎng)頁應(yīng)用或網(wǎng)站的過程中，你是如何考慮其 UI予借、安全性越平、高性能、SEO灵迫、可維護(hù)性以及技術(shù)因素的秦叛？
- 請談?wù)勀阆矚g的開發(fā)環(huán)境。
- 你最熟悉哪一套版本控制系統(tǒng)瀑粥？
- 你能描述當(dāng)你制作一個網(wǎng)頁的工作流程嗎挣跋？
- 假若你有 5 個不同的樣式文件 (stylesheets), 整合進(jìn)網(wǎng)站的最好方式是?
- 你能描述漸進(jìn)增強(qiáng) (progressive enhancement) 和優(yōu)雅降級 (graceful degradation) 之間的不同嗎?
- 你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化？
- 瀏覽器同一時間可以從一個域名下載多少資源狞换？
- 有什么例外嗎避咆？
- 請說出三種減少頁面加載時間的方法。(加載時間指感知的時間或者實(shí)際加載時間)
- 如果你參與到一個項(xiàng)目中修噪，發(fā)現(xiàn)他們使用 Tab 來縮進(jìn)代碼查库，但是你喜歡空格，你會怎么做黄琼？
- 請寫一個簡單的幻燈效果頁面樊销。
- 如果今年你打算熟練掌握一項(xiàng)新技術(shù)，那會是什么脏款？
- 請談?wù)勀銓W(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解围苫。
- 什么是 FOUC (無樣式內(nèi)容閃爍)？你如何來避免 FOUC撤师？
- 請解釋什么是 ARIA 和屏幕閱讀器 (screenreaders)剂府，以及如何使網(wǎng)站實(shí)現(xiàn)無障礙訪問 (accessible)。
- 請解釋 CSS 動畫和 JavaScript 動畫的優(yōu)缺點(diǎn)剃盾。
- 什么是跨域資源共享 (CORS)腺占？它用于解決什么問題？
<a name='html-questions'>HTML 相關(guān)問題：</a>
-
doctype(文檔類型) 的作用是什么痒谴？ - 瀏覽器標(biāo)準(zhǔn)模式 (standards mode) 衰伯、幾乎標(biāo)準(zhǔn)模式（almost standards mode）和怪異模式 (quirks mode) 之間的區(qū)別是什么？
- HTML 和 XHTML 有什么區(qū)別闰歪？
- 如果頁面使用 'application/xhtml+xml' 會有什么問題嗎嚎研？
- 如果網(wǎng)頁內(nèi)容需要支持多語言蓖墅，你會怎么做库倘？
- 在設(shè)計(jì)和開發(fā)多語言網(wǎng)站時临扮，有哪些問題你必須要考慮？
- 使用
data-屬性的好處是什么教翩？ - 如果把 HTML5 看作做一個開放平臺杆勇，那它的構(gòu)建模塊有哪些？
- 請描述
cookies饱亿、sessionStorage和localStorage的區(qū)別蚜退。 - 請解釋
<script>、<script async>和<script defer>的區(qū)別彪笼。 - 為什么通常推薦將 CSS
<link>放置在<head></head>之間钻注，而將 JS<script>放置在</body>之前？你知道有哪些例外嗎配猫？ - 什么是漸進(jìn)式渲染 (progressive rendering)幅恋？
- 你用過哪些不同的 HTML 模板語言？
<a name='css-questions'>CSS 相關(guān)問題：</a>
- CSS 中類 (classes) 和 ID 的區(qū)別泵肄。
- 請問 "resetting" 和 "normalizing" CSS 之間的區(qū)別捆交？你會如何選擇，為什么腐巢？
- 請解釋浮動 (Floats) 及其工作原理品追。
- 描述
z-index和疊加上下文是如何形成的。 - 請描述 BFC(Block Formatting Context) 及其如何工作冯丙。
- 列舉不同的清除浮動的技巧肉瓦，并指出它們各自適用的使用場景。
- 請解釋 CSS sprites银还，以及你要如何在頁面或網(wǎng)站中實(shí)現(xiàn)它风宁。
- 你最喜歡的圖片替換方法是什么，你如何選擇使用蛹疯。
- 你會如何解決特定瀏覽器的樣式問題戒财？
- 如何為有功能限制的瀏覽器提供網(wǎng)頁？
- 你會使用哪些技術(shù)和處理方法捺弦？
- 有哪些的隱藏內(nèi)容的方法 (如果同時還要保證屏幕閱讀器可用呢)饮寞？
- 你用過柵格系統(tǒng) (grid system) 嗎？如果使用過列吼，你最喜歡哪種幽崩？
- 你用過媒體查詢，或針對移動端的布局/CSS 嗎寞钥？
- 你熟悉 SVG 樣式的書寫嗎慌申？
- 如何優(yōu)化網(wǎng)頁的打印樣式？
- 在書寫高效 CSS 時會有哪些問題需要考慮？
- 使用 CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些蹄溉？
- 請描述你曾經(jīng)使用過的 CSS 預(yù)處理器的優(yōu)缺點(diǎn)咨油。
- 如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)柒爵？
- 請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器役电？
- 請描述偽元素 (pseudo-elements) 及其用途。
- 請解釋你對盒模型的理解棉胀，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的布局彬呻。
- 請解釋
* { box-sizing: border-box; }的作用, 并且說明使用它有什么好處狂芋？ - 請羅列出你所知道的 display 屬性的全部值
- 請解釋 inline 和 inline-block 的區(qū)別？
- 請解釋 relative、fixed孙咪、absolute 和 static 元素的區(qū)別
- CSS 中字母 'C' 的意思是疊層 (Cascading)落蝙。請問在確定樣式的過程中優(yōu)先級是如何決定的 (請舉例)粪摘？如何有效使用此系統(tǒng)击喂？
- 你在開發(fā)或生產(chǎn)環(huán)境中使用過哪些 CSS 框架？你覺得應(yīng)該如何改善他們论笔？
- 請問你有嘗試過 CSS Flexbox 或者 Grid 標(biāo)準(zhǔn)規(guī)格嗎采郎？
- 為什么響應(yīng)式設(shè)計(jì) (responsive design) 和自適應(yīng)設(shè)計(jì) (adaptive design) 不同？
- 你有兼容 retina 屏幕的經(jīng)歷嗎狂魔？如果有蒜埋，在什么地方使用了何種技術(shù)？
- 請問為何要使用
translate()而非 absolute positioning最楷，或反之的理由整份？為什么？
<a name='js-questions'>JS 相關(guān)問題：</a>
- 請解釋事件代理 (event delegation)籽孙。
- 請解釋 JavaScript 中
this是如何工作的烈评。 - 請解釋原型繼承 (prototypal inheritance) 的原理。
- 你怎么看 AMD vs. CommonJS犯建？
- 請解釋為什么接下來這段代碼不是 IIFE (立即調(diào)用的函數(shù)表達(dá)式)：
function foo(){ }();.- 要做哪些改動使它變成 IIFE?
- 描述以下變量的區(qū)別：
null讲冠，undefined或undeclared？- 該如何檢測它們适瓦？
- 什么是閉包 (closure)竿开，如何使用它，為什么要使用它玻熙？
- 請舉出一個匿名函數(shù)的典型用例否彩？
- 你是如何組織自己的代碼？是使用模塊模式嗦随，還是使用經(jīng)典繼承的方法列荔？
- 請指出 JavaScript 宿主對象 (host objects) 和原生對象 (native objects) 的區(qū)別？
- 請指出以下代碼的區(qū)別：
function Person(){}、var person = Person()贴浙、var person = new Person()筷转？ -
.call和.apply的區(qū)別是什么？ - 請解釋
Function.prototype.bind悬而？ - 在什么時候你會使用
document.write()？ - 請指出瀏覽器特性檢測锭汛，特性推斷和瀏覽器 UA 字符串嗅探的區(qū)別笨奠？
- 請盡可能詳盡的解釋 Ajax 的工作原理。
- 使用 Ajax 都有哪些優(yōu)劣唤殴？
- 請解釋 JSONP 的工作原理般婆，以及它為什么不是真正的 Ajax。
- 你使用過 JavaScript 模板系統(tǒng)嗎朵逝？
- 如有使用過蔚袍，請談?wù)勀愣际褂眠^哪些庫？
- 請解釋變量聲明提升 (hoisting)配名。
- 請描述事件冒泡機(jī)制 (event bubbling)啤咽。
- "attribute" 和 "property" 的區(qū)別是什么？
- 為什么擴(kuò)展 JavaScript 內(nèi)置對象不是好的做法渠脉？
- 請指出 document load 和 document DOMContentLoaded 兩個事件的區(qū)別宇整。
-
==和===有什么不同？ - 請解釋 JavaScript 的同源策略 (same-origin policy)芋膘。
- 如何實(shí)現(xiàn)下列代碼：
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
- 什么是三元表達(dá)式 (Ternary expression)？“三元 (Ternary)” 表示什么意思为朋？
- 什么是
"use strict";? 使用它的好處和壞處分別是什么？ - 請實(shí)現(xiàn)一個遍歷至
100的 for loop 循環(huán)习寸，在能被3整除時輸出 "fizz"，在能被5整除時輸出 "buzz"霞溪，在能同時被3和5整除時輸出 "fizzbuzz"。 - 為何通常會認(rèn)為保留網(wǎng)站現(xiàn)有的全局作用域 (global scope) 不去改變它威鹿，是較好的選擇？
- 為何你會使用
load之類的事件 (event)忽你？此事件有缺點(diǎn)嗎？你是否知道其他替代品，以及為何使用它們根蟹？ - 請解釋什么是單頁應(yīng)用 (single page app), 以及如何使其對搜索引擎友好 (SEO-friendly)。
- 你使用過 Promises 及其 polyfills 嗎? 請寫出 Promise 的基本用法（ES6）简逮。
- 使用 Promises 而非回調(diào) (callbacks) 優(yōu)缺點(diǎn)是什么？
- 使用一種可以編譯成 JavaScript 的語言來寫 JavaScript 代碼有哪些優(yōu)缺點(diǎn)散庶？
- 你使用哪些工具和技術(shù)來調(diào)試 JavaScript 代碼？
- 你會使用怎樣的語言結(jié)構(gòu)來遍歷對象屬性 (object properties) 和數(shù)組內(nèi)容悲龟？
- 請解釋可變 (mutable) 和不變 (immutable) 對象的區(qū)別屋讶。
- 請舉出 JavaScript 中一個不變性對象 (immutable object) 的例子？
- 不變性 (immutability) 有哪些優(yōu)缺點(diǎn)须教？
- 如何用你自己的代碼來實(shí)現(xiàn)不變性 (immutability)皿渗？
- 請解釋同步 (synchronous) 和異步 (asynchronous) 函數(shù)的區(qū)別。
- 什么是事件循環(huán) (event loop)轻腺？
- 請問調(diào)用棧 (call stack) 和任務(wù)隊(duì)列 (task queue) 的區(qū)別是什么乐疆？
- 解釋
function foo() {}與var foo = function() {}用法的區(qū)別
<a name='testing-questions'>測試相關(guān)問題：</a>
- 對代碼進(jìn)行測試的有什么優(yōu)缺點(diǎn)？
- 你會用什么工具測試你的代碼功能贬养？
- 單元測試與功能/集成測試的區(qū)別是什么诀拭？
- 代碼風(fēng)格 linting 工具的作用是什么？
<a name='performance-questions'>效能相關(guān)問題：</a>
- 你會用什么工具來查找代碼中的性能問題煤蚌？
- 你會用什么方式來增強(qiáng)網(wǎng)站的頁面滾動效能耕挨？
- 請解釋 layout、painting 和 compositing 的區(qū)別尉桩。
<a name='network-questions'>網(wǎng)絡(luò)相關(guān)問題：</a>
- 為什么傳統(tǒng)上利用多個域名來提供網(wǎng)站資源會更有效筒占？
- 請盡可能完整得描述從輸入 URL 到整個網(wǎng)頁加載完畢及顯示在屏幕上的整個流程。
- Long-Polling蜘犁、Websockets 和 Server-Sent Event 之間有什么區(qū)別翰苫？
- 請描述以下 request 和 response headers：
- Diff. between Expires, Date, Age and If-Modified-...
- Do Not Track
- Cache-Control
- Transfer-Encoding
- ETag
- X-Frame-Options
- 什么是 HTTP method？請羅列出你所知道的所有 HTTP method这橙，并給出解釋奏窑。
- 請解釋 HTTP status 301 與 302 的區(qū)別？
<a name='coding-questions'>代碼相關(guān)的問題：</a>
問題：foo的值是什么屈扎？
var foo = 10 + '20';
問題：如何實(shí)現(xiàn)以下函數(shù)埃唯？
add(2, 5); // 7
add(2)(5); // 7
問題：下面的語句的返回值是什么？
"i'm a lasagna hog".split("").reverse().join("");
問題：window.foo的值是什么鹰晨？
( window.foo || ( window.foo = "bar" ) );
問題：下面兩個 alert 的結(jié)果是什么墨叛？
var foo = "Hello";
(function() {
var bar = " World";
alert(foo + bar);
})();
alert(foo + bar);
問題：foo.length的值是什么止毕？
var foo = [];
foo.push(1);
foo.push(2);
問題：foo.x的值是什么？
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};
問題：下面代碼的輸出是什么漠趁？
console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
console.log('three');
<a name='fun-questions'>趣味問題：</a>
- 你最近寫過什么的很酷的項(xiàng)目嗎扁凛？
- 在你使用的開發(fā)工具中，最喜歡哪些方面闯传？
- 誰使你踏足了前端開發(fā)領(lǐng)域谨朝？
- 你有什么業(yè)余項(xiàng)目嗎？是哪種類型的甥绿？
- 你最愛的 IE 特性是什么字币？
- 你對咖啡有沒有什么喜好？
<a name='contributors'>貢獻(xiàn)者：</a>
本文檔始于 2009 年妹窖，是以下作者的合作成果：@paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed 和 @iansym骄呼。
時至今日蜓萄，文檔已經(jīng)融入超過 100 位開發(fā)者的貢獻(xiàn)嫉沽。
