歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

前端工作面試問題

前端工作面試問題

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

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

記住: 很多問題都是開放的,可以引發有趣的討論。這比直接的答案更能體現此人的能力。

目錄

  1. 最初的貢獻者
  2. 常見問題
  3. HTML 相關問題
  4. CSS 相關問題
  5. JS 相關問題
  6. jQuery 相關問題
  7. 代碼相關的問題
  8. 有趣的問題
  9. 其他參考資料
  10. 協議

[⬆] 最初貢獻者

這裡大部分的面試題都摘抄自 Paul Irish (@paul_irish) 在 oksoclap 創建的帖子,這份原帖的貢獻者還有:

  • @bentruyman - http://bentruyman.com
  • @cowboy - http://benalman.com
  • @ajpiano - http://ajpiano.com
  • @SlexAxton - http://alexsexton.com
  • @boazsender - http://boazsender.com
  • @miketaylr - http://miketaylr.com
  • @vladikoff - http://vladfilippov.com
  • @gf3 - http://gf3.ca
  • @jon_neal - http://twitter.com/jon_neal
  • @wookiehangover - http://wookiehangover.com
  • @darcy_clarke - http://darcyclarke.me
  • @iansym

[⬆] 常見問題:

  • 你在昨天/本周學到了什麼?

  • 編寫代碼的哪些方面能夠使你興奮或感興趣?

  • 在制作一個Web應用或Web站點的過程中,你是如何考慮它的UI、安全性、高性能、SEO、可維護性以及技術因素的?

  • 談談你喜歡的開發環境。(例如操作系統,編輯器,浏覽器,工具等等。)

  • 你最熟悉哪一套版本控制系統?

  • 你能描述一下當你制作一個網頁的工作流程嗎?

  • 你能描述一下漸進增強和優雅降級之間的不同嗎?

    • 如果提到了特性檢測,可以加分。
  • 假若你有5個不同的 CSS 文件, 加載進頁面的最好方式是?

    • 文件拼合
  • 你如何對網站的文件和資源進行優化?

    • 期待的解決方案包括:
      • 文件合並
      • 文件最小化/文件壓縮
      • 使用 CDN 托管
      • 緩存的使用
      • 其他
  • 為什麼利用多個域名來提供網站資源會更有效?

    • 浏覽器同一時間可以從一個域名下載多少資源?
    • 有什麼例外嗎?
      • 加分項: 指出在手機端可能有負面影響 (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/)
      • 加分項: HTTP2 / SPDY
  • 請說出三種減少頁面加載時間的方法。(加載時間指感知的時間或者實際加載時間)

  • 如果你參與到一個項目中,發現他們使用 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 的區別?

  • 請描述一下 GETPOST 的區別?

[⬆] CSS 相關問題:

  • CSS 中類(classes)和 ID 的區別。

  • 描述下 “reset” CSS 文件的作用和使用它的好處。

    • 期待能夠指出它的負面影響,或者提到它的一個更好的替換者"normalize"
  • 解釋下浮動和它的工作原理。

  • 描述z-index和疊加上下文是如何形成的。

  • 列舉不同的清除浮動的技巧,並指出它們各自適用的使用場景。

  • 解釋下 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 嗎?

    • 如果有,請問在性能和效率的方面你是怎麼看的?
  • 為什麼響應式設計(responsive design)和自適應設計(adaptive design)不同?

  • 你有兼容 retina 屏幕的經歷嗎?如果有,在什麼地方使用了何種技術?

[⬆] JS相關問題:

  • 解釋下事件代理。

  • 解釋下 JavaScript 中 this 是如何工作的。

  • 解釋下原型繼承的原理。

  • 你是如何測試 JavaScript 代碼的?

  • AMD vs. CommonJS?

  • 什麼是哈希表?

  • 解釋下為什麼接下來這段代碼不是 IIFE(立即調用的函數表達式):function foo(){ }();.

    • 要做哪些改動使它變成 IIFE?
  • 描述以下變量的區別:nullundefinedundeclared

    • 該如何檢測它們?
  • 什麼是閉包,如何使用它,為什麼要使用它?

  • 請舉出一個匿名函數的典型用例?

  • 解釋 “JavaScript 模塊模式” 以及你在何時使用它。

    • 如果有提到無污染的命名空間,可以考慮加分。
    • 如果你的模塊沒有自己的命名空間會怎麼樣?
  • 你是如何組織自己的代碼?是使用模塊模式,還是使用經典繼承的方法?

  • 請指出 JavaScript 宿主對象和原生對象的區別?

  • 指出下列代碼的區別:

function Person(){}
var person = Person();
var person = new Person();
  • .call.apply 的區別是什麼?

  • 請解釋 Function.prototype.bind

  • 你何時優化自己的代碼?

  • 在什麼時候你會使用 document.write()

    • 大多數生成的廣告代碼依舊使用 document.write(),雖然這種用法會讓人很不爽。
  • 請指出浏覽器特性檢測,特性推斷和浏覽器 UA 字符串嗅探的區別?

  • 請盡可能詳盡的解釋 AJAX 的工作原理。

  • 請解釋 JSONP 的工作原理,以及它為什麼不是真正的 AJAX。

  • 你使用過 JavaScript 模板系統嗎?

    • 如有使用過,請談談你都使用過哪些庫,比如 Mustache.js,Handlebars 等等。
  • 請解釋變量聲明提升。

  • 請描述下事件冒泡機制。

  • "attribute" 和 "property" 的區別是什麼?

  • 為什麼擴展 JavaScript 內置對象不是好的做法?

  • 請指出 document load 和 document ready 兩個事件的區別。

  • ===== 有什麼不同?

  • 請解釋一下 JavaScript 的同源策略。

  • 如何實現下列代碼:

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • 什麼是三元表達式?“三元” 表示什麼意思?

  • 什麼是 "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 特性是什麼?

[⬆] 其他參考資料:

  • http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before
  • http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
  • http://css-tricks.com/interview-questions-css/
  • http://davidshariff.com/quiz/
  • http://blog.sourcing.io/interview-questions
  • http://www.toptal.com/javascript/interview-questions

[⬆] 協議:

Copyright 2012 by Darcy Clarke, 基於MIT License 協議。點擊協議文件查看詳細。

Copyright © Linux教程網 All Rights Reserved