Front-end-Developer-Interview-Questions

時間 2019-12-08

標籤 end developer interview questions 简体版

原文原文鏈接

https://github.com/darcyclarke/Front-end-Developer-Interview-Questionsjavascript

前端工做面試問題

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

Rebecca Murphey 的 Baseline For Front-End Developers 是你在準備面試前應該閱讀的絕佳資源。html

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

你在昨天/本週學到了什麼？jquery
編寫代碼的哪些方面可以使你興奮或感興趣？git
在製做一個Web應用或Web站點的過程當中，你是如何考慮他的UI、安全性、高性能、SEO、可維護性以及技術因素的？github
談談你喜歡的開發環境。(例如操做系統，編輯器，瀏覽器，工具等等。)web
你最熟悉哪一套版本控制系統？面試
你能描述一下當你製做一個網頁的工做流程嗎？
你能描述一下漸進加強和優雅降級之間的不一樣嗎?
- 若是提到了特性檢測，能夠加分。
請解釋一下什麼是「語義化的 HTML」。
你如何對網站的文件和資源進行優化？
- 期待的解決方案包括：
  - 文件合併
  - 文件最小化/文件壓縮
  - 使用 CDN 託管
  - 緩存的使用
  - 其餘
爲何利用多個域名來提供網站資源會更有效？
- 瀏覽器同一時間能夠從一個域名下載多少資源？
請說出三種減小頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）
若是你參與到一個項目中，發現他們使用 Tab 來縮進代碼，可是你喜歡空格，你會怎麼作？
- 建議這個項目使用像 EditorConfig (http://editorconfig.org/) 之類的規範
- 爲了保持一致性，接受項目原有的風格
- 直接使用 VIM 的 retab 命令
請寫一個簡單的幻燈效果頁面
- 若是不使用JS來完成，能夠加分。
你都使用哪些工具來測試代碼的性能？
- Profiler, JSPerf, Dromaeo
若是今年你打算熟練掌握一項新技術，那會是什麼？
Long-Polling, Websockets, SSE(Server-Sent Event) 之間有什麼區別？
請談一下你對網頁標準和標準制定機構重要性的理解。
什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？
請儘量完整得描述下從輸入URL到整個網頁加載完畢及顯示在屏幕上的整個流程

[⬆] HTML相關問題：

doctype（文檔類型）的做用是什麼？
瀏覽器標準模式和怪異模式之間的區別是什麼？
使用 XHTML 的侷限有哪些？
- 若是頁面使用 'application/xhtml+xml' 會有什麼問題嗎？
若是網頁內容須要支持多語言，你會怎麼作？
- 在設計和開發多語言網站時，有哪些問題你必需要考慮？
data-屬性的做用是什麼？
若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？
請描述一下 cookies，sessionStorage 和 localStorage 的區別？
請描述一下 GET 和 POST 的區別?

[⬆] CSS 相關問題：

描述下「reset」 CSS 文件的做用和使用它的好處。
解釋下浮動和它的工做原理。
列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景。
解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。
你最喜歡的圖片替換方法是什麼，你如何選擇使用。
討論CSS hacks，條件引用或者其餘。
如何爲有功能限制的瀏覽器提供網頁？
- 你會使用哪些技術和處理方法？
有哪些的隱藏內容的方法（若是同時還要保證屏幕閱讀器可用呢？）
你用過柵格系統嗎？若是使用過，你最喜歡哪一種？
你用過媒體查詢，或針對移動端的佈局/CSS 嗎？
你熟悉 SVG 樣式的書寫嗎？
如何優化網頁的打印樣式？
在書寫高效 CSS 時會有哪些問題須要考慮？
使用 CSS 預處理器的優缺點有哪些？(SASS，Compass，Stylus，LESS)
- 描述下你曾經使用過的 CSS 預處理的優缺點。
若是設計中使用了非標準的字體，你該如何去實現？
- Webfonts (字體服務例如：Google Webfonts，Typekit 等等。)
解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？
解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。
請解釋一下 * { box-sizing: border-box; } 的做用, 而且說明使用它有什麼好處？
請羅列出你所知道的 display 屬性的所有值
請解釋一下 inline 和 inline-block 的區別？
請解釋一下 relative、fixed、absolute 和 static 元素的區別
你目前在使用哪一套CSS框架，或者在產品線上使用過哪一套？(Bootstrap, PureCSS, Foundation 等等)
- 若是有，請問是哪一套？若是能夠，你如何改善CSS框架？
請問你有使用過 CSS Flexbox 或者 Grid specs 嗎？
- 若是有，請問在性能和效率的方面你是怎麼看的？

[⬆] JS相關問題：

解釋下事件代理。
解釋下 JavaScript 中 this 是如何工做的。
解釋下原型繼承的原理。
你是如何測試JavaScript代碼的？
AMD vs. CommonJS？
什麼是哈希表？
解釋下爲何接下來這段代碼不是 IIFE(當即調用的函數表達式)：function foo(){ }();.
- 要作哪些改動使它變成 IIFE?
描述如下變量的區別：null，undefined 或 undeclared？
- 該如何檢測它們？
什麼是閉包，如何使用它，爲何要使用它？
請舉出一個匿名函數的典型用例？
解釋「JavaScript 模塊模式」以及你在什麼時候使用它。
- 若是有提到無污染的命名空間，能夠考慮加分。
- 若是你的模塊沒有本身的命名空間會怎麼樣？
你是如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？
請指出 JavaScript 宿主對象和原生對象的區別？
指出下列代碼的區別：

function Person(){} 
var person = Person(); 
var person = new Person();

.call 和 .apply 的區別是什麼？
請解釋 Function.prototype.bind 的做用？
你什麼時候優化本身的代碼？
你能解釋一下 JavaScript 中的繼承是如何工做的嗎？
在何時你會使用 document.write()？
- 大多數生成的廣告代碼依舊使用 document.write()，雖然這種用法會讓人很不爽。
請指出瀏覽器特性檢測，特性推斷和瀏覽器 UA 字符串嗅探的區別？
請儘量詳盡的解釋 AJAX 的工做原理。
請解釋 JSONP 的工做原理，以及它爲何不是真正的 AJAX。
你使用過 JavaScript 模板系統嗎？
- 若有使用過，請談談你都使用過哪些庫，好比 Mustache.js，Handlebars 等等。
請解釋變量聲明提高。
請描述下事件冒泡機制。
"attribute" 和 "property" 的區別是什麼？
爲何擴展 JavaScript 內置對象不是好的作法？
爲何擴展 JavaScript 內置對象是好的作法？
請指出 document load 和 document ready 兩個事件的區別。
== 和 === 有什麼不一樣？
你如何從瀏覽器的 URL 中獲取查詢字符串參數。
請解釋一下 JavaScript 的同源策略。
請描述一下 JavaScript 的繼承模式。
如何實現下列代碼：

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

描述一種 JavaScript 中實現 memoization(避免重複運算)的策略。
什麼是三元表達式？「三元」表示什麼意思？
函數的參數元是什麼？
什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？

[⬆] jQuery 相關問題：

解釋"chaining"。
解釋"deferreds"。
你知道哪些針對 jQuery 的優化方法。
請解釋 .end() 的用途。
你如何給一個事件處理函數命名空間，爲何要這樣作？
請說出你能夠傳遞給 jQuery 方法的四種不一樣值。
- 選擇器（字符串），HTML（字符串），回調函數，HTML元素，對象，數組，元素數組，jQuery對象等。
什麼是效果隊列？
請指出 .get()，[]，eq() 的區別。
請指出 .bind()，.live() 和 .delegate() 的區別。
請指出 $ 和 $.fn 的區別，或者說出 $.fn 的用途。
請優化下列選擇器：

$(".foo div#bar:eq(0)")

[⬆] 代碼相關的問題：

modulo(12, 5) // 2

問題：實現知足上述結果的modulo函數

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

問題：上面的語句的返回值是什麼？
答案："goh angasal a m'i"

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

問題：window.foo 的值是什麼？
答案："bar"
只有 window.foo 爲假時的纔是上面答案，不然就是它自己的值。

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

問題：上面兩個 alert 的結果是什麼
答案: "Hello World" 和 ReferenceError: bar is not defined

var foo = [];
foo.push(1);
foo.push(2);

問題：foo.length 的值是什麼？
答案：2

[⬆] 有趣的問題：

你編寫過的最酷的代碼是什麼？其中你最自豪的是什麼？
在你使用過的開發工具中，最喜歡哪一個？
你有什麼業餘項目嗎？是哪一種類型的？
你最愛的 IE 特性是什麼？

[⬆] 其餘參考資料：

每日一句

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