常見問題:html
l 編寫代碼的哪些方面可以使你興奮或感興趣?git
l 你最近遇到過什麼技術挑戰?你是如何解決的?github
l 在製做一個網頁應用或網站的過程當中,你是如何考慮其 UI、安全性、高性能、SEO、可維護性以及技術因素的?express
l 請談談你喜歡的開發環境。數組
l 你最熟悉哪一套版本控制系統?瀏覽器
l 你能描述當你製做一個網頁的工做流程嗎?安全
l 倘若你有 5 個不一樣的樣式文件 (stylesheets), 整合進網站的最好方式是?服務器
l 你能描述漸進加強 (progressive enhancement) 和優雅降級 (graceful degradation) 之間的不一樣嗎?cookie
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