前端面試問題

1.你在昨天/本週學到了什麼？

很直接！就是考察最近學習了沒？學到了點啥？若是沒學還真很差糊弄。

2.編寫代碼的哪些方面可以使你興奮或感興趣？

享受代碼運行成功時的成就感。

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

參考連接

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

喜歡用Mac、sublime、chrome等。

參考連接

5.你能描述一下當你製做一個網頁的工做流程嗎？

參考連接

6.你能描述一下漸進加強和優雅降級之間的不一樣嗎?

參考連接

參考連接

7.請解釋一下什麼是「語義化的 HTML」。

語義化一句話來歸納就是使用正確的標籤作正確的事。在沒有css樣式的狀況下，也能使網站層次清晰可讀。語義化的好處之一是還利於網站的SEO。

參考連接

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

1. JS方面：合併腳本，壓縮腳本，腳本置下，按需加載腳本，緩存查找的節點，不頻繁操做DOM，使用事件委託。
2. CSS方面：合併樣式表，壓縮樣式表，樣式置上，縮短類名命名，減小層級選擇，使用審查工具查找閒置樣式。
3. HTML方面：壓縮頁面，減小沒必要要的嵌套，行爲樣式分離利於緩存腳本和樣式表。
4. IMG方面：合成雪碧圖，壓縮圖片，使用iconfont，儘可能用css技術代替圖片
5. 最後，使用緩存，使用CDN，使用本地存儲優點是不包含頭信息，減小了帶寬佔用。

參考連接

9.爲何利用多個域名來提供網站資源會更有效？

參考連接

10.瀏覽器同一時間能夠從一個域名下載多少資源？

參考連接

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

1. 按需加載
2. 延遲加載
3. 利用緩存

參考連接

12.若是你參與到一個項目中，發現他們使用 Tab 來縮進代碼，可是你喜歡空格，你會怎麼作？

我真的喜歡兩個空格縮進。「它是惟一一種在全部瀏覽器裏顯示一致的縮進方式。」

參考連接

13.請寫一個簡單的幻燈效果頁面(若是不使用JS來完成，能夠加分。)

參考連接

14.你都使用哪些工具來測試代碼的性能？

Chrome Web Developer Tools

參考連接

15.若是今年你打算熟練掌握一項新技術，那會是什麼？

HTML5

參考連接

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

網頁經過標準定製機構定製統一標準才能更好的發展。

參考連接

17.什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

IE下css文件中使用@import帶來的Flash of Unstyled Content。使LINK標籤將樣式表放在文檔HEAD中。

參考連接

HTML相關問題：

1.doctype（文檔類型）的做用是什麼？

用來講明使用的HTML是什麼版本。

參考連接

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

盒模式的解析。

參考連接

3.使用 XHTML 的侷限有哪些？

強制規定本來靈活的HTML語言來遵循XML的嚴格規範，明顯與時代發展相悖。

參考連接

4.若是頁面使用 'application/xhtml+xml' 會有什麼問題嗎？

參考連接

5.若是網頁內容須要支持多語言，你會怎麼作？

參考連接

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

參考連接

7.data-屬性的做用是什麼？

HTML5新增的能夠用來統一存放數據的屬性，還能用來存放JSON格式。

參考連接

8.若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？

Geolocation/Web Socket/Canvas/Video/HTML5 forms/Web Workers

參考連接

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

1. cookies 沒有另外兩個存放數據量大，並且每次都會發送給服務器，佔用帶寬。
2. sessionStorage 是用來在瀏覽器運行期間保存數據，在關閉瀏覽器後被清除，而localStorage不會被清除。

參考連接

CSS 相關問題：

1.描述下 「reset」 CSS 文件的做用和使用它的好處。

抹平不一樣瀏覽器初始化樣式。推薦normalize.css

參考連接

2.解釋下浮動和它的工做原理。

浮動會使節點脫離文檔流。

參考連接

3.列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景。

1. 父容器上設置overflow:hidden：內容不擔憂被截斷時很方便。
2. 父容器也設置浮動：要考慮周圍元素的佈局。
3. 父容器添加clearfix類名。建議使用Micro Clearfix

參考連接

4.解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。

將多個小圖標統一排列到一張圖片再使用background-position來選取以減小HTTP請求數。

參考連接

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

.header{
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

參考連接

6.討論CSS hacks，條件引用或者其餘。

參考連接

7.如何爲有功能限制的瀏覽器提供網頁？你會使用哪些技術和處理方法？

略。

8.有哪些的隱藏內容的方法（若是同時還要保證屏幕閱讀器可用呢？）

略。

9.你用過柵格系統嗎？若是使用過，你最喜歡哪一種？

bootstrap。

參考連接

10.你用過媒體查詢，或針對移動端的佈局/CSS 嗎？

Media query
參考連接

11.你熟悉 SVG 樣式的書寫嗎？

參考連接

12.如何優化網頁的打印樣式？

爲打印媒體添加打印樣式。

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

or

@media print{
  div{
    /**/
  }
}

參考連接

13.在書寫高效 CSS 時會有哪些問題須要考慮？

1. 層級選擇器儘可能不超過3層。
2. 儘可能提取共用樣式聲明。
3. 儘可能使用類選擇器。
4. 儘可能讓不在層級選擇器的結尾出現標籤選擇器。

參考連接

14.使用 CSS 預處理器的優缺點有哪些？(SASS，Compass，Stylus，LESS)。描述下你曾經使用過的 CSS 預處理的優缺點。

優勢：變量、mixin、大量插件。 缺點：上手速度。

參考連接

15.若是設計中使用了非標準的字體，你該如何去實現？Webfonts (字體服務例如：Google Webfonts，Typekit 等等。)

可以使用@font-face，不支持的瀏覽器儘可能使用圖片。

16.解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？

從選擇器最右邊開始一層層解析並判斷。

參考連接

17.解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。

盒模型包括margin/border/padding/content。CSS3中使用box-sizing：

1. box-sizing: border-box; 盒寬度計算border
2. box-sizing: content-box; 盒寬度不計算border

參考連接

JS相關問題：

1.解釋下事件代理。

利用事件冒泡到父節點，再查找事件源event.target是哪一個子節點。

參考連接

2.解釋下 JavaScript 中 this 是如何工做的。

對象中的this指向當前對象，函數中的this始終指向當前做用域的上下文（上下文能夠被修改）。

參考連接

3.解釋下原型繼承的原理。

當查找對象的屬性時，首先在該對象自己查找，不然追溯到其原型去找，直到查找到Object.prototye爲止。

參考連接

4.你是如何測試JavaScript代碼的？

參考連接

5.AMD vs. CommonJS？

參考連接

6.什麼是哈希表？

名值對組成的對象或JSON數據格式。

參考連接

7.解釋下爲何接下來這段代碼不是 IIFE(當即調用的函數表達式)？要作哪些改動使它變成 IIFE?

function foo(){ }();

函數聲明不能直接被調用。須要用括號包裹或者前面加操做符使其變爲函數表達式。
參考連接

8.描述如下變量的區別：null，undefined 或 undeclared？該如何檢測它們？

他們都表示空值，並且 null == undefined，可是屬於不一樣的基本數據類型。

1. 聲明一個變量而不賦值，則它的值是undefined/undeclared。
2. 函數參數調用時不傳實參，則對應的形參是undefined。
3. 對象中不存在的鍵值的值是undefined。

參考連接

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

閉包可讓外部做用域使用內部做用域的變量。當外部做用域執行完畢後，內存也不會被釋放。這是JS強大功能的一面。

參考連接

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

arr.forEach(function(value, index){})

參考連接

11.解釋 「JavaScript 模塊模式」 以及你在什麼時候使用它。（若是有提到無污染的命名空間，能夠考慮加分。）（若是你的模塊沒有本身的命名空間會怎麼樣？）

利用IIFE和閉包的概念，返回內部程序接口供外部使用。既不污染全局變量，又能導入外部引用對象。

參考連接

12.你是如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？

參考連接

13.請指出 JavaScript 宿主對象和原生對象的區別？

宿主對象是指DOM（document）和BOM（window）。原生對象是Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等對象。

參考連接

14.指出下列代碼的區別：

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

上面的this指針指向window對象，下面的this指向新生成對象，最後該對象賦給person。

參考連接

15..call 和 .apply 的區別是什麼？

接受的參數形式不一樣：call接受參數列表形式，apply接受數組/類數組形式。

fn.call(context, 1, 2, 3)
fn.apply(context, [1, 2, 3])
fn.apply(context, arguments)

參考連接

16.請解釋 Function.prototype.bind 的做用？

擴展函數原型，使全部函數都新增bind方法，該方法能夠綁定該函數執行上下文後返回一個新函數。

參考連接

17.你什麼時候優化本身的代碼？

剛開始寫就會注意優化。

參考連接

18.你能解釋一下 JavaScript 中的繼承是如何工做的嗎？

當查找對象的屬性時，首先在該對象自己查找，不然追溯到其原型去找，直到查找到Object.prototye爲止。

參考連接

19.在何時你會使用 document.write()？大多數生成的廣告代碼依舊使用 document.write()，雖然這種用法會讓人很不爽。

幾乎不用。

參考連接

20.請指出瀏覽器特性檢測，特性推斷和瀏覽器 UA 字符串嗅探的區別？

特性檢測更適合針對實現了特定特性的瀏覽器進行操做。UA字符串因爲被瀏覽器廠商能夠隨意修改所以不太靠譜。

參考連接

21.請儘量詳盡的解釋 AJAX 的工做原理。

XMLHttpRequest對象，方法有open、get、send等。
參考連接
參見連接

22.請解釋 JSONP 的工做原理，以及它爲何不是真正的 AJAX。

一種跨域方法，讓遠程服務器把接受到的參數做爲方法名包裹查詢的數據後返回，在本地調用該方法。JSONP沒用到XMLHttpRequest對象。

參考連接

23.你使用過 JavaScript 模板系統嗎？若有使用過，請談談你都使用過哪些庫，好比 Mustache.js，Handlebars 等等。

瞭解Mustache。使用過UnderscoreJS自帶模版。

參考連接

24.請解釋變量聲明提高。

做用域內全部變量聲明都被提到頂部，被提高的變量初始值爲undefined，執行到所在行時才真正賦值。

參考連接

25.請描述下事件冒泡機制。

IE支持事件冒泡，Netscape支持事件捕獲，W3C創建先捕獲-後冒泡機制。

參考連接

26."attribute" 和 "property" 的區別是什麼？

參考連接

27.爲何擴展 JavaScript 內置對象不是好的作法？

擴展內置對象會形成混亂。

參考連接

28.爲何擴展 JavaScript 內置對象是好的作法？

雖然會強壯JS的原生功能，但仍是不是好作法。

參考連接

29.請指出 document load 和 document ready 兩個事件的區別。

ready事件監聽DOM樹的加載完成時間，先於onload的頁面全部內容加載完畢時間。

參考連接

30.== 和 === 有什麼不一樣？

=== 不會作隱式類型轉換

參考連接

31.你如何從瀏覽器的 URL 中獲取查詢字符串參數。

參考連接

32.請解釋一下 JavaScript 的同源策略。

瀏覽器的安全策略，限制了不一樣域名甚至不一樣端口的js文件的交互方式。

參考連接

33.請描述一下 JavaScript 的繼承模式。

類式繼承：參考連接

function Person(name){
 this.name = name
}
Person.prototype.sleep = function(){
  console.log(this.name + ' is sleeping.')
}
function Student(name){
 Person.apply(this, arguments)
}
Student.prototype = new Person()
var lilei = new Student('li lei')
lilei.sleep()

原型繼承：參考連接

function Person(){}
  Person.prototype.sleep = function(){
    console.log(this.name + ' is sleeping')
  }
  function inherit(o){
   var F = function(){}
   F.prototype = o
   return new F
  }
  function Student(name){
    this.name = name
  }
  Student.prototype = inherit(Person.prototype)
  var lilei = new Student('lilei')
  lilei.sleep()

34.如何實現下列代碼：

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

方法一

Array.prototype.duplicator = function(){
  return this.concat(this)
}

參考連接

35.描述一種 JavaScript 中實現 memoization(避免重複運算)的策略。

函數也是對象，所以考慮將部分計算結果用鍵值對方式緩存到該函數對象上，下次直接查找該計算的鍵值。

參考連接

36.什麼是三元表達式？「三元」 表示什麼意思？

根據一個判斷結果的true和false的不一樣而獲得兩種不一樣的返回值。

37.函數的參數元是什麼？

略。

38.什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？

好處是使JS在嚴格模式下運行，減小bug。壞處是有些對象使用時會報錯，如arguments.callee等。

參考連接

jQuery 相關問題：

1.解釋"chaining"。

函數返回自身，供鏈式調用

$(ele).click().show().animate().hide()

參考連接

2.解釋"deferreds"。

一句話解釋：能夠隨時調用一個異步函數的返回值。

參考連接

3.你知道哪些針對 jQuery 的優化方法。

1. 緩存DOM查找的節點
2. 使用事件委託
3. 不頻繁操做DOM（如append、before等）
4. 對於頻繁觸發的事件使用事件節流（場景如$(window).resize()、$(window).scroll()等）

參考連接

4.請解釋 .end() 的用途。

返回對jQuery引用對象形成「破壞性」操做以前的DOM節點。

參考連接

5.你如何給一個事件處理函數命名空間，爲何要這樣作？

能夠選擇掛在jQuery對象下面，好處是能夠減小使用全局變量。

參考連接

6.請說出你能夠傳遞給 jQuery 方法的四種不一樣值。（選擇器（字符串），HTML（字符串），回調函數，HTML元素，對象，數組，元素數組，jQuery對象等。）

// 1. dom ready
$(function(){
})
// 2. selector
$('a.close-btn')
// 3. create node
$('<div />')
// 4. wrapp nodeList
$(document.getElementsByTagName('div'))

參考連接

7.什麼是效果隊列？

.queue()方法的使用。

參考連接

8.請指出 .get()，[]，eq() 的區別。

.get()返回的是原生DOM節點，.get()與[]返回的是原生DOM節點，.get()不傳參數還能夠返回包裹的原生數組對象。參考連接

.eq()返回的是jQuery對象。參考連接

9.請指出 .bind()，.live() 和 .delegate() 的區別。

1. 問題過期了，之後建議用.on()，將上面三者的優勢全盤接收。
2. .bind()方法用於綁定事件，事件綁定在該節點上。該方法還能用來綁定自定義事件。
3. .live()方法還能用於給未來添加到頁面裏的節點也能綁定事件。事件綁定在document上。
4. .delegate()方法使用了事件委託機制，也達到了.live()的效果。事件綁定在了節點的父節點上。
5. .on()方法改造了.delegate()使用方法，還將.bind()的綁定自定義事件的功能收入囊中。

參考連接

10.請指出 $ 和 $.fn 的區別，或者說出 $.fn 的用途。

$.fn是jQuery對象的原型縮寫，擴展$.fn能夠爲全部jQuery對象添加原型方法。

參考連接

11.請優化下列選擇器：$(".foo div#bar:eq(0)")

$('.foo').find('#bar').first() // $('#bar')不就是想要的嗎?

參考連接

代碼相關的問題：

1.問題：下面語句的返回值是什麼？

~~3.14

答案：3

2.問題：下面的語句的返回值是什麼？

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

答案："goh angasal a m'i"

3.問題：window.foo 的值是什麼？

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

答案："bar" 只有 window.foo 爲假時的纔是上面答案，不然就是它自己的值。

4.問題：下面兩個 alert 的結果是什麼?

var foo = "Hello"; 

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

alert(foo + bar);

答案: "Hello World" 和 ReferenceError: bar is not defined

5.問題：foo.length 的值是什麼?

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

答案：2

6.問題：foo.length 的值是什麼？

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

答案: undefined

有趣的問題：

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

沒有。

2.在你使用過的開發工具中，最喜歡哪一個？

Google Developer Tools

3.你有什麼業餘項目嗎？是哪一種類型的？

Github

4.你最愛的 IE 特性是什麼？

IE的各類bug。