摘要：箭頭函數與傳統函數的區別，主要集中在以下方面沒有和綁定，這些值由最近一層非箭頭函數決定。不能通過關鍵字調用，所以不能用作構造函數，否則程序會拋出錯誤。聲明的全局變量不是全局對象的屬性。

本文首發于我的博客：http://blog.dunizb.com
原文鏈接：http://blog.dunizb.com/2017/09/08/interview-questions-2017/
轉載聲明
最近發現有人和網站盜用我的文章，有的轉載卻自己標為原創，沒有明確顯示原文作者、原文出處及原文鏈接。我的網絡ID是：Dunizb。請自覺遵守網絡文章轉載規范以及開源協議。

想知道自己什么水平就出去面試，拋磚引玉，詳細答案還需要自己去補充....

更新記錄

2019-07-28更新：修改第13題RESTful API的答案

2018-06-12更新：修改第1題答案

2017-10-19更新：修改22題深淺拷貝的答案

2017-10-18更新：修正部分題目答案，答案并非十分準確，僅供參考，此文部分題目答案故意省掉了一些高精尖、新奇特的東西，比如創建對象我寫了三種，《JS高程》上可不止三種，一切以常用記得住的為宗旨，所以，對于部分答案有疑問的同學，可以留言討論或自行斟酌

2017-10-12更新：有部分題目屬于后端范疇，或者是大前端范疇，因為我以前做Java后端的（關于我），故偶爾會遇到后端相關的一些問題，但是沒有遇到問純Java技術問題。如果你對某些后端題目不理解就直接跳過吧。

金九銀十，在九月之前把工作落實了，經歷了好幾個公司的面試，得到一些信息，和大家分享：

大部分公司（創業公司）都趨向于招一個牛逼的前端而不是三四個平庸的前端

性能優化、ES6必問

招聘要求上清一色的要求有一門后端語言的經驗

招聘要求寫的和面試相關性并不是很高

以下是我整理我面試遇到的一些我覺得具有代表性的題目，剛好30題，吐血獻上！

前端安全問題主要有XSS、CSRF攻擊
XSS：跨站腳本攻擊
它允許用戶將惡意代碼植入到提供給其他用戶使用的頁面中，可以簡單的理解為一種javascript代碼注入。
XSS的防御措施：

過濾轉義輸入輸出

避免使用eval、new Function等執行字符串的方法，除非確定字符串和用戶輸入無關

使用cookie的httpOnly屬性，加上了這個屬性的cookie字段，js是無法進行讀寫的

使用innerHTML、document.write的時候，如果數據是用戶輸入的，那么需要對象關鍵字符進行過濾與轉義

CSRF：跨站請求偽造
其實就是網站中的一些提交行為，被黑客利用，在你訪問黑客的網站的時候進行操作，會被操作到其他網站上
CSRF防御措施：

檢測http referer是否是同域名

避免登錄的session長時間存儲在客戶端中

關鍵請求使用驗證碼或者token機制

其他的一些攻擊方法還有HTTP劫持、界面操作劫持

當要求動態上下文的時候，你就不能使用箭頭函數，比如：定義方法，用構造器創建對象，處理時間時用 this 獲取目標。

箭頭函數與傳統函數的區別，主要集中在以下方面：

沒有this、super、arguments 和 new.target 綁定，這些值由最近一層非箭頭函數決定。

不能通過 new 關鍵字調用，所以不能用作構造函數，否則程序會拋出錯誤（SyntaxError）。

沒有原型。由于不可以通過new 關鍵字調用箭頭函數，因而沒有構建原型的需求，所以箭頭函數不存在 prototype 這個屬性。

不可以改變 this 的綁定，函數內部的 this 值不可以被改變，在函數的生命周期內始終保持一致。

不支持 arguments 對象，所以你必須通過命名參數和不定參數這兩種形式訪問函數的參數。

不支持重復的命名參數，無論在嚴格還是非嚴格模式下都不支持，而在傳統的函數規定中只有在嚴格模式下才不能有重復的命名參數。

loaders是你用在app源碼上的轉換元件。他們是用node.js運行的，把源文件作為參數，返回新的資源的函數。

let
let是更完美的var

let聲明的變量擁有塊級作用域,let聲明仍然保留了提升的特性，但不會盲目提升。

let聲明的全局變量不是全局對象的屬性。不可以通過window.變量名的方式訪問

形如for (let x…)的循環在每次迭代時都為x創建新的綁定

let聲明的變量直到控制流到達該變量被定義的代碼行時才會被裝載，所以在到達之前使用該變量會觸發錯誤。

const
定義常量值，不可以重新賦值，但是如果值是一個對象，可以改變對象里的屬性值

const OBJ = {"a":1, "b":2};
OBJ.a = 3;
OBJ = {};// 重新賦值，報錯！
console.log(OBJ.a); // 3

設置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content，二IE模型包括border和padding

box-sizing屬性可以為三個值之一：

content-box，默認值，border和padding不計算入width之內

padding-box，padding計算入width內

border-box，border和padding計算入width之內

如果代碼寫的語義化，有利于SEO。搜索引擎就會很容易的讀懂該網頁要表達的意思。例如文本模塊要有大標題，合理利用h1-h6，列表形式的代碼使用ul或ol，重要的文字使用strong等等。總之就是要充分利用各種HTML標簽完成他們本職的工作

git branch |grep "branchName" |xargs git branch -D,從分支列表中匹配到指定分支，然后一個一個(分成小塊)傳遞給刪除分支的命令，最后進行刪除。(參考這里)

第一種方式，字面量

var o1 = {name: "o1"}

第二種方式，通過構造函數

var o2 = new Object({name: "o2"})
var M = function(name){ this.name = name }
var o3 = new M("o3")

第三種方式，Object.create

var  p = {name: "p"}
var o4 = Object.create(p)

新創建的對o4的原型就是p，同時o4也擁有了屬性name

借用構造函數實現繼承

function Parent1(){
    this.name = "parent1"
}
function Child1(){
    Parent1.call(this);
    this.type = "child1";
}

缺點：Child1無法繼承Parent1的原型對象，并沒有真正的實現繼承（部分繼承）

借用原型鏈實現繼承

function Parent2(){
    this.name = "parent2";
    this.play = [1,2,3];
}
function Child2(){
    this.type = "child2";
}
Child2.prototype = new Parent2();

缺點：原型對象的屬性是共享的

組合式繼承

function Parent3(){
    this.name = "parent3";
    this.play = [1,2,3];
}
function Child3(){
    Parent3.call(this);
    this.type = "child3";
}
Child3.prototype = Object.create(Parent3.prototype);
Child3.prototype.constructor = Child3;

1.創建了一個新對象
2.將新創建的空對象的隱式原型指向其構造函數的顯示原型。
3.將this指向這個新對象
4.如果無返回值或者返回一個非對象值，則將新對象返回；如果返回值是一個新對象的話那么直接直接返回該對象。
參考《JS高程》6.2.2

雪碧圖，移動端響應式圖片，靜態資源CDN，減少Dom操作（事件代理、fragment），壓縮JS和CSS、HTML等，DNS預解析

首先來看一張圖：

HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree

把DOM Tree和CSS Rule Tree經過整合生成Render Tree（布局階段）

元素按照算出來的規則，把元素放到它該出現的位置，通過顯卡畫到屏幕上

更多詳情看這里

什么是路由？簡單的說，路由是根據不同的 url 地址展示不同的內容或頁面

使用場景？前端路由更多用在單頁應用上, 也就是SPA, 因為單頁應用, 基本上都是前后端分離的, 后端自然也就不會給前端提供路由。

前端的路由和后端的路由在實現技術上不一樣，但是原理都是一樣的。在 HTML5 的 history API 出現之前，前端的路由都是通過 hash 來實現的，hash 能兼容低版本的瀏覽器。

兩種實現前端路由的方式
HTML5 History兩個新增的API：history.pushState 和 history.replaceState，兩個 API 都會操作瀏覽器的歷史記錄，而不會引起頁面的刷新。

Hash就是url 中看到 # ,我們需要一個根據監聽哈希變化觸發的事件( hashchange) 事件。我們用 window.location 處理哈希的改變時不會重新渲染頁面，而是當作新頁面加到歷史記錄中，這樣我們跳轉頁面就可以在 hashchange 事件中注冊 ajax 從而改變頁面內容。

優點
從性能和用戶體驗的層面來比較的話，后端路由每次訪問一個新頁面的時候都要向服務器發送請求，然后服務器再響應請求，這個過程肯定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已，沒有了網絡延遲，對于用戶體驗來說會有相當大的提升。

更多內容請看這里

缺點
使用瀏覽器的前進，后退鍵的時候會重新發送請求，沒有合理地利用緩存。

RESTful API是指符合REST設計風格的Web API，為了使的接口安全、易用、可維護以及可擴張，一般設計RESTful API需要考慮以下幾個方面：

通信用HTTPS安全協議

在URL中加入版本號

URL中的路徑不能有動詞，只能用名詞

用HTTP方法對資源進行增刪改查的操作

用HTTP狀態嗎傳達執行結果和失敗原因

為集合提供過濾、排序、分頁功能

用查詢字符串或HTTP首部Accpet進行內容協商，指定返回結果的數據格式

及時更新文檔，每個接口都有對應的說明

defer是在HTML解析完之后才會執行，如果是多個，按照加載的順序依次執行
async是在加載完成后立即執行，如果是多個，執行順序和加載順序無關

什么是同源策略？
限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。
一個源指的是主機名、協議和端口號的組合，必須相同

跨域通信的幾種方式

JSONP

Hash

postMessage

WebSocket

CORS

JSONP原理
基本原理：利用script標簽的異步加載特性實現
給服務端傳一個回調函數，服務器返回一個傳遞過去的回調函數名稱的JS代碼

更多請查看：《前后端通信類知識》

域表示的就是范圍，即作用域，就是一個名字在什么地方可以使用，什么時候不能使用。
簡單的說，作用域是針對變量的，比如我們創建一個函數 a1，函數里面又包了一個子函數 a2。

// 全局作用域
functiona a1() {
    // a1作用域
    function a2() {
        // a2作用域
    }
}

此時就存 在三個作用域:全局作用域，a1 作用域，a2 作用域；即全局作用域包含了 a1 的作用域，a2 的作用域包含了 a1 的作用域。

當 a2 在查找變量的時候會先從自身的作用域區查找，找不到再到上一級 a1 的作用域查找，如果還沒找到就到全局作用域區查找，這樣就形成了一個作用域鏈。

什么是閉包？
當一個內部函數被其外部函數之外的變量引用時，就形成了一個閉包。

簡單的來說，所謂的閉包就是一個具有封閉的對外不公開的，包裹結構或空間。

為什么函數可以構成閉包？
閉包就是一個具有封閉與包裹功能的結構，是為了實現具有私有訪問空間的函數的。函數可以構成閉包。函數內部定義的數據函數外部無法訪問，即函數具有封閉性；函數可以封裝代碼即具有包裹性，所以函數可以構成閉包。

閉包的作用，就是保存自己私有的變量，通過提供的接口(方法)給外部使用，但外部不能直接訪問該變量。

當我們需要在模塊中定義一些變量，并希望這些變量一直保存在內存中但又不會“污染”全局的變量時，就可以用閉包來定義這個模塊。

閉包的缺點：閉包的缺點就是常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。

函數套函數就是閉包嗎？：不是！，當一個內部函數被其外部函數之外的變量引用時，才會形成了一個閉包。

對象模式
函數內部定義個一個對象，對象中綁定多個函數（方法），返回對象，利用對象的方法訪問函數內的數據

function createPerson() {
    var __name__ = "";
    return {
        getName: function () {
            return __name__;
        },
        setName: function( value ) {
            // 如果不姓張就報錯
            if ( value.charAt(0) === "張" ) {
                __name__ = value;
            } else {
                throw new Error( "姓氏不對，不能取名" );
            }
        }
    }
}
var p = createPerson();
p.set_Name( "張三豐" );
console.log( p.get_Name() );
p.set_Name( "張王富貴" );
console.log( p.get_Name() );

函數模式
函數內部定義一個新函數，返回新函數，用新函數獲得函數內的數據

function foo() {
    var num = Math.random();
    function func() {
        return mun;
    }
    return func;
}
var f = foo();
// f 可以直接訪問這個 num
var res1 = f();
var res2 = f();

沙箱模式
沙箱模式就是一個自調用函數，代碼寫到函數中一樣會執行，但是不會與外界有任何的影響，比如jQuery

(function () {
   var jQuery = function () { // 所有的算法 }
   // .... // .... jQuery.each = function () {}
   window.jQuery = window.$ = jQuery;
})();
$.each( ... )

原型是什么
原型就是一個普通的對象，每個對象都有一個原型（Object除外），原型能存儲我們的方法，構造函數創建出來的實例對象能夠引用原型中的方法。

查看原型
以前一般使用對象的__proto__屬性，ES6推出后，推薦用Object.getPrototypeOf()方法來獲取對象的原型

什么是原型鏈？
凡是對象就有原型，那么原型又是對象，因此凡是給定一個對象，那么就可以找到他的原型，原型還有原型，那么如此下去，就構成一個對象的序列，稱該結構為原型鏈。

更多內容請看這里

前端錯誤的分類

即時運行錯誤（代碼錯誤）

資源加載錯誤

錯誤的捕獲方式
即時運行錯誤的捕獲方式：

try...catch

window.onerror

資源加載錯誤：

object.onerror（如img,script）

performance.getEntries()

Error事件捕獲

延伸：跨域的js運行錯誤可以捕獲嗎，錯誤提示什么，應該怎么處理？
可以。
Script error
1.在script標簽增加crossorigin屬性
  2.設置js資源響應頭Access-Control-Allow-Orgin:*

上報錯誤的基本原理
采用Ajax通信方式上報
利用Image對象上報

DOM事件的級別

DOM0，element.onclick = function(){}

DOM2，element.addEventListener("click", function(){}, false);

DOM事件模型是什么：指的是冒泡和捕獲
DOM事件流是什么：捕獲階段 -> 目標階段 -> 冒泡階段
描述DOM事件捕獲的具體流程
window --> document --> documentElement(html標簽) --> body --> .... --> 目標對象
Event對象常見應用

event.preventDefault()，阻止默認行為

event.stopPropagation()，阻止事件冒泡

event.stopImmediatePropagation()，阻止剩余的事件處理函數執行并且防止事件冒泡到DOM樹上，這個方法不接受任何參數。

event.currentTarget，返回綁定事件的元素

event.target，返回觸發事件的元素

如何自定義事件
Event，不能傳遞參數

var eve = new Event("自定義事件名");
ev.addEventListener("自定義事件名", function(){
    console.log("自定義事件")
});
ev.dispatchEvent(eve);

CustomEvent，還可以指定參數

你沒有公網IP當然就不能被外網訪問了。常見的WIFI情況下，一般的ip會是~192.168.0.x·這樣的，只是對局域網(同WIFI下)可見，但是外網是訪問不了的。（segmentfault上的答案）

參考《如何寫出高性能DOM？》

參考：《JavaScript數組去重》

是什么
淺拷貝只復制指向某個對象的指針，而不復制對象本身，新舊對象還是共享同一塊內存（內存區域沒有隔離）。但深拷貝會另外創造一個一模一樣的對象，新對象跟原對象不共享內存（內存區域隔離），修改新對象不會改到原對象。在多層對象上，淺拷貝只拷貝一層
淺拷貝舉例

var Chinese = {
　　nation:"中國"
};
var Doctor ={
　　career:"醫生"
}
function extendCopy(p) {
　　var c = {};
　　for (var i in p) { 
　　　　c[i] = p[i];
　　}
　　return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = "醫生";
alert(Doctor.nation); // 中國

深拷貝舉例

function deepCopy(p, c) {
　 var c = c || {};
　 for (var i in p) {
　　　　if (typeof p[i] === "object") {
　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　deepCopy(p[i], c[i]);
　　　　} else {
　　　　　　c[i] = p[i];
　　　　}
　 }
　 return c;
}

參考文章：阮一峰：Javascript面向對象編程（三）：非構造函數的繼承

深拷貝實現方式

手動復制方式，如上面的代碼，缺點就是

Object.assign，ES6 的新函數，可以幫助我們達成跟上面一樣的功能。

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = Object.assign({}, obj1);
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

轉成 JSON 再轉回來

用JSON.stringify把對象轉成字符串，再用JSON.parse把字符串轉成新的對象。
缺點：只有可以轉成JSON格式的對象才可以這樣用，像function沒辦法轉成JSON。

jquery，有提供一個$.extend可以用來做 Deep Copy。

lodash，也有提供_.cloneDeep用來做 Deep Copy。

遞歸實現深拷貝

function clone( o ) {
    var temp = {};
    for( var k in o ) {
        if( typeof o[ k ] == "object" ){
             temp[ k ] = clone( o[ k ] );
        } else {
             temp[ k ] = o[ k ];
        }
    }
    return temp;
}

參考文章：關于 JS 中的淺拷貝和深拷貝,進擊JavaScript之（四）玩轉遞歸與數列

Gulp：gulp-css-spriter

webpack：optimize-css-assets-webpack-plugin

Go！Png

在線工具

減少HTTP請求
HTML優化：

使用語義化標簽

減少iframe：iframe是SEO的大忌，iframe有好處也有弊端

避免重定向

CSS優化：

布局代碼寫前面

刪除空樣式

不濫用浮動，字體，需要加載的網絡字體根據網站需求再添加

選擇器性能優化

避免使用表達式，避免用id寫樣式

js優化：

壓縮

減少重復代碼

圖片優化：

使用WebP

圖片合并，CSS sprite技術

減少DOM操作

緩存已經訪問過的元素

"離線"更新節點, 再將它們添加到樹中

避免使用 JavaScript 輸出頁面布局--應該是 CSS 的事兒

使用JSON格式來進行數據交換
使用CDN加速
使用HTTP緩存：添加 Expires 或 Cache-Control 信息頭
使用DNS預解析
Chrome內置了DNS Prefetching技術, Firefox 3.5 也引入了這一特性，由于Chrome和Firefox 3.5本身對DNS預解析做了相應優化設置，所以設置DNS預解析的不良影響之一就是可能會降低Google Chrome瀏覽器及火狐Firefox 3.5瀏覽器的用戶體驗。
預解析的實現：

用meta信息來告知瀏覽器, 當前頁面要做DNS預解析:

在頁面header中使用link標簽來強制對DNS預解析:

瀏覽器將自己支持的一套加密規則發送給服務器。

服務器從中選出一組加密算法與HASH算法，并將自己的身份信息以證書的形式發回給瀏覽器。證書里面包含了網站地址，加密公鑰，以及證書的頒發機構等信息。

瀏覽器獲得網站證書之后瀏覽器要做以下工作：

驗證證書的合法

如果證書受信任，或者是用戶接受了不受信的證書，瀏覽器會生成一串隨機數的密碼，并用證書中提供的公鑰加密。

使用約定好的HASH算法計算握手消息，并使用生成的隨機數對消息進行加密，最后將之前生成的所有信息發送給服務器

網站接收瀏覽器發來的數據之后要做以下的操作：

使用自己的私鑰將信息解密取出密碼，使用密碼解密瀏覽器發來的握手消息，并驗證HASH是否與瀏覽器發來的一致。

使用密碼加密一段握手消息，發送給瀏覽器。

瀏覽器解密并計算握手消息的HASH，如果與服務端發來的HASH一致，此時握手過程結束，之后所有的通信數據將由之前瀏覽器生成的隨機密碼并利用對稱加密算法進行加密。

參考文章：《HTTPS 工作原理和 TCP 握手機制》

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有 Block-level box 參 與， 它規定了內部的 Block-level Box 如何布局，并且與這個區域外部毫不相干。

BFC的渲染特點

BFC這個元素的垂直方向的邊距會發生重疊，垂直方向的距離由margin決定，取最大值

BFC的區域不會與浮動元素的box重疊（清除浮動原理）

計算BFC的高度的時候，浮動元素也會參與計算

哪些元素會生成 BFC

BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

根元素

overflow不為visible

float不為none

position為absolute或fixed

display為inline-block、table-cell、table-caption、flex、inline-flex

BFC的使用場景

他的很常用的一個應用場景就是解決邊距重疊、清楚浮動的問題.

1.JS或者服務端硬編碼，resize事件，判斷屏幕大小加載不同的圖片
2.img srcset 方法
3.picture標簽 -> source
4.svg
5.第三方庫polyfill

var a = []; 
// 1.基于instanceof 
a instanceof Array; 
// 2.基于constructor 
a.constructor === Array; 
// 3.基于Object.prototype.isPrototypeOf 
Array.prototype.isPrototypeOf(a); 
// 4.基于getPrototypeOf 
Object.getPrototypeOf(a) === Array.prototype; 
// 5.基于Object.prototype.toString 
Object.prototype.toString.apply(a) === "[object Array]";
// 6.Array.isArray
Array.isArray([]); // true

以上，除了Object.prototype.toString外，其它方法都不能正確判斷變量的類型。

UTF-8就是在互聯網上使用最廣的一種unicode的實現方式。
Unicode的出現是為了統一地區性文字編碼方案，為解決unicode如何在網絡上傳輸的問題，于是面向傳輸的眾多 UTF（UCS Transfer Format）標準出現了，顧名思義，UTF-8就是每次8個位傳輸數據，而UTF-16就是每次16個位。
ASCII --> 地區性編碼（GBK） --> Unicode --> UTF-8
知乎參考回答

參考
慕課網實戰課程《前端跳槽面試必備技巧》