摘要：原理對(duì)處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來之前，再次觸發(fā)事件，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)。在目標(biāo)發(fā)出內(nèi)容改變的事件后，直接接收事件并作出響應(yīng)。首先是目標(biāo)的構(gòu)造函數(shù)，他有個(gè)數(shù)組，用于添加觀察者。

js中sort函數(shù)的底層實(shí)現(xiàn)機(jī)制？

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

快速排序

    function quickSort(arr){
        if(arr.length<=1){ //如果數(shù)組中只有一位數(shù)，返回?cái)?shù)組
            return arr;
        }
        var mNumIndex = Math.floor(arr.length/2); //取基準(zhǔn)值的下標(biāo)
        var mNum = arr.splice(mNumIndex,1)[0];  //取基準(zhǔn)值
        var left = [];  //左邊數(shù)組
        var right = []; //右邊數(shù)組
        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;      // 當(dāng)前考察的數(shù)大于前一個(gè)數(shù)，證明有序，退出循環(huán)
      }
      arr[j] = arr[j-1]; // 將前一個(gè)數(shù)復(fù)制到后一個(gè)數(shù)上
    }
    arr[j] = temp;  // 找到考察的數(shù)應(yīng)處于的位置
  }
  return arr;
}
選擇排序（實(shí)現(xiàn)思路跟冒泡排序差不多， 可以說是冒泡排序的衍生版本）
    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
    }
數(shù)組去重
ES6
    function unique(arr) {
      return Array.from(new Set(arr))
    }
    new Set本身是一個(gè)構(gòu)造函數(shù)，用來生成Set數(shù)據(jù)結(jié)構(gòu),類數(shù)組，成員的值都是唯一的，
    沒有重復(fù)的值。
    Array.from()將一個(gè)類數(shù)組對(duì)象或者可遍歷對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組。
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
如何統(tǒng)計(jì)網(wǎng)頁里出現(xiàn)多少種html標(biāo)簽
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下的所有節(jié)點(diǎn)
    function getDom(dom) {
      var list = []
      var domChildren = dom.childNodes
      for (var i = 0; i < domChildren.length; i++) {
        // nodeType === 1 是元素節(jié)點(diǎn)，2是屬性節(jié)點(diǎn)。
        if (domChildren[i].nodeType === 1) {
          list.push(domChildren[i])
          var retArr = getDom(domChildren[i])
          list = list.concat(retArr)
        }
      }
      return list
    }
    getDom(document.querySelector("body"))
實(shí)現(xiàn)bind方法：
Function.prototype.bind= function(obj){
    var _self = this, args = arguments;
    return function() {
        _self.apply(obj, Array.prototype.slice.call(args, 1));
    }
}

防抖功能函數(shù)，接受傳參
定義：多次觸發(fā)事件后，事件處理函數(shù)只執(zhí)行一次，并且是在觸發(fā)操作結(jié)束時(shí)執(zhí)行。

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

// test
const a = singleton.getInstance("a") // 通過 getInstance 來獲取實(shí)例
const b = singleton.getInstance("b")
console.log(a === b)
2.工廠模式
創(chuàng)建一個(gè)對(duì)象常常需要復(fù)雜的過程，所以不適合在一個(gè)復(fù)雜的對(duì)象中。創(chuàng)建對(duì)象可能會(huì)導(dǎo)致大量的重復(fù)代碼，也可能提供不了足夠級(jí)別的抽象。工廠方法模式通過定義一個(gè)多帶帶的創(chuàng)建對(duì)象的方法來解決這些問題，由子類實(shí)現(xiàn)這個(gè)方法來創(chuàng)建具體類型的對(duì)象。
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. 訂閱/發(fā)布者模式
發(fā)布訂閱模式，基于一個(gè)主題/事件通道，希望接收通知的對(duì)象（稱為subscriber）通過自定義事件訂閱主題，被激活事件的對(duì)象（稱為publisher）通過發(fā)布主題事件的方式被通知。
就和用戶訂閱微信公眾號(hào)道理一樣，一個(gè)公眾號(hào)可以被多個(gè)用戶同時(shí)訂閱，當(dāng)公眾號(hào)有新增內(nèi)容時(shí)候，只要發(fā)布就好了，用戶就能接收到最新的內(nèi)容
訂閱/發(fā)布者模式和觀察者模式的區(qū)別：
在觀察者模式中，觀察者需要直接訂閱目標(biāo)事件。在目標(biāo)發(fā)出內(nèi)容改變的事件后，直接接收事件并作出響應(yīng)。發(fā)布訂閱模式相比觀察者模式多了個(gè)事件通道，訂閱者和發(fā)布者不是直接關(guān)聯(lián)的。
1、Observer模式要求觀察者必須訂閱內(nèi)容改變的事件，定義了一個(gè)一對(duì)多的依賴關(guān)系；
2、Publish/Subscribe模式使用了一個(gè)主題/事件通道，這個(gè)通道介于訂閱著與發(fā)布者之間；
3、觀察者模式里面觀察者「被迫」執(zhí)行內(nèi)容改變事件（subject內(nèi)容事件）；發(fā)布/訂閱模式中，訂閱著可以自定義事件處理程序；
4、觀察者模式兩個(gè)對(duì)象之間有很強(qiáng)的依賴關(guān)系；發(fā)布/訂閱模式兩個(gè)對(duì)象之間的耦合讀底
      function Public(){
        //存放訂閱者信息
        this.subscribers = [];
        // 添加訂閱者
        this.addSubscriber = function(subscriber) {
          //保證一個(gè)訂閱者只能訂閱一次
          let flag = this.subscribers.some(function(item){
            return item == subscriber;
          })
          if(!flag){
            this.subscribers.push(subscriber);
          }
          return this;
        }
        // 發(fā)布消息
        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. 觀察者模式
一個(gè)或多個(gè)觀察者對(duì)目標(biāo)的狀態(tài)感興趣，通過將自己依附在目標(biāo)對(duì)象上以便注冊(cè)所感興趣的內(nèi)容。目標(biāo)狀態(tài)發(fā)生改變并且觀察者可能對(duì)這些改變感興趣，會(huì)發(fā)送一個(gè)通知消息，調(diào)用每個(gè)觀察者的更新方法。當(dāng)觀察者不再對(duì)目標(biāo)狀態(tài)感興趣時(shí)，他們可以簡(jiǎn)單將自己從中分離。
首先是目標(biāo)的構(gòu)造函數(shù)，他有個(gè)數(shù)組，用于添加觀察者。還有個(gè)廣播方法，遍歷觀察者數(shù)組后調(diào)用他們的update方法：
class Subject{
  constructor(){
    this.subs = [];
  }
  addSub(sub){
    this.subs.push(sub);
  }
  notify(){
    this.subs.forEach(sub=> {
      sub.update();
    });
  }
}
那么觀察者就得有個(gè)update方法：
class Observer{
  update(){
    console.log("update");
  }
}
let subject = new Subject();
let ob = new Observer();
//目標(biāo)添加觀察者了
subject.addSub(ob);
//目標(biāo)發(fā)布消息調(diào)用觀察者的更新方法了
subject.notify();   //update
4. 策略模式
特征:根據(jù)不同參數(shù)可以命中不同的策略;
案例:動(dòng)畫庫里的算法函數(shù)
5. 代理模式
特征:代理對(duì)象和本體對(duì)象具有一致的接口;
案例:圖片預(yù)加載
5. 迭代器模式
特征:能獲取聚合對(duì)象的順序和元素;
案例:each([1, 2, 3], cb);
5. 命令模式
特征:不同對(duì)象間約定好相應(yīng)的接口;
案例:按鈕和命令的分離;
6. 組合模式
特征:組合模式在對(duì)象間形成一致對(duì)待的樹形結(jié)構(gòu);
案例: 掃描文件夾;
7. 組合模式
特征:組合模式在對(duì)象間形成一致對(duì)待的樹形結(jié)構(gòu);
案例: 掃描文件夾;
6. 組合模式
特征:組合模式在對(duì)象間形成一致對(duì)
列表項(xiàng)目
待的樹形結(jié)構(gòu);
案例: 掃描文件夾;
判斷數(shù)組
Object.prototype.toString.call(arr) === "[object Array]" ;
Array.isArray(arr);
arr.constructor === Array;

This的指向

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

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

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

創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
屬性和方法被加入到 this 引用的對(duì)象中。
新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。

頁面加載過程

瀏覽器根據(jù) DNS 服務(wù)器得到域名的 IP 地址
向這個(gè) IP 的機(jī)器發(fā)送 HTTP 請(qǐng)求
服務(wù)器收到、處理并返回 HTTP 請(qǐng)求
瀏覽器得到返回內(nèi)容

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

    

    
    




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

MutationObserver監(jiān)聽DOM更新完畢的。
vue用異步隊(duì)列的方式來控制DOM更新和nextTick回調(diào)先后執(zhí)行
microtask(微任務(wù))因?yàn)槠涓邇?yōu)先級(jí)特性，能確保隊(duì)列中的微任務(wù)在一次事件循環(huán)前被執(zhí)行完畢
因?yàn)榧嫒菪詥栴}，vue不得不做了microtask向macrotask(Promise)的降級(jí)方案

VUE的watch與computed的區(qū)別
觸發(fā)條件不同
1.computed計(jì)算屬性會(huì)依賴于使用它的data屬性，只要是依賴的data屬性值有變動(dòng)，則自定義重新調(diào)用計(jì)算屬性執(zhí)行一次。
2.watch則是在監(jiān)控的data屬性值發(fā)生變動(dòng)時(shí)，其會(huì)自動(dòng)調(diào)用watch回調(diào)函數(shù)。
應(yīng)用場(chǎng)景不同
1.執(zhí)行異步操作，開銷較大的操作，避免堵塞主線程，使用watch。
2.簡(jiǎn)單且串行返回的，使用computed
請(qǐng)解釋閉包
《JavaScript權(quán)威指南》中的概念：有權(quán)訪問另一個(gè)作用域中變量的函數(shù)
 閉包特性：可實(shí)現(xiàn)函數(shù)外訪問函數(shù)內(nèi)變量，外層變量可以不被垃圾回收機(jī)制回收。
 缺點(diǎn):

在閉包中使用this對(duì)象可能會(huì)導(dǎo)致一些問題，因?yàn)槟涿瘮?shù)的執(zhí)行具有全局性，因此其this對(duì)象通常指window.
由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除.

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

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

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

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

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

如何做水平垂直居中？
方案一：已知寬高，設(shè)置position: absolute;，然后left和top都設(shè)置為50%，再根據(jù)margin的負(fù)值來調(diào)正 
方案二：類似方案一，最后一步用transform:translate(-50%,-50%); 
方案三：絕對(duì)定位，top、bottom、left、right都設(shè)置為0，設(shè)置好寬高，然后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%);
}

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

解析webpack配置參數(shù)，合并從shell傳入和webpack.config.js文件里配置的參數(shù)，生產(chǎn)最后的配置結(jié)果。
注冊(cè)所有配置的插件，好讓插件監(jiān)聽webpack構(gòu)建生命周期的事件節(jié)點(diǎn)，以做出對(duì)應(yīng)的反應(yīng)。
從配置的entry入口文件開始解析文件構(gòu)建AST語法樹，找出每個(gè)文件所依賴的文件，遞歸下去。
在解析文件遞歸的過程中根據(jù)文件類型和loader配置找出合適的loader用來對(duì)文件進(jìn)行轉(zhuǎn)換。
遞歸完后得到每個(gè)文件的最終結(jié)果，根據(jù)entry配置生成代碼塊chunk。
輸出所有chunk到文件系統(tǒng)。

ES6模塊與CommonJS模塊的差異

CommonJs 模塊輸出的是一個(gè)值的拷貝，ES6模塊輸出的是一個(gè)值的引用
CommonJS 模塊是運(yùn)行時(shí)加載，ES6模塊是編譯時(shí)輸出接口
ES6輸入的模塊變量，只是一個(gè)符號(hào)鏈接，所以這個(gè)變量是只讀的，對(duì)它進(jìn)行重新賦值就會(huì)報(bào)錯(cuò)

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

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

繼承方式
相關(guān)文案

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

父子類
function Animal(name) {
    this.name = name || "Mike";//實(shí)例屬性
    this.love = function () {
      console.log(this.name + "愛吃骨頭")//實(shí)例方法
    }
    this.other = [];//實(shí)例引用屬性
  }
  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在客廳睡覺

優(yōu)點(diǎn)：
 1. 實(shí)例是子類的實(shí)例，也是父類的實(shí)例
 2. 父類新增原型方法/原型屬性，子類都能訪問到
 3. 簡(jiǎn)單，易于實(shí)現(xiàn)

缺點(diǎn)：

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

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

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

檢測(cè) callback 里面的字符。一般 callback 里面都是字母和數(shù)字，別的符號(hào)都不能有。

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

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

登錄受信任網(wǎng)站A，并在本地生成Cookie。（如果用戶沒有登錄網(wǎng)站A，那么網(wǎng)站B在誘導(dǎo)的時(shí)候，請(qǐng)求網(wǎng)站A的api接口時(shí)，會(huì)提示你登錄）
在不登出A的情況下，訪問危險(xiǎn)網(wǎng)站B（其實(shí)是利用了網(wǎng)站A的漏洞）。

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

CSRF：需要用戶先登錄網(wǎng)站A，獲取 cookie。
XSS：不需要登錄。
CSRF：是利用網(wǎng)站A本身的漏洞，去請(qǐng)求網(wǎng)站A的api。
XSS：是向網(wǎng)站 A 注入 JS代碼，然后執(zhí)行 JS 里的代碼，篡改網(wǎng)站A的內(nèi)容。

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

都是應(yīng)用層的協(xié)議
都是基于tcp,并且都是可靠的協(xié)議

不同點(diǎn):

websocket是持久連接的協(xié)議,而http是非持久連接的協(xié)議.
websocket是雙向通信協(xié)議,模擬socket協(xié)議,可以雙向發(fā)送消息,而http是單向的.
websocket的服務(wù)端可以主動(dòng)向客服端發(fā)送信息,而http的服務(wù)端只有在客戶端發(fā)起請(qǐng)求時(shí)才能發(fā)送數(shù)據(jù),無法主動(dòng)向客戶端發(fā)送信息.

回流與重繪

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

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


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

請(qǐng)?jiān)敿?xì)說下你對(duì)vue生命周期的理解？
總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后
beforeCreate 創(chuàng)建前執(zhí)行（vue實(shí)例的掛載元素$el和數(shù)據(jù)對(duì)象data都為undefined，還未初始化）

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

說一下每一個(gè)階段可以做的事情

beforeCreate:可以在這里加一個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)。
created:初始化完成時(shí)的事件寫這里，如果這里結(jié)束了loading事件，異步請(qǐng)求也在這里調(diào)用。
mounted:掛在元素，獲取到DOM節(jié)點(diǎn)
updated:對(duì)數(shù)據(jù)進(jìn)行處理的函數(shù)寫這里。
beforeDestroy:可以寫一個(gè)確認(rèn)停止事件的確認(rèn)框。