本文包含了一些用于考查候選者的前端面試問題。不建議對(duì)單個(gè)候選者問及每個(gè)問題 (那需要好幾個(gè)小時(shí))。只要從列表里挑選一些，就能幫助你考查候選者是否具備所需要的技能。
備注： 這些問題中很多都是開放性的，可以引發(fā)有趣的討論。這比直接的答案更能體現(xiàn)此人的能力。
常見問題：
- 你在昨天/本周學(xué)到了什么？
- 編寫代碼的哪些方面能夠使你興奮或感興趣？
- 你最近遇到過什么技術(shù)挑戰(zhàn)？你是如何解決的？
- 在制作一個(gè)網(wǎng)頁應(yīng)用或網(wǎng)站的過程中，你是如何考慮其 UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的？
- 請(qǐng)談?wù)勀阆矚g的開發(fā)環(huán)境。
- 你最熟悉哪一套版本控制系統(tǒng)？
- 你能描述當(dāng)你制作一個(gè)網(wǎng)頁的工作流程嗎？
- 假若你有 5 個(gè)不同的樣式文件 (stylesheets), 整合進(jìn)網(wǎng)站的最好方式是?
- 你能描述漸進(jìn)增強(qiáng) (progressive enhancement) 和優(yōu)雅降級(jí) (graceful degradation) 之間的不同嗎?
- 你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？
- 瀏覽器同一時(shí)間可以從一個(gè)域名下載多少資源？
- 有什么例外嗎？
- 請(qǐng)說出三種減少頁面加載時(shí)間的方法。(加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間)
- 如果你參與到一個(gè)項(xiàng)目中，發(fā)現(xiàn)他們使用 Tab 來縮進(jìn)代碼，但是你喜歡空格，你會(huì)怎么做？
- 請(qǐng)寫一個(gè)簡(jiǎn)單的幻燈效果頁面。
- 如果今年你打算熟練掌握一項(xiàng)新技術(shù)，那會(huì)是什么？
- 請(qǐng)談?wù)勀銓?duì)網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。
- 什么是 FOUC (無樣式內(nèi)容閃爍)？你如何來避免 FOUC？
- 請(qǐng)解釋什么是 ARIA 和屏幕閱讀器 (screenreaders)，以及如何使網(wǎng)站實(shí)現(xiàn)無障礙訪問 (accessible)。
- 請(qǐng)解釋 CSS 動(dòng)畫和 JavaScript 動(dòng)畫的優(yōu)缺點(diǎn)。
- 什么使 CORS，以及其要解決的問題？
HTML 相關(guān)問題：
doctype(文檔類型) 的作用是什么？- 瀏覽器標(biāo)準(zhǔn)模式 (standards mode) 和怪異模式 (quirks mode) 之間的區(qū)別是什么？
- HTML 和 XHTML 有什么區(qū)別？
- 如果頁面使用 ‘application/xhtml+xml’ 會(huì)有什么問題嗎？
- 如果網(wǎng)頁內(nèi)容需要支持多語言，你會(huì)怎么做？
- 在設(shè)計(jì)和開發(fā)多語言網(wǎng)站時(shí)，有哪些問題你必須要考慮？
data-屬性的作用是什么？- 如果把 HTML5 看作做一個(gè)開放平臺(tái)，那它的構(gòu)建模塊有哪些？
- 請(qǐng)描述
cookies、sessionStorage和localStorage的區(qū)別。 - 請(qǐng)解釋
<script>、<script async>和<script defer>的區(qū)別。 - 為什么通常推薦將 CSS
<link>放置在<head></head>之間，而將 JS<script>放置在</body>之前？你知道相關(guān)解釋嗎？ - 什么是漸進(jìn)式渲染 (progressive rendering)？
- 你用過哪些不同的 HTML 模板語言？
CSS 相關(guān)問題：
- CSS 中類 (classes) 和 ID 的區(qū)別。
- 請(qǐng)問 “resetting” 和 “normalizing” CSS 之間的區(qū)別？你會(huì)如何選擇，為什么？
- 請(qǐng)解釋浮動(dòng) (Floats) 及其工作原理。
- 描述
z-index和疊加上下文是如何形成的。 - 請(qǐng)描述 BFC(Block Formatting Context) 及其如何工作。
- 列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場(chǎng)景。
- 請(qǐng)解釋 CSS sprites，以及你要如何在頁面或網(wǎng)站中實(shí)現(xiàn)它。
- 你最喜歡的圖片替換方法是什么，你如何選擇使用。
- 你會(huì)如何解決特定瀏覽器的樣式問題？
- 如何為有功能限制的瀏覽器提供網(wǎng)頁？
- 你會(huì)使用哪些技術(shù)和處理方法？
- 有哪些的隱藏內(nèi)容的方法 (如果同時(shí)還要保證屏幕閱讀器可用呢)？
- 你用過柵格系統(tǒng) (grid system) 嗎？如果使用過，你最喜歡哪種？
- 你用過媒體查詢，或針對(duì)移動(dòng)端的布局/CSS 嗎？
- 你熟悉 SVG 樣式的書寫嗎？
- 如何優(yōu)化網(wǎng)頁的打印樣式？
- 在書寫高效 CSS 時(shí)會(huì)有哪些問題需要考慮？
- 使用 CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些？
- 請(qǐng)描述你曾經(jīng)使用過的 CSS 預(yù)處理器的優(yōu)缺點(diǎn)。
- 如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)？
- 請(qǐng)解釋瀏覽器是如何判斷元素是否匹配某個(gè) CSS 選擇器？
- 請(qǐng)描述偽元素 (pseudo-elements) 及其用途。
- 請(qǐng)解釋你對(duì)盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的布局。
- 請(qǐng)解釋
* { box-sizing: border-box; }的作用, 并且說明使用它有什么好處？ - 請(qǐng)羅列出你所知道的 display 屬性的全部值
- 請(qǐng)解釋 inline 和 inline-block 的區(qū)別？
- 請(qǐng)解釋 relative、fixed、absolute 和 static 元素的區(qū)別
- CSS 中字母 ‘C’ 的意思是疊層 (Cascading)。請(qǐng)問在確定樣式的過程中優(yōu)先級(jí)是如何決定的 (請(qǐng)舉例)？如何有效使用此系統(tǒng)？
- 你在開發(fā)或生產(chǎn)環(huán)境中使用過哪些 CSS 框架？你覺得應(yīng)該如何改善他們？
- 請(qǐ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ù)？
- 請(qǐng)問為何要使用
translate()而非 absolute positioning，或反之的理由？為什么？
JS 相關(guān)問題：
- 請(qǐng)解釋事件代理 (event delegation)。
- 請(qǐng)解釋 JavaScript 中
this是如何工作的。 - 請(qǐng)解釋原型繼承 (prototypal inheritance) 的原理。
- 你怎么看 AMD vs. CommonJS？
- 請(qǐng)解釋為什么接下來這段代碼不是 IIFE (立即調(diào)用的函數(shù)表達(dá)式)：
function foo(){ }();.- 要做哪些改動(dòng)使它變成 IIFE?
- 描述以下變量的區(qū)別：
null，undefined或undeclared？- 該如何檢測(cè)它們？
- 什么是閉包 (closure)，如何使用它，為什么要使用它？
- 請(qǐng)舉出一個(gè)匿名函數(shù)的典型用例？
- 你是如何組織自己的代碼？是使用模塊模式，還是使用經(jīng)典繼承的方法？
- 請(qǐng)指出 JavaScript 宿主對(duì)象 (host objects) 和原生對(duì)象 (native objects) 的區(qū)別？
- 請(qǐng)指出以下代碼的區(qū)別：
function Person(){}、var person = Person()、var person = new Person()？ .call和.apply的區(qū)別是什么？- 請(qǐng)解釋
Function.prototype.bind？ - 在什么時(shí)候你會(huì)使用
document.write()？ - 請(qǐng)指出瀏覽器特性檢測(cè)，特性推斷和瀏覽器 UA 字符串嗅探的區(qū)別？
- 請(qǐng)盡可能詳盡的解釋 AJAX 的工作原理。
- 請(qǐng)解釋 JSONP 的工作原理，以及它為什么不是真正的 AJAX。
- 你使用過 JavaScript 模板系統(tǒng)嗎？
- 如有使用過，請(qǐng)談?wù)勀愣际褂眠^哪些庫？
- 請(qǐng)解釋變量聲明提升 (hoisting)。
- 請(qǐng)描述事件冒泡機(jī)制 (event bubbling)。
- “attribute” 和 “property” 的區(qū)別是什么？
- 為什么擴(kuò)展 JavaScript 內(nèi)置對(duì)象不是好的做法？
- 請(qǐng)指出 document load 和 document ready 兩個(gè)事件的區(qū)別。
==和===有什么不同？- 請(qǐng)解釋 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";? 使用它的好處和壞處分別是什么？ - 請(qǐng)實(shí)現(xiàn)一個(gè)遍歷至
100的 for loop 循環(huán)，在能被3整除時(shí)輸出 “fizz”，在能被5整除時(shí)輸出 “buzz”，在能同時(shí)被3和5整除時(shí)輸出 “fizzbuzz”。 - 為何通常會(huì)認(rèn)為保留網(wǎng)站現(xiàn)有的全局作用域 (global scope) 不去改變它，是較好的選擇？
- 為何你會(huì)使用
load之類的事件 (event)？此事件有缺點(diǎn)嗎？你是否知道其他替代品，以及為何使用它們？ - 請(qǐng)解釋什么是單頁應(yīng)用 (single page app), 以及如何使其對(duì)搜索引擎友好 (SEO-friendly)。
- What is the extent of your experience with Promises and/or their polyfills?
- 使用 Promises 而非回調(diào) (callbacks) 優(yōu)缺點(diǎn)是什么？
- 使用一種可以編譯成 JavaScript 的語言來寫 JavaScript 代碼有哪些優(yōu)缺點(diǎn)？
- 你使用哪些工具和技術(shù)來調(diào)試 JavaScript 代碼？
- 你會(huì)使用怎樣的語言結(jié)構(gòu)來遍歷對(duì)象屬性 (object properties) 和數(shù)組內(nèi)容？
- 請(qǐng)解釋可變 (mutable) 和不變 (immutable) 對(duì)象的區(qū)別。
- 請(qǐng)舉出 JavaScript 中一個(gè)不變性對(duì)象 (immutable object) 的例子？
- 不變性 (immutability) 有哪些優(yōu)缺點(diǎn)？
- 如何用你自己的代碼來實(shí)現(xiàn)不變性 (immutability)？
- 請(qǐng)解釋同步 (synchronous) 和異步 (asynchronous) 函數(shù)的區(qū)別。
- 什么是事件循環(huán) (event loop)？
- 請(qǐng)問調(diào)用棧 (call stack) 和任務(wù)隊(duì)列 (task queue) 的區(qū)別是什么？
測(cè)試相關(guān)問題：
- 對(duì)代碼進(jìn)行測(cè)試的有什么優(yōu)缺點(diǎn)？
- 你會(huì)用什么工具測(cè)試你的代碼功能？
- 單元測(cè)試與功能/集成測(cè)試的區(qū)別是什么？
- 代碼風(fēng)格 linting 工具的作用是什么？
效能相關(guān)問題：
- 你會(huì)用什么工具來查找代碼中的性能問題？
- 你會(huì)用什么方式來增強(qiáng)網(wǎng)站的頁面滾動(dòng)效能？
- 請(qǐng)解釋 layout、painting 和 compositing 的區(qū)別。
網(wǎng)絡(luò)相關(guān)問題：
- 為什么傳統(tǒng)上利用多個(gè)域名來提供網(wǎng)站資源會(huì)更有效？
- 請(qǐng)盡可能完整得描述從輸入 URL 到整個(gè)網(wǎng)頁加載完畢及顯示在屏幕上的整個(gè)流程。
- Long-Polling、Websockets 和 Server-Sent Event 之間有什么區(qū)別？
- 請(qǐng)描述以下 request 和 response headers：
- Diff. between Expires, Date, Age and If-Modified-…
- Do Not Track
- Cache-Control
- Transfer-Encoding
- ETag
- X-Frame-Options
- 什么是 HTTP action？請(qǐng)羅列出你所知道的所有 HTTP action，并給出解釋。
代碼相關(guān)的問題：
問題：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" ) );
問題：下面兩個(gè) 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');
趣味問題：
- 你最近寫過什么的很酷的項(xiàng)目嗎？
- 在你使用的開發(fā)工具中，最喜歡哪些方面？
- 你有什么業(yè)余項(xiàng)目嗎？是哪種類型的？
- 你最愛的 IE 特性是什么？
- 你對(duì)咖啡有沒有什么喜好？
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。