這些前端面試的問題，搞懂了你就合格了

@版本 1.0

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

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

最初的貢獻者

備註: 大部分問題從是某個帖子蒐集和由下列個人提供：

• @bentruyman (http://bentruyman.com)
• @cowboy (http://benalman.com)
• @roger_raymond (http://twitter.com/iansym)
• @ajpiano (http://ajpiano.com)
• @paul_irish (http://paulirish.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)
• @tairraos (http://xiaole.happylive.org)
  

一般問題

• 你用Twitter嗎？ （在天朝最好問你用微博嗎？）

  • 如果用，你都關注那些人？
    

• 你用Github嗎？

  • 如果用，你關注的項目有什麼？
    

• 你關注的博客有那些？

• 你使用那些版本管理系統，比如Git，SVN等？

• 你常用的開發環境是怎樣的？比如操作系統，文本編輯器，瀏覽器，及其他工具等。

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

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

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

• 請解釋一下什麼是語義化的HTML。

• 你更喜歡在哪個瀏覽器下進行開發？你使用那些開發人員工具？

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

  • 期待的解決方案包括：
    • 文件合併
    • 文件最小化/文件壓縮
    • 使用CDN託管
    • 緩存的使用
    • 其他
      
    
    

• 爲什麼利用多個域名來存儲網站資源會更有效？

  • 瀏覽器一次可以從一個域名下做多少資源？
    

• 請說出三種減低頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）

• 如果你接到了一個使用Tab來縮進代碼的項目，但是你喜歡空格，你會怎麼做？

  • 建議這個項目使用像EditorConfig(http://editorconfig.org)之類的規範
  • 爲了保持一致性，轉換成項目原有的風格
  • 直接使用VIM的retab命令
    

• 請寫一個簡單的幻燈效果頁面

  • 如果不使用JS來完成，可以加分。
    

• 你都使用那些工作來測試代碼的性能？

  • 例如JSPerf (http://jsperf.com/)
  • 例如Dromaeo (http://dromaeo.com/)
  • 其它。
    

• 如果今年你打算熟練掌握一項新技術，那會是什麼？

• 請談一下你對網頁標準和標準制定機構重要性的理解。

• 什麼是FOUC？你如何來避免FOUC？

  
  

HTML相關問題

• 文檔類型的作用是什麼？你知道多少種文檔類型？

• 瀏覽器標準模式和怪異模式之間的區別是什麼？

• 使用XHTML的侷限有那些？

  • 如果頁面使用'application/xhtml+xml'會有什麼問題嗎？
    

• 如果網頁內容需要支持多語言，你會怎麼做？

  • 在設計和開發多語言網站時，有哪些問題你必須要考慮？
    

• 在HTML5的頁面中可以使用XHTML的語法嗎？

• 在HTML5中如何使用XML？

• 'data-'屬性的作用是什麼？

• 如果把HTML5看作做一個開放平臺，那它的構建模塊有那些？

• 請描述一下cookies，sessionStorage和localStorage的區別？

  
  

JS相關問題

• 你使用過那些Javascript庫？

• 你是否研究過你所使用的JS庫或者框架的源代碼？

• 什麼是哈希表？

• 'undefined'變量和'undeclared'變量分別指什麼？

• 閉包是什麼，如何使用它，爲什麼要使用它？

  • 你喜歡的使用閉包的模式是什麼？
    

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

• 請解釋什麼是Javascript的模塊模式，並舉出實用實例。

  • 如果有提到無污染的命名空間，可以考慮加分。
  • 如果你的模塊沒有自己的命名空間會怎麼樣？
    

• 你如何組織自己的代碼？是使用模塊模式，還是使用經典繼承的方法？

• 請指出Javascript宿主對象和內置對象的區別？

• 指出下列代碼的區別：

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

• '.call'和'.apply'的區別是什麼？

• 請解釋'Funciton.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"?使用它的好處和壞處分別是什麼？

  
  

JS代碼示例：~~3.14

問題：上面的語句的返回值是什麼？ 答案：3

"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'

var foo = {};foo.bar = 'hello';

問題：foo.length的值是什麼？ **答案: undefined

foo = foo||bar

問題: 這行代碼是什麼意思? **答案: if(!foo) foo = bar

foo>>1

問題: 這行代碼是什麼意思? **答案: Math.floor(foo/2)

foo|0foo+.5|0

問題: 這行代碼是什麼意思? **答案: parseInt(foo) & Math.round(foo)

function foo(bar1, bar2, bar3){}

問題: 如何獲取參數的個數? **答案: foo.length //this example is 3

jQuery-Specific Questions:jQuery相關問題

• 解釋"chaining"。

• 解釋"deferreds"。

• 你知道那些針對jQuery的優化方法。

• 請解釋'.end()'的用途。

• 你如何給一個事件處理函數命名空間，爲什麼要這樣做？

• 請說出你可以傳遞到jQuery方法的四種不同值。

  • 選擇器（字符串），HTML（字符串），回調函數，HTML元素，對象，數組，元素數組，jQuery對象等。
    

• 什麼是效果隊列？

• 請指出'.get()','[]','eq()',的區別。

• 請指出'.bing()','.live()'和'.delegate()'的區別。

• 請指出'$'和'$.fn'的區別？或者說出'$.fn'的用途。

• 請優化下列選擇器：

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

• 'delegate()'和'live()'有什麼區別?

  
  

CSS相關問題

• 描述css reset的作用和用途。

• 描述下浮動和它的工作原理。

• 清除浮動的方法有那些，分別適用於什麼情形。

• 解釋css sprites,如何使用。

• 你最喜歡的圖片替換方法是什麼，你如何選擇使用。

• 討論CSS hacks，條件引用或者其他。

• 如何爲有功能限制的瀏覽器提供網頁。

  • 你會使用那些技術和處理方法。
    

• 如何視覺隱藏網頁內容，只讓它們在屏幕閱讀器中可用。

• 你使用過網格系統嗎？如果使用過，你最喜歡哪種？

• 你使用過meidia queries（媒體查詢）嗎，或者移動網站相關的CSS佈局。

• 你熟悉SVG樣式的書寫嗎？

• 如何優化網頁的打印樣式。

• 在書寫高效CSS文件時會有哪些問題需要考慮。

• 你使用CSS預處理器嗎？(SASS,Compass,Stylus,LESS)

  • 如果使用，描述你的喜好。
    

• 你是否接觸過使用非標準字體的設計？

  • 字體服務，Google Webfonts, Typekit,等等。
    

• 請解釋瀏覽器是如何根據CSS選擇器選擇對應元素的。

  
  

可選的有趣問題

• 你編寫過的最酷的代碼是什麼？其中你最自豪的是什麼？

• 你知道HTML5的幫派標誌嗎？

• 你是否正在或曾經在一艘船上。(不懂這個幽默）

• 你使用的開發工具中，你最喜歡的部分是什麼？

• 你有什麼業餘項目嗎？是那種類型的？

• 解釋cornify的重要性？(本題完全摸不到頭腦）

• 在一張紙上，垂直寫下ABCDE，然後不用任何代碼，將他們到序排列。

  • 靜靜的看他們是否將紙反轉。
    

• 海盜還是忍者？

  • 如果是兩者的合體，並有恰當理由，可以加分。如果是殭屍猴子海盜加忍者加兩分。(注，此題文化差異過大）
    

• 如果沒有在Web開發，你會做什麼？

• 卡門聖迭哥的隱藏處在哪裏？

  • 提示：本題的答案永遠是錯的。
    

• 你最愛的IE特性是什麼？

• 完句填空： Brendan Eich和Doug Crockford是JavaScript的________。

• 討論：jQuery是牛逼的庫還是最牛逼的庫。

  原文地址：https://github.com/darcyClarke/F ... tree/master/Chinese