摘要：原理對處理函數進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。在目標發出內容改變的事件后，直接接收事件并作出響應。首先是目標的構造函數，他有個數組，用于添加觀察者。

js中sort函數的底層實現機制？

js中sort內置多種排序算法，是根據要排序數的亂序程度來決定使用哪一種排序方法。V8 引擎 sort 函數只給出了兩種排序 InsertionSort 和 QuickSort，長度小于20的使用InsertionSort(插入排序)，大于20的數組則使用 QuickSort(快速排序)

快速排序

    function quickSort(arr){
        if(arr.length<=1){ //如果數組中只有一位數，返回數組
            return arr;
        }
        var mNumIndex = Math.floor(arr.length/2); //取基準值的下標
        var mNum = arr.splice(mNumIndex,1)[0];  //取基準值
        var left = [];  //左邊數組
        var right = []; //右邊數組
        for(var i=0;i
插入排序
function insertSort(arr) {
  let length = arr.length;
  for(let i = 1; i < length; i++) {
    let temp = arr[i];
    for(let j = i; j > 0; j--) {
      if(arr[j] >= arr[j-1]) {
        break;      // 當前考察的數大于前一個數，證明有序，退出循環
      }
      arr[j] = arr[j-1]; // 將前一個數復制到后一個數上
    }
    arr[j] = temp;  // 找到考察的數應處于的位置
  }
  return arr;
}
選擇排序（實現思路跟冒泡排序差不多， 可以說是冒泡排序的衍生版本）
    function selectionSort(arr) {
      var len = arr.length
      var minIndex, temp
      for (i = 0; i < len - 1; i++) {
        minIndex = i
        for (j = i + 1; j < len; j++) {
          if (arr[j] < arr[minIndex]) {
            minIndex = j
          }
        }
        temp = arr[i]
        arr[i] = arr[minIndex]
        arr[minIndex] = temp
      }
      return arr
    }
數組去重
ES6
    function unique(arr) {
      return Array.from(new Set(arr))
    }
    new Set本身是一個構造函數，用來生成Set數據結構,類數組，成員的值都是唯一的，
    沒有重復的值。
    Array.from()將一個類數組對象或者可遍歷對象轉換成一個真正的數組。
ES5
    function unique(arr) {
      var newArr = []
      for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
          newArr.push(arr[i])
        }
      }
     return newArr
   }
    var result = [];    
    var obj = {};    
    for(var i =0; i
如何統計網頁里出現多少種html標簽
ES5
    var doms = document.getElementsByTagName("*")
    var obj = {}
    var ret = []
    for (let i = 0; i < doms.length; i++) {
      var name = doms[i].nodeName
      if(!obj[name]){
        ret.push(name)
        obj[name] = true
      }
    }
    console.log(ret.length)
ES6
   let names = [...document.getElementsByTagName("*")].map(v=>v.nodeName)
   console.log(new Set(names).size)
獲取dom下的所有節點
    function getDom(dom) {
      var list = []
      var domChildren = dom.childNodes
      for (var i = 0; i < domChildren.length; i++) {
        // nodeType === 1 是元素節點，2是屬性節點。
        if (domChildren[i].nodeType === 1) {
          list.push(domChildren[i])
          var retArr = getDom(domChildren[i])
          list = list.concat(retArr)
        }
      }
      return list
    }
    getDom(document.querySelector("body"))
實現bind方法：
Function.prototype.bind= function(obj){
    var _self = this, args = arguments;
    return function() {
        _self.apply(obj, Array.prototype.slice.call(args, 1));
    }
}

防抖功能函數，接受傳參
定義：多次觸發事件后，事件處理函數只執行一次，并且是在觸發操作結束時執行。

原理：對處理函數進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。
    function debounce(fn) {
      // 4、創建一個標記用來存放定時器的返回值
      let timeout = null;
      return function() {
        // 5、每次當用戶點擊/輸入的時候，把前一個定時器清除
        clearTimeout(timeout);
        // 6、然后創建一個新的 setTimeout，
        // 這樣就能保證點擊按鈕后的 interval 間隔內
        // 如果用戶還點擊了的話，就不會執行 fn 函數
        var args = arguments;
        timeout = setTimeout(() => {
          fn.apply(this, args);
        }, 1000);
      };
    }
    sayDebounce(){
     console.log("防抖成功！");
    }
    btn.addEventListener("click", debounce(sayDebounce));
    
函數節流
定義：觸發函數事件后，短時間間隔內無法連續調用，只有上一次函數執行后，過了規定的時間間隔，才能進行下一次的函數調用。
原理：對處理函數進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。
JavaScript中常用的設計模式
詳細鏈接: https://juejin.im/post/5afe64...
1.單例模式
特點:一個類只能構造出唯一實例 
案例:創建菜單對象或者彈出框
const singleton = function(name) {
  this.name = name
  this.instance = null
}

singleton.prototype.getName = function() {
  console.log(this.name)
}

singleton.getInstance = function(name) {
  if (!this.instance) { // 關鍵語句
    this.instance = new singleton(name)
  }
  return this.instance
}

// test
const a = singleton.getInstance("a") // 通過 getInstance 來獲取實例
const b = singleton.getInstance("b")
console.log(a === b)
2.工廠模式
創建一個對象常常需要復雜的過程，所以不適合在一個復雜的對象中。創建對象可能會導致大量的重復代碼，也可能提供不了足夠級別的抽象。工廠方法模式通過定義一個多帶帶的創建對象的方法來解決這些問題，由子類實現這個方法來創建具體類型的對象。
function Animal(opts){
    var obj = new Object();
    obj.name = opts.name;
    obj.color = opts.color;
    obj.getInfo = function(){
        return "名稱："+obj.name +"， 顏色："+ obj.color;
    }
    return obj;
}
var cat = Animal({name: "波斯貓", color: "白色"});
cat.getInfo();
3. 訂閱/發布者模式
發布訂閱模式，基于一個主題/事件通道，希望接收通知的對象（稱為subscriber）通過自定義事件訂閱主題，被激活事件的對象（稱為publisher）通過發布主題事件的方式被通知。
就和用戶訂閱微信公眾號道理一樣，一個公眾號可以被多個用戶同時訂閱，當公眾號有新增內容時候，只要發布就好了，用戶就能接收到最新的內容
訂閱/發布者模式和觀察者模式的區別：
在觀察者模式中，觀察者需要直接訂閱目標事件。在目標發出內容改變的事件后，直接接收事件并作出響應。發布訂閱模式相比觀察者模式多了個事件通道，訂閱者和發布者不是直接關聯的。
1、Observer模式要求觀察者必須訂閱內容改變的事件，定義了一個一對多的依賴關系；
2、Publish/Subscribe模式使用了一個主題/事件通道，這個通道介于訂閱著與發布者之間；
3、觀察者模式里面觀察者「被迫」執行內容改變事件（subject內容事件）；發布/訂閱模式中，訂閱著可以自定義事件處理程序；
4、觀察者模式兩個對象之間有很強的依賴關系；發布/訂閱模式兩個對象之間的耦合讀底
      function Public(){
        //存放訂閱者信息
        this.subscribers = [];
        // 添加訂閱者
        this.addSubscriber = function(subscriber) {
          //保證一個訂閱者只能訂閱一次
          let flag = this.subscribers.some(function(item){
            return item == subscriber;
          })
          if(!flag){
            this.subscribers.push(subscriber);
          }
          return this;
        }
        // 發布消息
        this.publish = function(data) {
          let arr = arguments; 
          this.subscribers.forEach(function(fn){
            fn(...arr)
          })
          return this;
        }
      }
      let publisher = new Public() //初始化
      let fanfan = function(data){
        console.log(`訂閱者吳亦凡收到訂閱信息：${[...arguments]}`)
      }
      let luhan = function(data){
        console.log(`訂閱者鹿晗收到訂閱信息：${[...arguments]}`)
      }
      publisher.addSubscriber(fanfan).addSubscriber(luhan); // 添加訂閱者fanfan
      publisher.publish("NBA頭條快訊", "蔡徐坤簽約掘金");
3. 觀察者模式
一個或多個觀察者對目標的狀態感興趣，通過將自己依附在目標對象上以便注冊所感興趣的內容。目標狀態發生改變并且觀察者可能對這些改變感興趣，會發送一個通知消息，調用每個觀察者的更新方法。當觀察者不再對目標狀態感興趣時，他們可以簡單將自己從中分離。
首先是目標的構造函數，他有個數組，用于添加觀察者。還有個廣播方法，遍歷觀察者數組后調用他們的update方法：
class Subject{
  constructor(){
    this.subs = [];
  }
  addSub(sub){
    this.subs.push(sub);
  }
  notify(){
    this.subs.forEach(sub=> {
      sub.update();
    });
  }
}
那么觀察者就得有個update方法：
class Observer{
  update(){
    console.log("update");
  }
}
let subject = new Subject();
let ob = new Observer();
//目標添加觀察者了
subject.addSub(ob);
//目標發布消息調用觀察者的更新方法了
subject.notify();   //update
4. 策略模式
特征:根據不同參數可以命中不同的策略;
案例:動畫庫里的算法函數
5. 代理模式
特征:代理對象和本體對象具有一致的接口;
案例:圖片預加載
5. 迭代器模式
特征:能獲取聚合對象的順序和元素;
案例:each([1, 2, 3], cb);
5. 命令模式
特征:不同對象間約定好相應的接口;
案例:按鈕和命令的分離;
6. 組合模式
特征:組合模式在對象間形成一致對待的樹形結構;
案例: 掃描文件夾;
7. 組合模式
特征:組合模式在對象間形成一致對待的樹形結構;
案例: 掃描文件夾;
6. 組合模式
特征:組合模式在對象間形成一致對
列表項目
待的樹形結構;
案例: 掃描文件夾;
判斷數組
Object.prototype.toString.call(arr) === "[object Array]" ;
Array.isArray(arr);
arr.constructor === Array;

This的指向

全局范圍：指向winodow（嚴格模式下不存在全局變量，指向undedfiend）;
普通函數調用：指向window
對象方法調用：指向最后調用它的對象
構造函數調用：指向new出來的對象
顯示設置this： call apply 方法顯示將this指向第一個參數指明的對象
箭頭函數沒有prototype(原型)，所以箭頭函數本身沒有this, 箭頭函數的this指向在定義的時候繼承自外層第一個普通函數的this，跟使用位置沒有關系。被繼承的普通函數的this指向改變，箭頭函數的this指向會跟著改變,不能直接修改箭頭函數的this指向(call、aaply、bind)會默認忽略第一個參數，但是可以正常傳參。

什么是原型鏈？
創建一個函數就會為其創建一個prototype屬性，指向這個函數的原型對象，原型對象會自動獲得constructor屬性，指向prototype屬性所在函數。
Function.prototype.a = "a";   
Object.prototype.b = "b";   
function Person(){}   
console.log(Person);    //function Person()   
let p = new Person();   
console.log(p);         //Person {} 對象   
console.log(p.a);       //undefined   
console.log(p.b);       //b
p.__proto__ === Person.prototype；Person.prototype.constructor === Person;

new操作符具體干了什么呢?

創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。
屬性和方法被加入到 this 引用的對象中。
新創建的對象由 this 所引用，并且最后隱式的返回 this 。

頁面加載過程

瀏覽器根據 DNS 服務器得到域名的 IP 地址
向這個 IP 的機器發送 HTTP 請求
服務器收到、處理并返回 HTTP 請求
瀏覽器得到返回內容

Vue實現數據雙向綁定的原理：Object.defineProperty（）
vue實現數據雙向綁定主要是：采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
vue的數據雙向綁定 將MVVM作為數據綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的數據變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變更雙向綁定效果。

    

    
    




對vue的keep-alive 的了解
keep-alive是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優先級大于include) 。
Vue.js的template編譯的理解？
答：簡而言之，就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節點）
詳情步驟：
首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以創建編譯器的。另外compile還負責合并option。
然后，AST會經過generate（將AST語法樹轉化成render funtion字符串的過程）得到render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，里面有（標簽名、子節點、文本等等）
Vue.nextTick
在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
原理:事件循環機制(Event Loop)
以下事件屬于宏任務：
setInterval()
setTimeout()
以下事件屬于微任務
new Promise()
new MutaionObserver()

MutationObserver監聽DOM更新完畢的。
vue用異步隊列的方式來控制DOM更新和nextTick回調先后執行
microtask(微任務)因為其高優先級特性，能確保隊列中的微任務在一次事件循環前被執行完畢
因為兼容性問題，vue不得不做了microtask向macrotask(Promise)的降級方案

VUE的watch與computed的區別
觸發條件不同
1.computed計算屬性會依賴于使用它的data屬性，只要是依賴的data屬性值有變動，則自定義重新調用計算屬性執行一次。
2.watch則是在監控的data屬性值發生變動時，其會自動調用watch回調函數。
應用場景不同
1.執行異步操作，開銷較大的操作，避免堵塞主線程，使用watch。
2.簡單且串行返回的，使用computed
請解釋閉包
《JavaScript權威指南》中的概念：有權訪問另一個作用域中變量的函數
 閉包特性：可實現函數外訪問函數內變量，外層變量可以不被垃圾回收機制回收。
 缺點:

在閉包中使用this對象可能會導致一些問題，因為匿名函數的執行具有全局性，因此其this對象通常指window.
由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除.

function outer() {
  var a = 2;
  function inner() {
    console.log(a);
  }
  return inner;
}
var neal = outer();
neal();//2

JS數據類型
基礎類型:Undefined, Null, Boolean, Number, String, Symbol(ES6新增，表示獨一無二的值)）一共6種
引用類型:Object
JS中的基礎數據類型，這些值都有固定的大小，往往都保存在棧內存中（閉包除外），由系統自動分配存儲空間。我們可以直接操作保存在棧內存空間的值，因此基礎數據類型都是按值訪問 數據在棧內存中的存儲與使用方式類似于數據結構中的堆棧數據結構，遵循后進先出的原則。
JS的引用數據類型，比如數組Array，它們值的大小是不固定的。引用數據類型的值是保存在堆內存中的對象。JS不允許直接訪問堆內存中的位置，因此我們不能直接操作對象的堆內存空間。在操作對象時，實際上是在操作對象的引用而不是實際的對象。因此，引用類型的值都是按引用訪問的。這里的引用，我們可以粗淺地理解為保存在棧內存中的一個地址，該地址與堆內存的實際值相關聯。

數據結構：
數據結構就是關系，沒錯，就是數據元素相互之間存在的一種或多種特定關系的集合。
邏輯結構：是指數據對象中數據元素之間的相互關系，也是我們今后最需要關注和討論的問題。
物理結構：是指數據的邏輯結構在計算機中的存儲形式。
常見的數據結構：
數組，隊列（queue），堆（heap）,棧（stack），鏈表（linked list ），樹（tree），圖（graph）和散列表（hash）
參照：https://www.cnblogs.com/slly/...
棧:
一種遵循后進先出（LIFO）原則的有序集合。新添加的或待刪除的元素都保存在棧的同一端，稱作棧頂，另一端就叫棧底。在棧里，新元素都接近棧頂，舊元素都接近棧底。
隊列（queue）:
是只允許在一端進行插入操作，而在另一端進行刪除操作的線性表。與棧相反，隊列是一種先進先出（First In First Out, FIFO）的線性表。與棧相同的是，隊列也是一種重要的線性結構，實現一個隊列同樣需要順序表或鏈表作為基礎。
鏈表：
鏈表存儲有序的元素集合，但不同于數組，鏈表中的元素在內存中并不是連續放置的。每個元素由一個存儲元素本事的節點和一個指向下一個元素的引用組成。相對于傳統的數組，鏈表的一個好處在于，添加或者刪除元素的時候不需要移動其他元素。 使用鏈表結構可以克服數組需要預先知道數據大小的缺點(C語言的數組需要預先定義長度)，鏈表結構可以充分利用計算機內存空間，實現靈活的內存動態管理。 數組和鏈表的一個不同在于數組可以直接訪問任何位置的元素，而想要訪問鏈表中的一個元素，需要從起點開始迭代列表。
click在ios上有300ms延遲，原因及如何解決？
粗暴型，禁用縮放
  

利用FastClick，其原理是：
檢測到touchend事件后，立刻出發模擬click事件，并且把瀏覽器300毫秒之后真正出發的事件給阻斷掉
css盒模型
1.IE盒子模型(怪異盒子)box-sizing :border-box;
   寬度=margin+width
2.W3C標準盒模型box-sizing : content-box;
寬度=margin+border+padding+width

選擇器權重
!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符* > 繼承 > 瀏覽器默認屬性
有幾種方法清楚浮動
1. 父元素 overflow: hidden;
2.浮動元素后面的元素： clear: both;
3.偽元素選擇器:.clear::after{ content:’’;display:block; clear:both;};
4.父元素設置高度；
5.父級元素：display: table;

如何做水平垂直居中？
方案一：已知寬高，設置position: absolute;，然后left和top都設置為50%，再根據margin的負值來調正 
方案二：類似方案一，最后一步用transform:translate(-50%,-50%); 
方案三：絕對定位，top、bottom、left、right都設置為0，設置好寬高，然后margin: auto; 
方案四：display:table-cell; + vertical-align:middle; 
方案五：使用flex彈性盒模型

    


box{
    display:flex;
    justifly-content:center;
    Align-item:center;
}
Box{
    Position:relative;
}
Item{
 Position:absolute;
 Top:50%;
 Transform:translateY(-50%);
}

選擇器權重
!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符* > 繼承 > 瀏覽器默認屬性
webpack的一些原理和機制
webpack:把所有依賴打包成一個 bundle.js 文件，通過代碼分割成單元片段并按需加載。

解析webpack配置參數，合并從shell傳入和webpack.config.js文件里配置的參數，生產最后的配置結果。
注冊所有配置的插件，好讓插件監聽webpack構建生命周期的事件節點，以做出對應的反應。
從配置的entry入口文件開始解析文件構建AST語法樹，找出每個文件所依賴的文件，遞歸下去。
在解析文件遞歸的過程中根據文件類型和loader配置找出合適的loader用來對文件進行轉換。
遞歸完后得到每個文件的最終結果，根據entry配置生成代碼塊chunk。
輸出所有chunk到文件系統。

ES6模塊與CommonJS模塊的差異

CommonJs 模塊輸出的是一個值的拷貝，ES6模塊輸出的是一個值的引用
CommonJS 模塊是運行時加載，ES6模塊是編譯時輸出接口
ES6輸入的模塊變量，只是一個符號鏈接，所以這個變量是只讀的，對它進行重新賦值就會報錯

模塊加載AMD，CMD，CommonJS Modules/2.0 規范
AMD 是 RequireJS 在推廣過程中對模塊定義的規范化產出(不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同))。
CMD 是 SeaJS 在推廣過程中對模塊定義的規范化產出。

這些規范的目的都是為了 JavaScript 的模塊化開發，特別是在瀏覽器端的
對于依賴的模塊，AMD 是提前執行，CMD 是延遲執行
CMD 推崇依賴就近，AMD 推崇依賴前置

繼承方式
相關文案

原型鏈繼承
借用構造函數 (類式繼承)
組合式繼承(原型+構造函數繼承)
原型式繼承
寄生式繼承
寄生組合式繼承

父子類
function Animal(name) {
    this.name = name || "Mike";//實例屬性
    this.love = function () {
      console.log(this.name + "愛吃骨頭")//實例方法
    }
    this.other = [];//實例引用屬性
  }
  Animal.prototype.sleep = function (place) {
    console.log(this.name + "在" + place + "睡覺")
  }
原型鏈繼承
  function Dog() {}
  Dog.prototype = new Animal();
  Dog.prototype.name = "Jack";
  var dog1 = new Dog("twoHa");
  var dog2 = new Dog("keJi");
  console.log(dog1.name);//Jack
  console.log(dog2.name);//Jack
  dog1.love();//Jack愛吃骨頭
  dog2.love();//Jack愛吃骨頭
  dog1.sleep("床上");//Jack在床上睡覺
  dog2.sleep("客廳");//Jack在客廳睡覺

優點：
 1. 實例是子類的實例，也是父類的實例
 2. 父類新增原型方法/原型屬性，子類都能訪問到
 3. 簡單，易于實現

缺點：

 1. 要想為子類新增屬性和方法，必須要在new Animal()這樣的語句之后執行，不能放到構造器中
 2. 無法實現多繼承
 3. 來自原型對象的引用屬性是所有實例共享的，改變實例會污染父類
 4. 創建子類實例時，無法向父類構造函數傳參

XSS和CSRF
XSS跨站腳本攻擊:
不需要你做任何的登錄認證，它會通過合法的操作（比如在url中輸入、在評論框中輸入），向你的頁面注入腳本（可能是js、hmtl代碼塊等）。

編碼:當惡意代碼值被作為某一標簽的內容顯示：在不需要html輸入的地方對html 標簽及一些特殊字符( ” < > & 等等)做過濾，將其轉化為不被瀏覽器解釋執行的字符。
在標簽的 href、src 等屬性中，包含 javascript: (偽協議)等可執行代碼。
過濾：移除用戶輸入的和事件相關的屬性。如onerror可以自動觸發攻擊，還有onclick等。移除用戶輸入的Style節點、Script節點、Iframe節點。（尤其是Script節點，它可是支持跨域的呀，一定要移除）;
httpOnly: 在 cookie 中設置 HttpOnly 屬性后，js腳本將無法讀取到 cookie 信息。
jsonp引發的xss攻擊
就是前面說到的，Content-Type 不要亂用，嚴格按照標準協議來做。目前的框架默認肯定會檢測一下內容類型，如果不是很必要，不要手動設置。因為有可能多轉發幾次 Content-Type 就被改了。
callback 做長度限制，這個比較 low。

檢測 callback 里面的字符。一般 callback 里面都是字母和數字，別的符號都不能有。

callback 做一個編碼，如果用 Go 語言做的話，如下。對所有 callback 都處理。callback = template.JSEscapeString(callback)
CSRF攻擊:跨站請求偽造。

要完成一次CSRF攻擊，受害者必須滿足兩個必要的條件：

登錄受信任網站A，并在本地生成Cookie。（如果用戶沒有登錄網站A，那么網站B在誘導的時候，請求網站A的api接口時，會提示你登錄）
在不登出A的情況下，訪問危險網站B（其實是利用了網站A的漏洞）。

溫馨提示一下，cookie保證了用戶可以處于登錄狀態，但網站B其實拿不到 cookie。
預防
Token 驗證：（用的最多）
（1）服務器發送給客戶端一個token；
（2）客戶端提交的表單中帶著這個token。
（3）如果這個 token 不合法，那么服務器拒絕這個請求。
隱藏令牌：
把 token 隱藏在 http 的 head頭中。
方法二和方法一有點像，本質上沒有太大區別，只是使用方式上有區別。
Referer 驗證：Referer 指的是頁面請求來源。意思是，只接受本站的請求，服務器才做響應；如果不是，就攔截。
XSS 與 CSRF異同

CSRF：需要用戶先登錄網站A，獲取 cookie。
XSS：不需要登錄。
CSRF：是利用網站A本身的漏洞，去請求網站A的api。
XSS：是向網站 A 注入 JS代碼，然后執行 JS 里的代碼，篡改網站A的內容。

HTTP
HTTP是用于傳輸如HTML文件,圖片文件，查詢結果的應用層協議。它被設計于用于服務端和客戶端之間的通信。
傳統輪詢(Traditional Polling)
當前Web應用中較常見的一種持續通信方式，通常采取 setInterval 或者 setTimeout 實現。例如如果我們想要定時獲取并刷新頁面上的數據，可以結合Ajax寫出如下實現：
setInterval(function() {
    $.get("/path/to/server", function(data, status) {
        console.log(data);
    });
}, 10000);
缺陷:
程序在每次請求時都會新建一個HTTP請求，然而并不是每次都能返回所需的新數據。
當同時發起的請求達到一定數目時，會對服務器造成較大負擔。
長輪詢(long poll)
客戶端發送一個request后，服務器拿到這個連接，如果有消息，才返回response給客戶端。沒有消息，就一直不返回response。之后客戶端再次發送request, 重復上次的動作。
http協議的特點是服務器不能主動聯系客戶端，只能由客戶端發起。它的被動性預示了在完成雙向通信時需要不停的連接或連接一直打開，這就需要服務器快速的處理速度或高并發的能力，是非常消耗資源的。
websocket 和http區別
?相同點:

都是應用層的協議
都是基于tcp,并且都是可靠的協議

不同點:

websocket是持久連接的協議,而http是非持久連接的協議.
websocket是雙向通信協議,模擬socket協議,可以雙向發送消息,而http是單向的.
websocket的服務端可以主動向客服端發送信息,而http的服務端只有在客戶端發起請求時才能發送數據,無法主動向客戶端發送信息.

回流與重繪

當render tree(渲染樹)中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。
當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。

注意：回流必將引起重繪，而重繪不一定會引起回流。
當頁面布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流：


添加或者刪除可見的DOM元素；
元素位置改變；
元素尺寸改變——邊距、填充、邊框、寬度和高度
內容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；
頁面渲染初始化；
瀏覽器窗口尺寸改變——resize事件發生時；

請詳細說下你對vue生命周期的理解？
總共分為8個階段創建前/后，載入前/后，更新前/后，銷毀前/后
beforeCreate 創建前執行（vue實例的掛載元素$el和數據對象data都為undefined，還未初始化）

created 完成創建 （完成了data數據初始化，el還未初始化）
beforeMount 載入前（vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。）
mounted 載入后html已經渲染(vue實例掛載完成，data.message成功渲染。)
beforeUpdate 更新前狀態（view層的數據變化前，不是data中的數據改變前）
updated 更新狀態后
beforeDestroy 銷毀前
destroyed 銷毀后 （在執行destroy方法后，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在）

說一下每一個階段可以做的事情

beforeCreate:可以在這里加一個loading事件，在加載實例時觸發。
created:初始化完成時的事件寫這里，如果這里結束了loading事件，異步請求也在這里調用。
mounted:掛在元素，獲取到DOM節點
updated:對數據進行處理的函數寫這里。
beforeDestroy:可以寫一個確認停止事件的確認框。