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

正常問題

• 最近你學了什麼？
• 是什麼激發你對程式設計的興趣？
• 你最近在挑戰什麼新技術、你是怎麼解決遇到的問題？
• 當你在建構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的什麼功能？
• 你喜歡什麼樣的咖啡？