世界各地程序員共同總結的前端面試題

常規問題

• 最近你學了什麼？
• 是什麼激發你對編程的興趣？
• 你最近在挑戰什麼新技術、你是怎麼解決遇到的問題？
• 當你在構建Web應用程序或網站時，你會考慮什麼樣的用戶界面、安全性、性能、SEO、可維護性、選用的技術？
• 談談你首選的開發環境（系統、編輯器或IDE、瀏覽器、工具等）
• 你熟悉什麼版本控制系統？
• 請描述一下你建立一個網頁的工做流程？
• 若是有5個不一樣的樣式表，怎樣最好地整合到網站裏？
• 請描述一下漸進加強和優雅降級的區別？
• 如何優化一個網站的資源？
• 傳統上，爲何網站資源來自多個域會更好？
• 瀏覽器能同時下載某個域的多少資源？
  
  
  • 例外狀況是什麼？
• 說出3個減小頁面加載時間的方法（主觀和客觀負荷時間）。
• 若是你加入了一個項目，他們使用tab鍵進行格式化，而你使用空格鍵，你會作什麼？
• 寫一個簡單的幻燈片
• 你使用什麼工具來測試代碼性能？
• 若是你今年能掌握一門技術，它會是什麼？
• Long-Polling（長輪詢）、Websockets、SSE之間的差別是什麼？
• 解釋標準的重要性。
• FOUC是什麼？如何避免FOUC？
• 儘可能詳細地描述從輸入一個網站的URL到頁面完成加載的過程。
• 解釋什麼是ARIA和screenreaders，和提升網站可讀性的辦法。
• 比較一下CSS動畫和JavaScript動畫優、缺點的
• 解釋下面的請求和響應頭：
  
  
  • Expires、Date、Age、If-Modified- 的區別
  • DNT
  • Cache-Control
  • Transfer-Encoding
  • ETag
  • X-Frame-Options

HTML 問題

• 什麼是doctype？
• 標準模式和兼容模式之間的區別是什麼？
• XHTML頁面的侷限性是什麼？
• 頁面使用application/xhtml+xml有什麼問題？
• 如何解決網站多語言問題？
• 開發複雜網站必須考慮哪些事情？
• data-屬性有好處？
• HTML5做爲一個開放的網絡平臺。HTML5的基石是什麼？
• 描述cookies、localStorage、sessionstorage之間的差別。
• 解釋GET和POST的區別
• 描述<script>、<script async>、<script defer>之間的差別。

CSS 問題

• CSS 的 class 和 id 的有什麼區別？
• 描述 reset CSS文件的做用和好處。
• 描述什麼是Floats（浮動）和它們是如何工做的。
• 描述z-index屬性和疊加的內容如何顯示。
• 描述各類清除浮動的方法和適合的場景
• 解釋 CSS sprites，你是如何在網站中使用的？
• 你最喜歡的圖片替代技術什麼是，何時使用？
• CSS屬性的hack技術有哪些？
• 你是如何處理對新技術有限制的瀏覽器？
  
  
  • 你用了什麼技術、處理方式？
• 在視覺上隱藏內容（並使其可用於屏幕閱讀器）的方法有哪些？
• 你使用過的網格系統（grid system）嗎？若是用過，你喜歡什麼？
• 你有使用過適合媒體查詢或移動特定的佈局嗎？
• 對SVG有什麼認識？
• 如何優化網頁打印？
• 編寫高效的CSS有什麼「陷阱」？
• 使用CSS預處理器的優勢/缺點是什麼？（Sass, Compass, Stylus, LESS）
  
  
  • 描述你喜歡和不喜歡的CSS預處理器。
• 你將如何使用非標準的字體實現一個網頁設計的排版？
• 解釋瀏覽器如何對元素與CSS選擇器匹配。
• 解釋你對盒模型的理解。你如何經過CSS告訴瀏覽器使用不一樣的盒模型來渲染你的布* 局。
• * { box-sizing: border-box; }有什麼用？它的優勢是什麼？
• display屬性有哪些值？
• inline and inline-block之間的區別是什麼？
• relative、fixed、absolute、static定位的區別？
• CSS的「C」表明Cascading。如何肯定指定樣式的優先級（舉一些例子）？怎麼利用這* 個規則？
• 學過或在項目中用過什麼CSS框架？（Bootstrap、 PureCSS、Foundation等）
  
  
  • 若是能夠，你會怎樣改變/改善它們？
• 有沒有用過新的CSS Flexbox或網格佈局？
• 響應設計和自適應設計有什麼不一樣？
• 是否用過視網膜圖形？
  
  
  • 使用了什麼技術？

JS問題

• 解釋事件委託（event delegation）
• 解釋JavaScript的this如何工做的
• 解釋原型如何實現繼承
• 你如何去測試JavaScript？
• AMD與CommonJS
• 解釋爲何下面的函數不是IIFE（Imdiately Invoked Function Expression 當即執行的函數表達式）：foo() {}（）
  
  
  • 怎樣改爲IIFE？
• 變量null、undefined、undeclared的區別
  
  
  • 你如何檢查這些狀態？
• 閉包是什麼，以及如何使用、爲何使用？
• 一個匿名函數的典型用例是什麼？
• 你如何組織你的代碼？（模塊、模式、經典傳繼承？）
• 宿主對象（host objects）和本地對象（native objects）的區別是什麼？
• 比較下面寫法的區別：function Person(){}, var person = Person(), var person = new Person()
• .call 和 .apply的區別
• 解釋function.prototype.bind。
• 你何時優化你的代碼？
• 你何時用document.write()？
• 解釋特性檢測（feature detection）、特徵推理（feature inference）、UA字符串（UA string）的不一樣之處
• 詳細解釋AJAX。
• 解釋JSONP如何工做（以及它爲何不是Ajax）。
• 你有沒有使用JavaScript模板？
  你用什麼庫？（Mustache.js、Handlebars等）
• 解釋「hoisting」。
• 描述事件冒泡（event bubbling）。
• 「attribute」和「property」的區別是什麼？
• 爲何擴展內置的JavaScript對象不是一個好主意？
• document load事件和document ready事件之間的區別？
• == 和 ===的區別？
• 解釋JavaScript的同源策略
• 實現這個功能：

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

• 什麼是三元表達式，三元意味着什麼？
• 什麼是「use strict（使用嚴格的）」？它的優勢和缺點是什麼？
• 建立一個循環，循環到100，當數字是3的倍數時輸出「fizz」，是5的倍數和同時是3和5的倍數時輸出「FizzBuzz」
• 爲何通常來講，不要隨便建立全局變量？

jQuery 問題

• 解釋「chaining(鏈式)」。
• 解釋「deferreds（延時）」。
• 你知道哪些jQuery特定的優化？
• end()有什麼用？
• 說出4種能夠傳給jQuery方法的值。
  
  
  • Selector (string), HTML (string), Callback (function), HTML element, object, array, element array, jQuery Object等等。
• .get()、[]、.eq()的區別是什麼？

編程問題

• 實現

add(2, 5); // 7
add(2)(5); // 7

• 返回什麼值？

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

• window.foo的值是什麼

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

• 會alert什麼值？

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

• foo.length的值是多少

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

有趣的問題

• 你最近在作什麼有意思的項目？
• 你喜歡哪些開發工具？
• 你有作業餘項目嗎？什麼樣的？
• 你最喜歡Internet Explorer的什麼功能？
• 你喜歡什麼樣的咖啡？

項目地址：Github
SegmentFault整理編譯