前端面試經典題目彙總（持續更新中）

HTML相關問題

1.XHTML和HTML有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的標記語言
最主要的不一樣：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。

2.什麼是語義化的HTML?

直觀的認識標籤 對於搜索引擎的抓取有好處，用正確的標籤作正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

3.常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

4.HTML5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
支持HTML5新標籤：
繪畫 canvas；
用於媒介回放的 video 和 audio 元素；
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除；
語意化更好的內容元素，好比 article、footer、header、nav、section；
表單控件，calendar、date、time、email、url、search；
新的技術webworker, websockt, Geolocation；
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤；瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

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

cookie在瀏覽器和服務器間來回傳遞，sessionStorage和localStorage不會；
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage有各自獨立的存儲空間。

6.如何實現瀏覽器內多個標籤頁之間的通訊?

調用localstorge、cookies等本地存儲方式

7.HTML5 爲何只須要寫 !DOCTYPE HTML？

HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

8.Doctype做用？標準模式與兼容模式各有什麼區別?

!DOCTYPE聲明位於HTML文檔中的第一行，處於html 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

9.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

用於聲明文檔使用哪一種規範（html/Xhtml）通常爲嚴格過分基於框架的html文檔。
加入XMl聲明可觸發，解析方式更改成IE5.5 擁有IE5.5的Bug。

10.Canvas 與 SVG 的比較
Canvas
依賴分辨率
不支持事件處理器
弱的文本渲染能力
可以以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
不適合遊戲應用

CSS相關問題

1.CSS實現垂直水平居中

一道經典的問題，實現方法有不少種，如下是其中一種實現：

HTML結構：

<div class="wrapper">
    <div class="content"></div>
</div>

CSS：

.wrapper{position:relative;}
.content{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素須要相對定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;        //二分之一的height，width
    margin-left: -100px;
}

2.display有哪些值？說明他們的做用。

block         塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
none          缺省值。像行內元素類型同樣顯示。
inline        行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
inline-block  默認寬度爲內容寬度，能夠設置寬高，同行顯示。
list-item     像塊類型元素同樣顯示，並添加樣式列表標記。
table         此元素會做爲塊級表格來顯示。
inherit       規定應該從父元素繼承 display 屬性的值。

3.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

塊級元素：div,p,h1,form,ul,li;
行內元素 : span,a,label,input,img,strong,em;
CSS盒模型:內容，border ,margin，padding，有兩種類型：
IE 盒子模型、標準 W3C 盒子模型；
IE的content部分包含了 border 和 pading;

2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

4.CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入
區別 ：
(1).link屬於HTML標籤，而@import是CSS提供的;
(2).頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3).import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;
(4).link方式的樣式的權重高於@import的權重.
(5).link支持使用javascript改變樣式，後者不可

5.CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高?

標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
!important的優先級高

6.CSS清除浮動的幾種方法（至少兩種）

使用帶clear屬性的空元素；
使用CSS的overflow屬性；
使用CSS的:after僞元素；
使用鄰接元素處理；

7.CSS居中（包括水平居中和垂直居中）

內聯元素居中方案

水平居中設置：
1.行內元素
設置 text-align:center；
2.Flex佈局
設置display:flex;justify-content:center;(靈活運用,支持Chroime，Firefox，IE9+)

垂直居中設置：
1.父元素高度肯定的單行文本（內聯元素）
設置 height = line-height；
2.父元素高度肯定的多行文本（內聯元素）
a:插入 table （插入方法和水平居中同樣），而後設置 vertical-align:middle；
b:先設置 display:table-cell 再設置 vertical-align:middle；

塊級元素居中方案

水平居中設置：
1.定寬塊狀元素
設置左右的margin值爲 auto；
2.不定寬塊狀元素
a:在元素外加入table標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，而後設置margin的值爲 auto；
b:給該元素設置 displa:inine 方法；
c:父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:50%；

垂直居中設置：

使用position:absolute（fixed）,設置left、top、margin-left、margin-top的屬性;
利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
利用display:table-cell屬性使內容垂直居中;
使用css3的新屬性transform:translate(x,y)屬性;
使用:before元素;

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

reset。
規範命名。尤爲對於沒有語義化的html標籤，例如div，所賦予的class值要特別注意。
抽取可重用的部件，注意層疊樣式表的「優先級」。

9.display:none和visibility:hidden的區別？
display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。
visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

10.position的absolute與fixed共同點與不一樣點
A.共同點：
1.改變行內元素的呈現方式，display被置爲block；
2.讓元素脫離普通流，不佔據空間；
3.默認會覆蓋到非定位元素上
B.不一樣點：
absolute的"根元素"是能夠設置的，而fixed的"根元素"固定爲瀏覽器窗口。當你滾動網頁時，fixed元素與瀏覽器窗口之間的距離是不變的。

JS相關問題

1.談一談JavaScript做用域鏈

當執行一段JavaScript代碼（全局代碼或函數）時，JavaScript引擎會爲其建立一個做用域又稱爲執行上下文（Execution Context），在頁面加載後會首先建立一個全局的做用域，而後每執行一個函數，會創建一個對應的做用域，從而造成了一條做用域鏈。每一個做用域都有一條對應的做用域鏈，鏈頭是全局做用域，鏈尾是當前函數做用域。
做用域鏈的做用是用於解析標識符，當函數被建立時（不是執行），會將this、arguments、命名參數和該函數中的全部局部變量添加到該當前做用域中，當JavaScript須要查找變量X的時候（這個過程稱爲變量解析），它首先會從做用域鏈中的鏈尾也就是當前做用域進行查找是否有X屬性，若是沒有找到就順着做用域鏈繼續查找，直到查找到鏈頭，也就是全局做用域鏈，仍未找到該變量的話，就認爲這段代碼的做用域鏈上不存在x變量，並拋出一個引用錯誤（ReferenceError）的異常。

2.如何理解JavaScript原型鏈

JavaScript中的每一個對象都有一個prototype屬性，咱們稱之爲原型，而原型的值也是一個對象，所以它也有本身的原型，這樣就串聯起來了一條原型鏈，原型鏈的鏈頭是object,它的prototype比較特殊，值爲null。
原型鏈的做用是用於對象繼承，函數A的原型屬性(prototype property)是一個對象，當這個函數被用做構造函數來建立實例時，該函數的原型屬性將被做爲原型賦值給全部對象實例，好比咱們新建一個數組，數組的方法便從數組的原型上繼承而來。
當訪問對象的一個屬性時, 首先查找對象自己, 找到則返回; 若未找到, 則繼續查找其原型對象的屬性(若是還找不到實際上還會沿着原型鏈向上查找, 直至到根)。只要沒有被覆蓋的話, 對象原型的屬性就能在全部的實例中找到，若整個原型鏈未找到則返回undefined

3.JavaScript如何實現繼承？

構造繼承
原型繼承
實例繼承
拷貝繼承

原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。

function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//繼承了Parent，經過原型
    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//獲得被繼承的屬性

4.JavaScript的typeof返回哪些數據類型

object
number
function
boolean
underfind

5.例舉3種強制類型轉換和2種隱式類型轉換?

強制:parseInt、parseFloat、number
隱式：==、===

6.split()和join()的區別

前者是切割成數組的形式，後者是將數組轉換成字符串

7.數組方法pop() push() unshift() shift()的理解

pop()尾部刪除
push()尾部添加
unshift()頭部添加
shift()頭部刪除

8.IE和DOM事件流的區別

執行順序不同
參數不同
事件加不加on
this指向問題

9.ajax請求的時候get和post方式的區別

一個在url後面，一個放在虛擬載體裏面
有大小限制
安全問題
應用不一樣 一個是論壇等只須要請求的，一個是相似修改密碼的

10.IE和標準下有哪些兼容性的寫法

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

11.ajax請求時，如何解釋json數據

使用eval parse,鑑於安全性考慮 使用parse更靠譜。

12.事件委託是什麼？

利用事件冒泡的原理，本身所觸發的事件，讓他的父元素代替執行！

13.閉包是什麼，有什麼特性，對頁面有什麼影響?簡要介紹你理解的閉包

閉包就是可以讀取其餘函數內部變量的函數。變量得不到銷燬，一直儲存在內存中，可能形成內存泄漏。

14.添加 刪除 替換 插入到某個接點的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

15..」==」和「===」的不一樣

前者會自動轉換類型，後者不會

16.編寫一個b繼承a的方法

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+」 say Hello!」);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //至關於new A();
    delete this.temp;       
    this.id = id;   
    this.checkId = function(ID){alert(this.id==ID)};
}

17.如何阻止事件冒泡和默認事件

function stopBubble(e){
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
return false

18.下面程序執行後彈出什麼樣的結果?

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

19.談談對this對象的理解。

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。
可是有一個總原則，那就是this指的是調用函數的那個對象。
this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象

20.下面程序的結果

function fun(n,o) {
  console.log(o);
  return {
      fun:function(m){
          return fun(m,n);
      }
  };
}
var a = fun(0);  
a.fun(1);  
a.fun(2);  
a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  
c.fun(2);  
c.fun(3);

答案：
a: undefined,0,0,0
b: undefined,0,1,2
c: undefined,0,1,1

21.下面程序的輸出結果

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

22.瞭解Node麼？Node的使用場景都有哪些？

高併發、聊天、實時消息推送

23.介紹下你最經常使用的一款框架

jquery,rn,angular等;

24.對於前端自動化構建工具備瞭解嗎？簡單介紹一下

Gulp,Grunt等；

25.說一下什麼是JavaScript的同源策略？

一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合。

其餘問題

1.說說最近最流行的一些東西吧？常去哪些網站？

Node.js、MVVM、React-native,Angular,Weex等
CSDN,Segmentfault,博客園,掘金,Stackoverflow,伯樂在線等

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

via開發單頁webapp的技術。
SAP可以是頁面與頁面之間無縫鏈接，避免出現白頁，且帶有動態效果，提升用戶體驗。同時SAP，有JavaScript渲染頁面，而後在從服務器獲取小量的數據顯示，如此反覆，請求的數據無須要服務器處理，減小服務器負荷。
SAP對技術要求高。要考慮首屏加載事件過長；動畫效果要考慮低端手機；垃圾收集，須要本身釋放資源，避免頁面變卡。

PS：五個典型的JavaScript試題：

問題1: 範圍（Scope）
思考如下代碼：

(function(){
    var a=b=5;
})();
console.log(b);

控制檯（console）會打印出什麼？

答案：上述代碼會打印出5。

這個問題的陷阱就是，在當即執行函數表達式（IIFE）中，有兩個命名，可是其中變量是經過關鍵詞var來聲明的。這就意味着a是這個函數的局部變量。與此相反，b是在全局做用域下的。
這個問題另外一個陷阱就是，在函數中他沒有使用"嚴格模式" ('use strict';)。若是 嚴格模式 開啓，那麼代碼就會報出未捕獲引用錯誤（Uncaught ReferenceError）：b沒有定義。記住，嚴格模式要求你在須要使用全局變量時，明確地引用該變量。所以，你須要像下面這麼寫：

(function(){
    'use strict'
    var a=window.b=5;
})();
console.log(b);

問題2: 建立 「原生（native）」 方法

在String對象上定義一個repeatify函數。這個函數接受一個整數參數，來明確字符串須要重複幾回。這個函數要求字符串重複指定的次數。舉個例子：

console.log('hello'.repeatift(3));

應該打印出hellohellohello.

答案：一種可能的實現以下所示：

String.prototype.repeatify=String.prototype.repeatify||function(times){
    var str='';
    for(int i=0;i<times;i++){
        str+=this;
    }
    return str;
};

這個問題測試了開發人員對於JavaScript中繼承的掌握，以及prototype這個屬性。這也驗證了開發人員是否有能力擴展原生數據類型的功能（雖然不該該這麼作）。
這個問題的另外一個重點是驗證你是否意識到並知道如何避免覆蓋已經存在的函數。這能夠經過在自定義函數以前判斷該函數是否存在來作到。

String.prototype.repeatify=String.prototype.repeatify||function(times){
    /*code here*/        
};

當你須要爲舊瀏覽器實現向後兼容的函數時，這一技巧十分有用。

問題3: 變量提高（Hoisting）

執行如下代碼會有什麼結果？爲何？

function test(){
    console.log();
    console.log(foo());
    var a=1;
    function foo(){
        return 2;
    }
}
test();

答案：這段代碼的執行結果是undefined和2。

這個結果的緣由是，變量和函數都被提高了（hoisted）。所以，在a被打印的時候，它已經在函數做用域中存在（即它已經被聲明瞭），可是它的值依然是 undefined。換言之，上述代碼和如下代碼是等價的。
function test(){

var a=1;
function foo(){
    return 2;
}
console.log();
console.log(foo());
a=1;  
}
test();

問題4: this 在 JavaScript 中是如何工做的

如下代碼的結果是什麼？請解釋你的答案。

var fullname='AAA';
var obj={
    fullname:'BBB';
    prop:{
        fullname:'CCC',
        getFUllname:fullname(){
            return this.fullname;
        }
    }
};
console.log(obj.prop.getFullname());
var test=obj.prop.getFullname;
console.log(test());

答案：上面的代碼打印出CCC和AAA。緣由是在JavaScript中，一個函數的上下文環境，也就是this關鍵詞所引用對象，是依賴於函數是如何被調用的，而不是依賴於函數如何被定義的。

在第一個 console.log() 調用中，getFullname() 是做爲obj.prop的函數被調用的。所以，這裏的上下文環境指向後者而且函數返回this對象的fullname屬性。相反，當 getFullname() 被賦爲test變量的值時，那個語境指向全局對象(window)。這是由於，test 被隱式設置爲全局對象的屬性。所以，函數調用返回window的fullname屬性值，在此段代碼中，這個值是經過第一行賦值語句設置的。

問題5: call() 和 apply()

修復上一個問題，讓最後一個console.log()打印出CCC。

答案：要解決這個問題，能夠經過爲函數call()或者apply()強制函數調用的上下文環境。

console.log(test.call(obj.prop));

本文章持續更新中，我的能力有限，錯誤之處但願小夥伴們踊躍指出。