老外的前端面試題

• 用Twitter嗎？
  
  • 若是用，你在Twitter上面關注誰了？
    
• 用Github嗎？
  
  • 若是用，請列舉幾個你在上面關注的存儲庫(repos)。
    
• 你關注了什麼博客？
• 你用過什麼版本控制系統？
• 你偏心的開發環境是什麼？（操做系統，編輯器，瀏覽器，工具等等）
• 你能描述一下當你建立一張網頁時的流程嗎？
• 你能描述一下漸進加強和平穩降級的不一樣之處嗎？
  
  • 若是回答了「沒人能描述」，則加分
  • 若是描述了「特徵檢測」，則額外加分
    
• 解釋「語義化的HTML」的意思。
• JS壓縮（Minification）是做什麼用的？
• 爲何把站點資源文件放在多個域下的作法比較好？
  
  • 一個瀏覽器一次從一個域下下載幾個資源？
    
• 若是你爲某個設計稿作了8個不一樣的css文件，你是如何把它們集成到網站當中去的？
  
  • 文件合併
  • 用@import，除非這部分工做在構建系統裏面已經作掉了
    
• 若是你加入了一個項目，他們用tabs，而你用空格，你會怎麼作？
  
  • 問題：retab! 命令
    
• 寫一個簡單的幻燈片放映的頁面。
  
  • 若是不用JS，則加分
    
• 你用什麼工具來測試你的代碼性能？
• 若是今年你能掌握一門技術，它將會是什麼？
• 說出3種減小頁面加載時間的方法。（感受上或者真實地減小了時間）
• 解釋一下標準的重要性。
  

 

HTML細節問題：

• doctype是幹嗎用的？你能說出幾種來？
• 標準模式和怪異模式的區別是什麼？
• 在用XHTML頁面時有什麼限制嗎？
  
  • 用application/xhtml+xml?會有什麼問題
    
• 你是如何作多語言內容的頁面的？
• HTML5中能使用XHTML的語法嗎？在HTML5中你是怎麼使用XML的？
• data- 開頭的這種屬性有什麼好處？
• HTML4中的內容模型（content model）是什麼？和HTML5中的有區別嗎？
• 試想HTML5爲一個開發的網絡平臺，那HTML5的基礎模塊(building blocks)是什麼？
• 描述一下cookie，sessionStorage和localStorage的區別。
  

 

JS細節問題：

• 你用過什麼JavaScript庫？
• JavaScript和Java有何不一樣？
• 未定義（undefined）和未申明（undeclared）變量分別是指什麼？
• 閉包（closure）是什麼？如何/爲何 使用？
  
  • 你最喜歡的閉包寫法是哪一種？Argyle(只適用於當即調用模型（IIFEs）)
    
• 匿名函數（anonymous functions）的典型使用案例是什麼？
• 解釋一下JavaScript 模塊化模式以及你什麼時候使用。
  
  • 提到清晰的命名空間（clean namespace），加分
  • 若是你的模塊沒有命名，那將會怎麼？
    
• 你是如何組織你的代碼的？（模塊模式（module pattern），類繼承（classical inheritance）？）
• 宿主對象(host objects)和原生對象(native objects)有何不一樣？
• 如下語句的區別：
  

 

1. function Person(){}
   
2. var person = Person()
   
3. var person = new Person()

複製代碼

• call 和 apply的區別？
• 解釋 Function.prototype.bind
• 你什麼時候優化你的代碼？
• 你能解釋下繼承在JavaScript中是如何工做的嗎？
  
  • 若是說出「沒人會」的有趣答案，加分
  • 若是他開始認真解釋了，額外加分
    
• 你什麼時候用過document.write()？
  
  • 正確答案：1999年 – 淘汰初級開發者的時候（time to weed out the junior devs）
    
• 特徵檢測（feature detection），特徵推斷(feature inference)，用戶代理（UA）字符串的區別？
• 儘量細地解釋一下AJAX。
• 解釋一下JSONP是如何工做的？（爲何它不是真正的AJAX？）
• 解釋一下「提高（hoisting）」
• 什麼是FOUC？你是如何避免FOUC的？
• 描述一下事件冒泡
• 「attribute」 和 「property」的區別是？
• 用過JavaScript模板嗎？若是用過，那是什麼模板或者是怎麼用的？
• 爲何擴展內置的JavaScript對象（extending built in JavaScript objects）不是一個好的主意？
• 爲何擴展內置組件（extending built ins）是個不錯的主意？
• document load事件和document ready事件的區別
• == 和 === 的區別是什麼？
• 解釋一下你是如何從window的URL中獲取查詢字符串參數的（query string parameter）？
• 解釋一下關於Javascript的同源策略（same-origin policy）
• 解釋一下事件代理（event delegation）
• 描述一下JavaScript中的繼承模式
• 使下面的代碼工做：
  

 

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

複製代碼

    解釋一下Memoization的策略
    爲何叫三元（Ternary）操做符？「三元」暗示着什麼？
    函數的參數數量（arity）是什麼？

JS代碼例子：

1. ~~3.14

複製代碼

問題：上述語句的返回結果是什麼？

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

複製代碼

問題：上述語句的返回結果是什麼？

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

複製代碼

問題：window.foo的值是多少

1. var foo = "Hello";
   
2. (function() {
   
3.   var bar = " World";
   
4.   alert(foo + bar);
   
5. })();
   
6. alert(foo + bar);
   

複製代碼

問題：2個alert的輸出結果是什麼

jQuery細節問題：

• 解釋一下「鏈接（chaining）」操做
• .end() 是作什麼的？
• 在綁定事件的時候，你是如何（爲何）加上事件的命名空間（namespace）
• 效果隊列（effects queue）（或者FX）是什麼？
• .get(), [], .eq() 的區別
• .bind(), live()和.delegate()的區別是什麼？
• $ 和 $.fn 的區別？或只說$.fn是什麼？
• 優化下面的選擇方法：
  

 

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

複製代碼

CSS細節問題：

• 描述一下「reset」css文件的做用以及它爲何是有用的？
• 描述一下浮動（Floats）及是如何工做的
• 清除浮動的技術有哪些？什麼場景下該用什麼技術？
• 解釋一下CSS Sprite及你是如何在一張頁面或者一個站點上面使用該技術的？
• 對於功能有限的瀏覽器（feature-constrained browsers），你是如何製做你的頁面的？
  
  • 你使用什麼技術（處理）
    
• 有什麼方法在視覺層面上隱藏內容（使之僅對屏幕閱讀者（screenreaders）可用）？
• 你使用過柵格系統（grid system）嗎？若是用過，你喜歡哪一種？
• 你在其它媒體或者移動設備上使用過或者實現過佈局（css）嗎？（Have you used or implement media queries or mobile specific layouts/CSS?）
• 給SVG添加樣式，熟悉嗎？
• 對於打印，你是如何優化你的頁面的？
• 在寫css時有什麼gotchas？（What are some of the 「gotchas」 for writing efficient CSS?）
• 使用過LESS嗎？
• 網 頁設計使用非標準字體的排版，你將如何實現？（避免說起網頁字體（webfonts），那樣的話他們會想到(你的意圖)）（How would you implement a web design comp that uses non-standard fonts?）
• 解釋一下瀏覽器是如何將元素和css選擇器進行匹配的？
  

 

隨意有趣的問題：

• 你最酷的編碼做品是什麼，讓你自豪的是什麼？
• 你知道HTML5小組的標記嗎？
• 你如今在或者曾經在太小船上面嗎？
• 告訴我你最喜歡的Firebug/Webkit Inspector的功能
• 你有養寵物計劃嗎？哪一種寵物
• 解釋一下「cornify」的重要性
• 在一張紙上，豎直寫下A，B，C，D  4個字母。而後不寫代碼，將這些字母降序排列。
  
  • 等着看他們是否把紙給上下顛倒過來
  • 這是一個在面試將要結束，緩解緊張氣氛的好方法，應該會有笑聲：）
    
• 海盜或是忍者：
  
  • 若是能說出好的理由作由海盜和忍者的組成物，加分（如果猴子殭屍海盜忍者，+2分）
  • 若是不作web開發，你會作什麼？
  • 怪盜卡門（Carmen Sandiego）在哪一個世界（提示： 他們的回答老是錯的）
  • 你最喜歡IE的什麼特性？