前端工做面試經典問題（超級全）
常見問題：html
l 你在昨天/本週學到了什麼？git
l 編寫代碼的哪些方面可以使你興奮或感興趣？github
l 你最近遇到過什麼技術挑戰？你是如何解決的？express
l 在製做一個網頁應用或網站的過程當中，你是如何考慮其 UI、安全性、高性能、SEO、可維護性以及技術因素的？數組
l 請談談你喜歡的開發環境。瀏覽器
l 你最熟悉哪一套版本控制系統？安全
l 你能描述當你製做一個網頁的工做流程嗎？服務器
l 倘若你有 5 個不一樣的樣式文件 (stylesheets), 整合進網站的最好方式是?cookie
l 你能描述漸進加強 (progressive enhancement) 和優雅降級 (graceful degradation) 之間的不一樣嗎?網絡
l 你如何對網站的文件和資源進行優化？
l 瀏覽器同一時間能夠從一個域名下載多少資源？
l 有什麼例外嗎？
l 請說出三種減小頁面加載時間的方法。(加載時間指感知的時間或者實際加載時間)
l 若是你參與到一個項目中，發現他們使用 Tab 來縮進代碼，可是你喜歡空格，你會怎麼作？
l 請寫一個簡單的幻燈效果頁面。
l 現在年你打算熟練掌握一項新技術，那會是什麼？
l 請談談你對網頁標準和標準制定機構重要性的理解。
l 什麼是 FOUC (無樣式內容閃爍)？你如何來避免 FOUC？
l 請解釋什麼是 ARIA 和屏幕閱讀器 (screenreaders)，以及如何使網站實現無障礙訪問 (accessible)。
l 請解釋 CSS 動畫和 JavaScript 動畫的優缺點。
l 什麼使 CORS，以及其要解決的問題？
HTML 相關問題：
l doctype(文檔類型) 的做用是什麼？
l 瀏覽器標準模式 (standards mode) 和怪異模式 (quirks mode) 之間的區別是什麼？
l HTML 和 XHTML 有什麼區別？
l 若是頁面使用 'application/xhtml+xml' 會有什麼問題嗎？
l 若是網頁內容須要支持多語言，你會怎麼作？
l 在設計和開發多語言網站時，有哪些問題你必需要考慮？
l data-屬性的做用是什麼？
l 若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？
l 請描述 cookies、sessionStorage 和 localStorage 的區別。
簡析：共同點：都是保存在瀏覽器端，且同源的。
區別：
1.cookie數據始終在同源的http請求中攜帶，即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會把數據發送給服務器，僅在本地保存。
2.cookie還有path的概念，能夠限制cookie只屬於某個路徑下。
3.存儲大小限制也不一樣，cookie數據不能超過4k。sessionStorage和localStorage能夠達到5M或更多。
4.數據有效期不一樣，sessionStorage僅在當前瀏覽器窗口關閉前有效localStorage始終有效，窗口或瀏覽器關閉也一直保存。Cookie在設置的過時時間以前一直有效。
5.做用域不一樣，sessionStorage在不一樣的瀏覽器窗口間不能共享，即便是同一個頁面。localStorage在全部同源窗口中都是共享的。Cookie也是同源窗口共享的。
l 請解釋 <script>、<script async> 和 <script defer> 的區別。
l 爲何一般推薦將 CSS <link> 放置在 <head></head> 之間，而將 JS <script> 放置在 </body> 以前？你知道相關解釋嗎？
l 什麼是漸進式渲染 (progressive rendering)？
l 你用過哪些不一樣的 HTML 模板語言？
CSS 相關問題：
l CSS 中類 (classes) 和 ID 的區別。
l 請問 "resetting" 和 "normalizing" CSS 之間的區別？你會如何選擇，爲何？
l 請解釋浮動 (Floats) 及其工做原理。
l 描述z-index和疊加上下文是如何造成的。
l 請描述 BFC(Block Formatting Context) 及其如何工做。
l 列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景。
l 請解釋 CSS sprites，以及你要如何在頁面或網站中實現它。
l 你最喜歡的圖片替換方法是什麼，你如何選擇使用。
l 你會如何解決特定瀏覽器的樣式問題？
l 如何爲有功能限制的瀏覽器提供網頁？
l 你會使用哪些技術和處理方法？
l 有哪些的隱藏內容的方法 (若是同時還要保證屏幕閱讀器可用呢)？
l 你用過柵格系統 (grid system) 嗎？若是使用過，你最喜歡哪一種？
l 你用過媒體查詢，或針對移動端的佈局/CSS 嗎？
l 你熟悉 SVG 樣式的書寫嗎？
l 如何優化網頁的打印樣式？
l 在書寫高效 CSS 時會有哪些問題須要考慮？
l 使用 CSS 預處理器的優缺點有哪些？
l 請描述你曾經使用過的 CSS 預處理器的優缺點。
l 若是設計中使用了非標準的字體，你該如何去實現？
l 請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？
l 請描述僞元素 (pseudo-elements) 及其用途。
l 請解釋你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。
l 請解釋 * { box-sizing: border-box; } 的做用, 而且說明使用它有什麼好處？
l 請羅列出你所知道的 display 屬性的所有值
l 請解釋 inline 和 inline-block 的區別？
l 請解釋 relative、fixed、absolute 和 static 元素的區別
l CSS 中字母 'C' 的意思是疊層 (Cascading)。請問在肯定樣式的過程當中優先級是如何決定的 (請舉例)？如何有效使用此係統？
l 你在開發或生產環境中使用過哪些 CSS 框架？你以爲應該如何改善他們？
l 請問你有嘗試過 CSS Flexbox 或者 Grid 標準規格嗎？
l 爲何響應式設計 (responsive design) 和自適應設計 (adaptive design) 不一樣？
l 你有兼容 retina 屏幕的經歷嗎？若是有，在什麼地方使用了何種技術？
l 請問爲什麼要使用 translate() 而非 absolute positioning，或反之的理由？爲何？
JS 相關問題：
l 請解釋事件代理 (event delegation)。
l 請解釋 JavaScript 中 this 是如何工做的。
l 請解釋原型繼承 (prototypal inheritance) 的原理。
l 你怎麼看 AMD vs. CommonJS？
l 請解釋爲何接下來這段代碼不是 IIFE (當即調用的函數表達式)：function foo(){ }();.
l 要作哪些改動使它變成 IIFE?
l 描述如下變量的區別：null，undefined 或 undeclared？
l 該如何檢測它們？
l 什麼是閉包 (closure)，如何使用它，爲何要使用它？
l 請舉出一個匿名函數的典型用例？
l 你是如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？
l 請指出 JavaScript 宿主對象 (host objects) 和原生對象 (native objects) 的區別？
l 請指出如下代碼的區別：function Person(){}、var person = Person()、var person = new Person()？
l .call 和 .apply 的區別是什麼？
l 請解釋 Function.prototype.bind？
l 在何時你會使用 document.write()？
l 請指出瀏覽器特性檢測，特性推斷和瀏覽器 UA 字符串嗅探的區別？
l 請儘量詳盡的解釋 AJAX 的工做原理。
l 請解釋 JSONP 的工做原理，以及它爲何不是真正的 AJAX。
l 你使用過 JavaScript 模板系統嗎？
l 若有使用過，請談談你都使用過哪些庫？
l 請解釋變量聲明提高 (hoisting)。
l 請描述事件冒泡機制 (event bubbling)。
l "attribute" 和 "property" 的區別是什麼？
l 爲何擴展 JavaScript 內置對象不是好的作法？
l 請指出 document load 和 document ready 兩個事件的區別。
l == 和 === 有什麼不一樣？
l 請解釋 JavaScript 的同源策略 (same-origin policy)。
l 如何實現下列代碼：
l [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
l 什麼是三元表達式 (Ternary expression)？「三元 (Ternary)」 表示什麼意思？
l 什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？
l 請實現一個遍歷至 100 的 for loop 循環，在能被 3 整除時輸出 "fizz"，在能被 5 整除時輸出 "buzz"，在能同時被 3和 5 整除時輸出 "fizzbuzz"。
l 爲什麼一般會認爲保留網站現有的全局做用域 (global scope) 不去改變它，是較好的選擇？
l 爲什麼你會使用 load 之類的事件 (event)？此事件有缺點嗎？你是否知道其餘替代品，以及爲什麼使用它們？
l 請解釋什麼是單頁應用 (single page app), 以及如何使其對搜索引擎友好 (SEO-friendly)。
l What is the extent of your experience with Promises and/or their polyfills?
l 使用 Promises 而非回調 (callbacks) 優缺點是什麼？
l 使用一種能夠編譯成 JavaScript 的語言來寫 JavaScript 代碼有哪些優缺點？
l 你使用哪些工具和技術來調試 JavaScript 代碼？
l 你會使用怎樣的語言結構來遍歷對象屬性 (object properties) 和數組內容？
l 請解釋可變 (mutable) 和不變 (immutable) 對象的區別。
l 請舉出 JavaScript 中一個不變性對象 (immutable object) 的例子？
l 不變性 (immutability) 有哪些優缺點？
l 如何用你本身的代碼來實現不變性 (immutability)？
l 請解釋同步 (synchronous) 和異步 (asynchronous) 函數的區別。
l 什麼是事件循環 (event loop)？
l 請問調用棧 (call stack) 和任務隊列 (task queue) 的區別是什麼？
測試相關問題：
l 對代碼進行測試的有什麼優缺點？
l 你會用什麼工具測試你的代碼功能？
l 單元測試與功能/集成測試的區別是什麼？
l 代碼風格 linting 工具的做用是什麼？
效能相關問題：
l 你會用什麼工具來查找代碼中的性能問題？
l 你會用什麼方式來加強網站的頁面滾動效能？
l 請解釋 layout、painting 和 compositing 的區別。
網絡相關問題：
l 爲何傳統上利用多個域名來提供網站資源會更有效？
l 請儘量完整得描述從輸入 URL 到整個網頁加載完畢及顯示在屏幕上的整個流程。
l Long-Polling、Websockets 和 Server-Sent Event 之間有什麼區別？
l 請描述如下 request 和 response headers：
l Diff. between Expires, Date, Age and If-Modified-...
l Do Not Track
l Cache-Control
l Transfer-Encoding
l ETag
l X-Frame-Options
l 什麼是 HTTP action？請羅列出你所知道的全部 HTTP action，並給出解釋。
代碼相關的問題：
問題：foo的值是什麼？
var foo = 10 + '20';
//1020
問題：如何實現如下函數？
add(2, 5); // 7
add(2)(5); // 7
問題：下面的語句的返回值是什麼？
"i'm a lasagna hog".split("").reverse().join("");
//goh angasal a m'i
問題：window.foo的值是什麼？
( window.foo || ( window.foo = "bar" ) );
//bar
問題：下面兩個 alert 的結果是什麼？
var foo = "Hello";
(function() {
var bar = " World";
alert(foo + bar);//Hello World
})();
alert(foo + bar);//error : bar is not defined
問題：foo.length的值是什麼？
var foo = [ ];
foo.push(1);
foo.push(2);
//2
問題：foo.x的值是什麼？
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};
//undefined
問題：下面代碼的輸出是什麼？
console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
console.log('three');
// one three two
趣味問題：
l 你最近寫過什麼的很酷的項目嗎？
l 在你使用的開發工具中，最喜歡哪些方面？
l 你有什麼業餘項目嗎？是哪一種類型的？
l 你最愛的 IE 特性是什麼？
l 你對咖啡有沒有什麼喜愛？
轉自：https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese
- 1. 前端經典面試題
- 2. 前端面試題（經典）
- 3. Web前端經典面試試題（二）
- 4. Web前端經典面試試題（一）
- 5. Web前端經典面試試題（三）
- 6. 前端工做面試問題（下）
- 7. 前端工做面試問題
- 8. 前端面試經典
- 9. 前端面試經典題目
- 10. 前端經典面試題---Ajax篇
- 更多相關文章...
- • PHP 超級全局變量 - PHP教程
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端經典面試題
- 2. 前端面試題（經典）
- 3. Web前端經典面試試題（二）
- 4. Web前端經典面試試題（一）
- 5. Web前端經典面試試題（三）
- 6. 前端工做面試問題（下）
- 7. 前端工做面試問題
- 8. 前端面試經典
- 9. 前端面試經典題目
- 10. 前端經典面試題---Ajax篇