標籤：

前端工作面試問題

07-26
前言

這是無意間看到的關於前端面試的問題的總結，感覺很不錯，大家可以借鑒下，找工作的同學可以瞧瞧，工作中的同學可以自己想想看這些知識是否了解或者熟悉，給自己前端技術一個小的檢測。

常見問題：

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

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

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

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

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

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

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

  • 如果提到了特性檢測，可以加分。

  • 請解釋一下什麼是「語義化的 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 特性是什麼？

    • 學習前端的同學注意了！！！ 4


    推薦閱讀：

    ※當朋友問你借錢時，你該怎麼辦？
    ※周易預測工作
    ※電腦玩物: 活用 Google Drive 雲端硬碟 12個激發工作潛能技巧教學
    ※某男求測工作調動

    TAG:工作 | 面試 | 面試問題 | 問題 |