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

過濾轉(zhuǎn)義輸入輸出

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

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

使用innerHTML、document.write的時候，如果數(shù)據(jù)是用戶輸入的，那么需要對象關(guān)鍵字符進行過濾與轉(zhuǎn)義

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

檢測http referer是否是同域名

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

關(guān)鍵請求使用驗證碼或者token機制

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

當要求動態(tài)上下文的時候，你就不能使用箭頭函數(shù)，比如：定義方法，用構(gòu)造器創(chuàng)建對象，處理時間時用 this 獲取目標。

箭頭函數(shù)與傳統(tǒng)函數(shù)的區(qū)別，主要集中在以下方面：

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

不能通過 new 關(guān)鍵字調(diào)用，所以不能用作構(gòu)造函數(shù)，否則程序會拋出錯誤（SyntaxError）。

沒有原型。由于不可以通過new 關(guān)鍵字調(diào)用箭頭函數(shù)，因而沒有構(gòu)建原型的需求，所以箭頭函數(shù)不存在 prototype 這個屬性。

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

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

不支持重復(fù)的命名參數(shù)，無論在嚴格還是非嚴格模式下都不支持，而在傳統(tǒng)的函數(shù)規(guī)定中只有在嚴格模式下才不能有重復(fù)的命名參數(shù)。

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

let
let是更完美的var

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

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

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

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

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

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

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

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

content-box，默認值，border和padding不計算入width之內(nèi)

padding-box，padding計算入width內(nèi)

border-box，border和padding計算入width之內(nèi)

如果代碼寫的語義化，有利于SEO。搜索引擎就會很容易的讀懂該網(wǎng)頁要表達的意思。例如文本模塊要有大標題，合理利用h1-h6，列表形式的代碼使用ul或ol，重要的文字使用strong等等?？傊褪且浞掷酶鞣NHTML標簽完成他們本職的工作

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

第一種方式，字面量

var o1 = {name: "o1"}

第二種方式，通過構(gòu)造函數(shù)

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)

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

借用構(gòu)造函數(shù)實現(xiàn)繼承

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

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

借用原型鏈實現(xiàn)繼承

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.創(chuàng)建了一個新對象
2.將新創(chuàng)建的空對象的隱式原型指向其構(gòu)造函數(shù)的顯示原型。
3.將this指向這個新對象
4.如果無返回值或者返回一個非對象值，則將新對象返回；如果返回值是一個新對象的話那么直接直接返回該對象。
參考《JS高程》6.2.2

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

首先來看一張圖：

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

把DOM Tree和CSS Rule Tree經(jīng)過整合生成Render Tree（布局階段）

元素按照算出來的規(guī)則，把元素放到它該出現(xiàn)的位置，通過顯卡畫到屏幕上

更多詳情看這里

什么是路由？簡單的說，路由是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁面

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

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

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

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

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

更多內(nèi)容請看這里

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

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

通信用HTTPS安全協(xié)議

在URL中加入版本號

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

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

用HTTP狀態(tài)嗎傳達執(zhí)行結(jié)果和失敗原因

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

用查詢字符串或HTTP首部Accpet進行內(nèi)容協(xié)商，指定返回結(jié)果的數(shù)據(jù)格式

及時更新文檔，每個接口都有對應(yīng)的說明

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

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

跨域通信的幾種方式

JSONP

Hash

postMessage

WebSocket

CORS

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

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

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

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

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

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

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

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

為什么函數(shù)可以構(gòu)成閉包？
閉包就是一個具有封閉與包裹功能的結(jié)構(gòu)，是為了實現(xiàn)具有私有訪問空間的函數(shù)的。函數(shù)可以構(gòu)成閉包。函數(shù)內(nèi)部定義的數(shù)據(jù)函數(shù)外部無法訪問，即函數(shù)具有封閉性；函數(shù)可以封裝代碼即具有包裹性，所以函數(shù)可以構(gòu)成閉包。

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

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

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

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

對象模式
函數(shù)內(nèi)部定義個一個對象，對象中綁定多個函數(shù)（方法），返回對象，利用對象的方法訪問函數(shù)內(nèi)的數(shù)據(jù)

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() );

函數(shù)模式
函數(shù)內(nèi)部定義一個新函數(shù)，返回新函數(shù)，用新函數(shù)獲得函數(shù)內(nèi)的數(shù)據(jù)

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

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

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

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

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

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

更多內(nèi)容請看這里

前端錯誤的分類

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

資源加載錯誤

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

try...catch

window.onerror

資源加載錯誤：

object.onerror（如img,script）

performance.getEntries()

Error事件捕獲

延伸：跨域的js運行錯誤可以捕獲嗎，錯誤提示什么，應(yīng)該怎么處理？
可以。
Script error
1.在script標簽增加crossorigin屬性
  2.設(shè)置js資源響應(yīng)頭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對象常見應(yīng)用

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

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

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

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

event.target，返回觸發(fā)事件的元素

如何自定義事件
Event，不能傳遞參數(shù)

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

CustomEvent，還可以指定參數(shù)

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

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

參考：《JavaScript數(shù)組去重》

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

var Chinese = {
　　nation:"中國"
};
var Doctor ={
　　career:"醫(yī)生"
}
function extendCopy(p) {
　　var c = {};
　　for (var i in p) { 
　　　　c[i] = p[i];
　　}
　　return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = "醫(yī)生";
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面向?qū)ο缶幊蹋ㄈ悍菢?gòu)造函數(shù)的繼承

深拷貝實現(xiàn)方式

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

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

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 }

轉(zhuǎn)成 JSON 再轉(zhuǎn)回來

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

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

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

遞歸實現(xiàn)深拷貝

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;
}

參考文章：關(guān)于 JS 中的淺拷貝和深拷貝,進擊JavaScript之（四）玩轉(zhuǎn)遞歸與數(shù)列

Gulp：gulp-css-spriter

webpack：optimize-css-assets-webpack-plugin

Go！Png

在線工具

減少HTTP請求
HTML優(yōu)化：

使用語義化標簽

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

避免重定向

CSS優(yōu)化：

布局代碼寫前面

刪除空樣式

不濫用浮動，字體，需要加載的網(wǎng)絡(luò)字體根據(jù)網(wǎng)站需求再添加

選擇器性能優(yōu)化

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

js優(yōu)化：

壓縮

減少重復(fù)代碼

圖片優(yōu)化：

使用WebP

圖片合并，CSS sprite技術(shù)

減少DOM操作

緩存已經(jīng)訪問過的元素

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

避免使用 JavaScript 輸出頁面布局--應(yīng)該是 CSS 的事兒

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

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

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

瀏覽器將自己支持的一套加密規(guī)則發(fā)送給服務(wù)器。

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

瀏覽器獲得網(wǎng)站證書之后瀏覽器要做以下工作：

驗證證書的合法

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

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

網(wǎng)站接收瀏覽器發(fā)來的數(shù)據(jù)之后要做以下的操作：

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

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

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

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

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

BFC的渲染特點

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

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

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

哪些元素會生成 BFC

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

根元素

overflow不為visible

float不為none

position為absolute或fixed

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

BFC的使用場景

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

1.JS或者服務(wù)端硬編碼，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就是在互聯(lián)網(wǎng)上使用最廣的一種unicode的實現(xiàn)方式。
Unicode的出現(xiàn)是為了統(tǒng)一地區(qū)性文字編碼方案，為解決unicode如何在網(wǎng)絡(luò)上傳輸?shù)膯栴}，于是面向傳輸?shù)谋姸?UTF（UCS Transfer Format）標準出現(xiàn)了，顧名思義，UTF-8就是每次8個位傳輸數(shù)據(jù)，而UTF-16就是每次16個位。
ASCII --> 地區(qū)性編碼（GBK） --> Unicode --> UTF-8
知乎參考回答

參考
慕課網(wǎng)實戰(zhàn)課程《前端跳槽面試必備技巧》