前端面試題精選

1、電話面試開場白

一、你先簡短地介紹一下本身

二、你是怎麼學習前端的（紅寶書？犀牛書？博客？社羣？github、segmentfault、v2ex、stackoverflow ...）

三、怎麼纔算一個好的前端開發者（溝通、設計、交互、特效、兼容、封裝、造輪子 ...）

四、談一談你將來三五年的職業規劃（資深WEB前端工程師？資深WEB架構師？轉崗管理或其餘？本身創業？...）

 

2、前端面試題（入門）

一、html5新特性。和html的區別有哪些?好比多了哪些新的標籤?

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

1）繪畫 canvas；

2）用於媒介回放的 video 和 audio 元素；

3）本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

4）sessionStorage 的數據在瀏覽器關閉後自動刪除；

5）語意化更好的內容元素，好比 article、footer、header、nav、section；

6）表單控件，calendar、date、time、email、url、search；

7）新的技術webworker, websocket, Geolocation。

二、html中的區塊元素和行內元素（也叫內聯元素）簡介與區別。

塊級元素：塊級大多爲結構性標記，常見的有 div、h1~h六、table、form、p ...

1）老是重新的一行開始。2）高度、寬度都是可控的。3）寬度沒有設置時，默認爲100%。4）塊級元素中能夠包含塊級元素和行內元素。

行內元素：行內大多爲描述性標記，常見的有 label、input、img、br、a ...

1）和其餘元素都在一行。2）高度、寬度以及內邊距都是不可控的。3）寬高就是內容的高度，不能夠改變。4）行內元素只能行內元素，不能包含塊級元素。

三、css盒子模型簡要介紹。

每一個元素，都會造成一個矩形塊，主要包括四部分：margin(外邊距)+border(邊框)+padding(內邊距)+content(內容)

四、css寫法中 div p 與 div , p 與 div > p 分別表明什麼意思？

div p ：選擇（做用於） <div> 元素內部的全部 <p> 元素。

div , p ：選擇（做用於）全部 <div> 元素和全部 <p> 元素。

div > p ：選擇（做用於）父元素爲 <div> 元素的全部 <p> 元素。

五、css僞類是什麼？如何合理利用？

經常使用的有 :hover、:active、:before、:after、:first-child、:last-child、:nth-child(n)

其中 :nth-child(n)  參數n能夠是數字、關鍵詞或公式。選擇奇數位置的元素：:nth-child(odd)、選擇偶數位置的元素：:nth-child(even)

六、css佈局定位有哪些？

 display 屬性（文檔流佈局） + position 屬性（定位佈局） + float屬性（浮動佈局）

七、簡單介紹一下js基本數據類型與引用數據類型，分別有哪幾種？

基本數據類型：字符串（String）、數字（Number）、布爾（Boolean）、空（Null）、未定義（Undefined）

應用數據類型：對象（Object）、數組（Array）、函數（Function）、正則（RegExp）、日期（Date）...

原始類型（基本類型）：按值傳遞，能夠操做保存在變量中實際的值。原始類型彙總中null和undefined比較特殊。

引用類型：按引用傳值，引用類型的值是保存在內存中的對象。

* 與其餘語言不一樣的是，JavaScript不容許直接訪問內存中的位置，也就是說不能直接操做對象的內存空間。在操做對象時，其實是在操做對象的引用而不是實際的對象。因此引用類型的值是按引用訪問的。

八、ajax請求簡介

js怎麼發送http請求？其中get請求和post請求的區別是什麼？

九、簡單介紹一下從輸入URL到瀏覽器顯示頁面的過程

a. 域名解析

b. 發起TCP的3次握手

c. 創建TCP鏈接後發起http請求

d. 服務器端響應http請求，瀏覽器獲得html代碼

e. 瀏覽器解析html代碼，並請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

3、前端面試題（進階）

一、HTTP狀態碼知道哪些？

最基本的常識：

200 – 服務器成功返回網頁

404 – 請求的網頁不存在

503 – 服務器超時

 

1xx（臨時響應）表示臨時響應並須要請求者繼續執行操做的狀態碼。

2xx（成功）表示成功處理了請求的狀態碼。

3xx（重定向）要完成請求，須要進一步操做。一般，這些狀態碼用來重定向。

4xx（請求錯誤）這些狀態碼錶示請求可能出錯，妨礙了服務器的處理。

5xx（服務器錯誤）這些狀態碼錶示服務器在處理請求時發生內部錯誤。這些錯誤多是服務器自己的錯誤，而不是請求出錯。

 

200（成功）服務器已成功處理了請求。一般，這表示服務器提供了請求的網頁。

304（未修改）自從上次請求後，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容。

403（禁止）服務器拒絕請求。

404（未找到）服務器找不到請求的網頁。例如，對於服務器上不存在的網頁常常會返回此代碼。

502（錯誤網關）服務器做爲網關或代理，從上游服務器收到無效響應。

503（服務不可用）服務器目前沒法使用（因爲超載或停機維護）。一般，這只是暫時狀態。

二、如何阻止H5頁面Body的滑動

監聽事件 event.preventDefault() 

三、簡單介紹一下vue生命週期

雖說是簡單，此處越詳細越好。參考：Vue生命週期簡介

四、webpack初始化項目，通常會生成哪些目錄文件，分別是幹什麼用的 ？

node_modules 用來存放咱們經過npm命令安裝的軟件。

package.json 文件記錄該項目的元信息，以及一些依賴包信息。

五、跨域請求如何傳遞cookie

請求頭部設置 withCredentials: true ，服務端響應設置  Access-Control-Allow-Credentials:true

六、前端能夠作哪些清楚瀏覽器緩存的優化

變動資源文件名；瀏覽器清緩存前端html meta方法 no-cache 設置；ajax請求頭設置

七、js如何判斷一個object 對象爲空

一、JSON.stringify(a) === '{}'  二、Object.keys(a).length === 0

八、JS中淺拷貝與深拷貝的區別是什麼？如何實現深拷貝？

es6 擴展運算符 三個點 ... 

九、你有哪些性能優化的方法

1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數。

3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

4） 當須要設置的樣式不少時設置className而不是直接操做style。

5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

6） 避免使用CSS Expression（css表達式）又稱Dynamic properties（動態屬性）。

7） 圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳。

3、筆試

一、題目一：

var x = '0';

console.log(typeof x);

var y = 1;

console.log(typeof y);

var a = undefined;

console.log(typeof a);

var b = null;

console.log(typeof b);

var c = new Object();

console.log(typeof c);

 

var d = [1, 2, 3];

console.log(typeof d);

 

var e = function () { }

console.log(typeof e);

var f = Symbol ()

console.log(typeof f);

 

請寫出以上代碼執行後的輸出內容。

解答一：

var x = '0';

console.log(typeof x);//string

 

var y = 1;

console.log(typeof y);//number

 

var a = undefined;

console.log(typeof a);//undefined

 

var b = null;

console.log(typeof b);//object，（null是空對象引用/或者說指針）。

 

var c = new Object();

console.log(typeof c);//object

 

var d = [1, 2, 3];

console.log(typeof d);//object

 

var e = function () {}

console.log(typeof e);//function

 

 

var f = Symbol ()

console.log(typeof f);//symbol

二、題目二：

var objA = { data: { a: "hello", b: 123 } };

var objB = Object.assign({}, objA);

 

objB.data.a = "changed";

console.log(objA.data.a); 

 

var objA = { a: "hello", b: 123 };

var objB = Object.assign({}, objA);

 

objB.a = "changed";

console.log(objA.a);

解答二：

var objA = { data: { a: "hello", b: 123 } };

var objB = Object.assign({}, objA);

 

objB.data.a = "changed";

console.log(objA.data.a); // "changed" 

 

var objA = { a: "hello", b: 123 };

var objB = Object.assign({}, objA);

 

objB.a = "changed";

console.log(objA.a); // "hello"

 

注：Object.assign是ES6的新函數。Object.assign() 方法能夠把任意多個的源對象自身的可枚舉屬性拷貝給目標對象，而後返回目標對象。可是 Object.assign() 進行的是淺拷貝，拷貝的是對象的屬性的引用，而不是對象自己。對象結構爲一層時，assign函數能夠作到深拷貝。

三、題目三：

var a = [ {'a':1}, {'b':2}, {'c':3} ]

// todo:聲明一個變量b用於深拷貝數組b

 b[0].a = 0

 console.log(a[0].a) // 輸出 1

 解答三：

// 方法1

var b = []

for (var i =0; i<a.length; i++) {

      b[i] = {...a[i]}

}

 

// 方法2

var b = JSON.parse(JSON.stringify(a))

// 解讀：

// 數組與對象都屬於引用數據類型，string類型爲基本數據類型

// 經過賦值操做，引用數據類型僅拷貝指針，而基本數據類型能夠按值傳遞

// 因此此處爲避免層層遍歷以擴展運算符（...)進行深拷貝的方式

// 咱們能夠先將引用類型轉爲基本類型，再轉回引用類型

四、題目四：

// 實現一個深度優先搜索算法（非遞歸）

function dfs(tree, name) {

      // 請在這裏實現

}

 

var tree = {

      name: '中國',

      children: [{

            name: '上海',

            children: [{

                  name: '黃埔區' 

             },{

                  name: '徐彙區'

            },{

                  name: '松江區'

             }]

      },{

            name: '浙江省',

            children: [{

                  name: '杭州市',

                  code: 0571,

            },{

                  name: '湖州市',

                  code: 0572,

            },{

                  name: '嘉興市',

                  code: 0573

             },{

                  name: '寧波市',

                  code: 0574

             },{

                  name: '紹興市',

                  code: 0575

             }]

      }]

};

 

var node = dfs(tree, '杭州市');

console.log(node); // { name: '杭州市', code: 0571 }

解答四：

function dfs(tree, name) {

      if (tree.name === name) {

            return tree;

      }

      if (!tree.children) {

            return null;

      }

      for (var i = 0; i < tree.children.length; i++) {

            var rs = dfs(tree.children[i], name);

            if (rs) {

                  return rs;

            }

      }

      return null;

}