前端工做面試問題

時間 2019-11-12

標籤前端面試問題欄目快樂工作简体版

原文原文鏈接

注意轉載須保留原文連接（http://www.cnblogs.com/wzhiq896/p/5925927.html ），譯文連接，做者譯者等信息。做者：wangwen896 css

本文包含了一些用於考查候選者的前端面試問題。不建議對單個候選者問及每一個問題 (那須要好幾個小時)。只要從列表裏挑選一些，就能幫助你考查候選者是否具有所須要的技能。html

備註：這些問題中不少都是開放性的，能夠引起有趣的討論。這比直接的答案更能體現此人的能力。前端

你在昨天/本週學到了什麼？
編寫代碼的哪些方面可以使你興奮或感興趣？
你最近遇到過什麼技術挑戰？你是如何解決的？
在製做一個網頁應用或網站的過程當中，你是如何考慮其 UI、安全性、高性能、SEO、可維護性以及技術因素的？
請談談你喜歡的開發環境。
你最熟悉哪一套版本控制系統？
你能描述當你製做一個網頁的工做流程嗎？
倘若你有 5 個不一樣的樣式文件 (stylesheets), 整合進網站的最好方式是?
你能描述漸進加強 (progressive enhancement) 和優雅降級 (graceful degradation) 之間的不一樣嗎?
你如何對網站的文件和資源進行優化？
瀏覽器同一時間能夠從一個域名下載多少資源？
- 有什麼例外嗎？
請說出三種減小頁面加載時間的方法。(加載時間指感知的時間或者實際加載時間)
若是你參與到一個項目中，發現他們使用 Tab 來縮進代碼，可是你喜歡空格，你會怎麼作？
請寫一個簡單的幻燈效果頁面。
若是今年你打算熟練掌握一項新技術，那會是什麼？
請談談你對網頁標準和標準制定機構重要性的理解。
什麼是 FOUC (無樣式內容閃爍)？你如何來避免 FOUC？
請解釋什麼是 ARIA 和屏幕閱讀器 (screenreaders)，以及如何使網站實現無障礙訪問 (accessible)。
請解釋 CSS 動畫和 JavaScript 動畫的優缺點。
什麼是跨域資源共享 (CORS)？它用於解決什麼問題？

HTML 相關問題：

doctype(文檔類型) 的做用是什麼？
瀏覽器標準模式 (standards mode) 、幾乎標準模式（almost standards mode）和怪異模式 (quirks mode) 之間的區別是什麼？
HTML 和 XHTML 有什麼區別？
若是頁面使用 'application/xhtml+xml' 會有什麼問題嗎？
若是網頁內容須要支持多語言，你會怎麼作？
在設計和開發多語言網站時，有哪些問題你必需要考慮？
使用 data- 屬性的好處是什麼？
若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？
請描述 cookies、sessionStorage 和 localStorage 的區別。
請解釋 <script>、<script async> 和 <script defer> 的區別。
爲何一般推薦將 CSS <link> 放置在 <head></head> 之間，而將 JS <script> 放置在 </body> 以前？你知道有哪些例外嗎？
什麼是漸進式渲染 (progressive rendering)？
你用過哪些不一樣的 HTML 模板語言？

CSS 相關問題：

CSS 中類 (classes) 和 ID 的區別。
請問 "resetting" 和 "normalizing" CSS 之間的區別？你會如何選擇，爲何？
請解釋浮動 (Floats) 及其工做原理。
描述z-index和疊加上下文是如何造成的。
請描述 BFC(Block Formatting Context) 及其如何工做。
列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景。
請解釋 CSS sprites，以及你要如何在頁面或網站中實現它。
你最喜歡的圖片替換方法是什麼，你如何選擇使用。
你會如何解決特定瀏覽器的樣式問題？
如何爲有功能限制的瀏覽器提供網頁？
- 你會使用哪些技術和處理方法？
有哪些的隱藏內容的方法 (若是同時還要保證屏幕閱讀器可用呢)？
你用過柵格系統 (grid system) 嗎？若是使用過，你最喜歡哪一種？
你用過媒體查詢，或針對移動端的佈局/CSS 嗎？
你熟悉 SVG 樣式的書寫嗎？
如何優化網頁的打印樣式？
在書寫高效 CSS 時會有哪些問題須要考慮？
使用 CSS 預處理器的優缺點有哪些？
- 請描述你曾經使用過的 CSS 預處理器的優缺點。
若是設計中使用了非標準的字體，你該如何去實現？
請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？
請描述僞元素 (pseudo-elements) 及其用途。
請解釋你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。
請解釋 * { box-sizing: border-box; } 的做用, 而且說明使用它有什麼好處？
請羅列出你所知道的 display 屬性的所有值
請解釋 inline 和 inline-block 的區別？
請解釋 relative、fixed、absolute 和 static 元素的區別
CSS 中字母 'C' 的意思是疊層 (Cascading)。請問在肯定樣式的過程當中優先級是如何決定的 (請舉例)？如何有效使用此係統？
你在開發或生產環境中使用過哪些 CSS 框架？你以爲應該如何改善他們？
請問你有嘗試過 CSS Flexbox 或者 Grid 標準規格嗎？
爲何響應式設計 (responsive design) 和自適應設計 (adaptive design) 不一樣？
你有兼容 retina 屏幕的經歷嗎？若是有，在什麼地方使用了何種技術？
請問爲什麼要使用 translate() 而非 absolute positioning，或反之的理由？爲何？

JS 相關問題：

請解釋事件代理 (event delegation)。
請解釋 JavaScript 中 this 是如何工做的。
請解釋原型繼承 (prototypal inheritance) 的原理。
你怎麼看 AMD vs. CommonJS？
請解釋爲何接下來這段代碼不是 IIFE (當即調用的函數表達式)：function foo(){ }();.
- 要作哪些改動使它變成 IIFE?
描述如下變量的區別：null，undefined 或 undeclared？
- 該如何檢測它們？
什麼是閉包 (closure)，如何使用它，爲何要使用它？
請舉出一個匿名函數的典型用例？
你是如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？
請指出 JavaScript 宿主對象 (host objects) 和原生對象 (native objects) 的區別？
請指出如下代碼的區別：function Person(){}、var person = Person()、var person = new Person()？
.call 和 .apply 的區別是什麼？
請解釋 Function.prototype.bind？
在何時你會使用 document.write()？
請指出瀏覽器特性檢測，特性推斷和瀏覽器 UA 字符串嗅探的區別？
請儘量詳盡的解釋 Ajax 的工做原理。
使用 Ajax 都有哪些優劣？
請解釋 JSONP 的工做原理，以及它爲何不是真正的 Ajax。
你使用過 JavaScript 模板系統嗎？
- 若有使用過，請談談你都使用過哪些庫？
請解釋變量聲明提高 (hoisting)。
請描述事件冒泡機制 (event bubbling)。
"attribute" 和 "property" 的區別是什麼？
爲何擴展 JavaScript 內置對象不是好的作法？
請指出 document load 和 document DOMContentLoaded 兩個事件的區別。
== 和 === 有什麼不一樣？
請解釋 JavaScript 的同源策略 (same-origin policy)。
如何實現下列代碼：

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

什麼是三元表達式 (Ternary expression)？「三元 (Ternary)」表示什麼意思？
什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？
請實現一個遍歷至 100 的 for loop 循環，在能被 3 整除時輸出 "fizz"，在能被 5 整除時輸出 "buzz"，在能同時被 3和 5 整除時輸出 "fizzbuzz"。
爲什麼一般會認爲保留網站現有的全局做用域 (global scope) 不去改變它，是較好的選擇？
爲什麼你會使用 load 之類的事件 (event)？此事件有缺點嗎？你是否知道其餘替代品，以及爲什麼使用它們？
請解釋什麼是單頁應用 (single page app), 以及如何使其對搜索引擎友好 (SEO-friendly)。
What is the extent of your experience with Promises and/or their polyfills?
使用 Promises 而非回調 (callbacks) 優缺點是什麼？
使用一種能夠編譯成 JavaScript 的語言來寫 JavaScript 代碼有哪些優缺點？
你使用哪些工具和技術來調試 JavaScript 代碼？
你會使用怎樣的語言結構來遍歷對象屬性 (object properties) 和數組內容？
請解釋可變 (mutable) 和不變 (immutable) 對象的區別。
- 請舉出 JavaScript 中一個不變性對象 (immutable object) 的例子？
- 不變性 (immutability) 有哪些優缺點？
- 如何用你本身的代碼來實現不變性 (immutability)？
請解釋同步 (synchronous) 和異步 (asynchronous) 函數的區別。
什麼是事件循環 (event loop)？
- 請問調用棧 (call stack) 和任務隊列 (task queue) 的區別是什麼？
解釋 function foo() {} 與 var foo = function() {} 用法的區別

測試相關問題：

對代碼進行測試的有什麼優缺點？
你會用什麼工具測試你的代碼功能？
單元測試與功能/集成測試的區別是什麼？
代碼風格 linting 工具的做用是什麼？

效能相關問題：

你會用什麼工具來查找代碼中的性能問題？
你會用什麼方式來加強網站的頁面滾動效能？
請解釋 layout、painting 和 compositing 的區別。

網絡相關問題：

爲何傳統上利用多個域名來提供網站資源會更有效？
請儘量完整得描述從輸入 URL 到整個網頁加載完畢及顯示在屏幕上的整個流程。
Long-Polling、Websockets 和 Server-Sent Event 之間有什麼區別？
請描述如下 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，並給出解釋。

代碼相關的問題：

問題：foo的值是什麼？git

var foo = 10 + '20';

問題：如何實現如下函數？github

add(2, 5); // 7 add(2)(5); // 7

問題：下面的語句的返回值是什麼？面試

"i'm a lasagna hog".split("").reverse().join("");

問題：window.foo的值是什麼？express

( window.foo || ( window.foo = "bar" ) );

問題：下面兩個 alert 的結果是什麼？跨域

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');

趣味問題：

你最近寫過什麼的很酷的項目嗎？
在你使用的開發工具中，最喜歡哪些方面？
誰使你踏足了前端開發領域？
你有什麼業餘項目嗎？是哪一種類型的？
你最愛的 IE 特性是什麼？
你對咖啡有沒有什麼喜愛？

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。