摘要：優(yōu)點(diǎn)是繼承了父類的模板，又繼承了父類的原型對(duì)象，缺點(diǎn)就是父類實(shí)例傳參，不是子類實(shí)例化傳參，不符合常規(guī)語(yǔ)言的寫(xiě)法使用的方式繼承了父類的模板，不繼承了父類的原型對(duì)象。優(yōu)點(diǎn)是方便了子類實(shí)例傳參，缺點(diǎn)就是不繼承了父類的原型對(duì)

github版本戳,求star,follow

HTML相關(guān)

CSS相關(guān)

JAVASCRIPT相關(guān)

DOM相關(guān)

HTTP相關(guān)

VUE相關(guān)

算法相關(guān)

網(wǎng)絡(luò)安全相關(guān)

webpack相關(guān)

其他

1 html語(yǔ)義化

意義：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲(chóng)和機(jī)器很好地解析。
注意：
1.盡可能少的使用無(wú)語(yǔ)義的標(biāo)簽div和span；
2.在語(yǔ)義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利；
3.不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
4.需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
5.使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開(kāi)，表頭用th，單元格用td；
6.表單域要用fieldset標(biāo)簽包起來(lái)，并用legend標(biāo)簽說(shuō)明表單的用途；
7.每個(gè)input標(biāo)簽對(duì)應(yīng)的說(shuō)明文本都需要使用label標(biāo)簽，并且通過(guò)為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來(lái)讓說(shuō)明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來(lái)。

新標(biāo)簽：

2 meta viewport相關(guān)

  H5標(biāo)準(zhǔn)聲明，使用 HTML5 doctype，不區(qū)分大小寫(xiě)
 標(biāo)準(zhǔn)的 lang 屬性寫(xiě)法
    聲明文檔使用的字符編碼
   優(yōu)先使用 IE 最新版本和 Chrome
       頁(yè)面描述
      頁(yè)面關(guān)鍵詞
    網(wǎng)頁(yè)作者
      搜索引擎抓取
 為移動(dòng)設(shè)備添加 viewport
 iOS 設(shè)備 begin
  添加到主屏后的標(biāo)題（iOS 6 新增）
是否啟用 WebApp 全屏模式，刪除蘋(píng)果默認(rèn)的工具欄和菜單欄

添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）

  設(shè)置蘋(píng)果工具欄顏色
  啟用360瀏覽器的極速模式(webkit)
     避免IE使用兼容模式
    不讓百度轉(zhuǎn)碼
     針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓
   微軟的老式瀏覽器
   uc強(qiáng)制豎屏
    QQ強(qiáng)制豎屏
              UC強(qiáng)制全屏
       QQ強(qiáng)制全屏
   UC應(yīng)用模式
    QQ應(yīng)用模式
    windows phone 點(diǎn)擊無(wú)高光
設(shè)置頁(yè)面不緩存

3 canvas 相關(guān)

使用前需要獲得上下文環(huán)境，暫不支持3d
常用api:
    1.fillRect(x,y,width,height)實(shí)心矩形
    2.strokeRect(x,y,width,height)空心矩形
    3.fillText("Hello world",200,200);實(shí)心文字
    4.strokeText("Hello world",200,300)空心文字
各種東西！！！

新標(biāo)簽兼容低版本

ie9之前版本通過(guò)createElement創(chuàng)建html5新標(biāo)簽

引入html5shiv.js

1.盒模型

1.ie盒模型算上border、padding及自身（不算margin），標(biāo)準(zhǔn)的只算上自身窗體的大小
css設(shè)置方法如下

/* 標(biāo)準(zhǔn)模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

2.margin、border、padding、content由外到里
3.幾種獲得寬高的方式

dom.style.width/height

　　這種方式只能取到dom元素內(nèi)聯(lián)樣式所設(shè)置的寬高，也就是說(shuō)如果該節(jié)點(diǎn)的樣式是在style標(biāo)簽中或外聯(lián)的CSS文件中設(shè)置的話，通過(guò)這種方法是獲取不到dom的寬高的。

dom.currentStyle.width/height

　　這種方式獲取的是在頁(yè)面渲染完成后的結(jié)果，就是說(shuō)不管是哪種方式設(shè)置的樣式，都能獲取到。但這種方式只有IE瀏覽器支持。

window.getComputedStyle(dom).width/height

　　這種方式的原理和2是一樣的，這個(gè)可以兼容更多的瀏覽器，通用性好一些。

dom.getBoundingClientRect().width/height

　　這種方式是根據(jù)元素在視窗中的絕對(duì)位置來(lái)獲取寬高的

dom.offsetWidth/offsetHeight

　　這個(gè)就沒(méi)什么好說(shuō)的了，最常用的，也是兼容最好的。

4.拓展 各種獲得寬高的方式

獲取屏幕的高度和寬度（屏幕分辨率）：

window.screen.height/width

獲取屏幕工作區(qū)域的高度和寬度（去掉狀態(tài)欄）：

window.screen.availHeight/availWidth

網(wǎng)頁(yè)全文的高度和寬度：

document.body.scrollHeight/Width

滾動(dòng)條卷上去的高度和向右卷的寬度：

document.body.scrollTop/scrollLeft

網(wǎng)頁(yè)可見(jiàn)區(qū)域的高度和寬度（不加邊線）：

document.body.clientHeight/clientWidth

網(wǎng)頁(yè)可見(jiàn)區(qū)域的高度和寬度（加邊線）：

document.body.offsetHeight/offsetWidth

5.邊距重疊解決方案(BFC)
BFC原理

內(nèi)部的box會(huì)在垂直方向，一個(gè)接一個(gè)的放置

每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸（對(duì)于從做往右的格式化，否則相反）

box垂直方向的距離由margin決定，屬于同一個(gè)bfc的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊

bfc的區(qū)域不會(huì)與浮動(dòng)區(qū)域的box重疊

bfc是一個(gè)頁(yè)面上的獨(dú)立的容器，外面的元素不會(huì)影響bfc里的元素，反過(guò)來(lái)，里面的也不會(huì)影響外面的

計(jì)算bfc高度的時(shí)候，浮動(dòng)元素也會(huì)參與計(jì)算

創(chuàng)建bfc

float屬性不為none（脫離文檔流）

position為absolute或fixed

display為inline-block,table-cell,table-caption,flex,inine-flex

overflow不為visible

根元素

demo

    
上
    這塊margin-bottom:30px;



    

    
下
    這塊margin-top:50px;
    

css reset 和 normalize.css 有什么區(qū)別

兩者都是通過(guò)重置樣式，保持瀏覽器樣式的一致性

前者幾乎為所有標(biāo)簽添加了樣式，后者保持了許多瀏覽器樣式，保持盡可能的一致

后者修復(fù)了常見(jiàn)的桌面端和移動(dòng)端瀏覽器的bug：包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問(wèn)題、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。

前者中含有大段的繼承鏈

后者模塊化，文檔較前者來(lái)說(shuō)豐富

居中方法

水平方向上

針對(duì)inline, 內(nèi)聯(lián)塊inline-block, 內(nèi)聯(lián)表inline-table, inline-flex元素及img,span,button等元素
.text_div{
    text-align:center;
}

不定寬塊狀元素居中
.text_div{
    margin:0 auto;
}

通過(guò)給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left: -50% 來(lái)實(shí)現(xiàn)水平居中。
.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    left:-50%;
}

垂直居中

單行內(nèi)聯(lián)(inline-)元素垂直居中 
通過(guò)設(shè)置內(nèi)聯(lián)元素的高度(height)和行高(line-height)相等，從而使元素垂直居中。

.text_div{
    height: 120px;
    line-height: 120px;
}

利用表布局
.father {
    display: table;
}
.children {
    display: table-cell;
    vertical-align: middle;
}

flex布局
.center-flex {
    display: flex;
    flex-direction: column;//上下排列
    justify-content: center;
}

絕對(duì)布局方式
已知高度
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}
未知高度
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

垂直水平居中根據(jù)上方結(jié)合

flex方式
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
grid方式
.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

css優(yōu)先級(jí)確定

每個(gè)選擇器都有權(quán)值，權(quán)值越大越優(yōu)先

繼承的樣式優(yōu)先級(jí)低于自身指定樣式

！important優(yōu)先級(jí)最高 js也無(wú)法修改

權(quán)值相同時(shí)，靠近元素的樣式優(yōu)先級(jí)高 順序?yàn)閮?nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 內(nèi)部樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）

bfc內(nèi)容見(jiàn)盒模型

如何清除浮動(dòng)

不清楚浮動(dòng)會(huì)發(fā)生高度塌陷：浮動(dòng)元素父元素高度自適應(yīng)（父元素不寫(xiě)高度時(shí)，子元素寫(xiě)了浮動(dòng)后，父元素會(huì)發(fā)生高度塌陷）

clear清除浮動(dòng)（添加空div法）在浮動(dòng)元素下方添加空div,并給該元素寫(xiě)css樣式： {clear:both;height:0;overflow:hidden;}

給浮動(dòng)元素父級(jí)設(shè)置高度

父級(jí)同時(shí)浮動(dòng)（需要給父級(jí)同級(jí)元素添加浮動(dòng)）

父級(jí)設(shè)置成inline-block，其margin: 0 auto居中方式失效

利用br標(biāo)簽的clear屬性

給父級(jí)添加overflow:hidden 清除浮動(dòng)方法

萬(wàn)能清除法 after偽類 清浮動(dòng)（現(xiàn)在主流方法，推薦使用）

.float_div:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.float_div{
    zoom:1
} 

自適應(yīng)布局

思路：

左側(cè)浮動(dòng)或者絕對(duì)定位，然后右側(cè)margin撐開(kāi)

使用div包含，然后靠負(fù)margin形成bfc

使用flex

畫(huà)三角形

#item {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid transparent;
    border-bottom: 50px solid blue;
    background: white;
}

link @import導(dǎo)入css

link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。

link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。

link無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

animation

長(zhǎng)寬比方案

使用padding方式結(jié)合calc實(shí)現(xiàn)

長(zhǎng)寬一項(xiàng)設(shè)置百分比另一項(xiàng)aspect-ratio實(shí)現(xiàn)（需借助插件實(shí)現(xiàn)）

display相關(guān)

block:div等容器類型

inline:img span等行內(nèi)類型

table系列：將樣式變成table類型

flex:重點(diǎn)把握，非常強(qiáng)大

grid:同上

inline-block:可設(shè)置寬度，兩者間有一點(diǎn)間隙

inherit:繼承父級(jí)

1 ["1", "2", "3"].map(parseInt)

首先, map接受兩個(gè)參數(shù), 一個(gè)回調(diào)函數(shù) callback, 一個(gè)回調(diào)函數(shù)的this值

其中回調(diào)函數(shù)接受三個(gè)參數(shù) currentValue, index, arrary;

而題目中, map只傳入了回調(diào)函數(shù)--parseInt.

其次, parseInt 只接受兩個(gè)兩個(gè)參數(shù) string, radix(基數(shù)).  
本題理解來(lái)說(shuō)也就是key與 index 

所以本題即問(wèn)
parseInt("1", 0);
parseInt("2", 1);
parseInt("3", 2);

parseInt(string, radix)
string    必需。要被解析的字符串。
radix 可選。表示要解析的數(shù)字的基數(shù)。該值介于 2 ~ 36 之間。
如果省略該參數(shù)或其值為 0，則數(shù)字將以 10 為基礎(chǔ)來(lái)解析。如果它以 “0x” 或 “0X” 開(kāi)頭，將以 16 為基數(shù)。

2 [[3,2,1].reduce(Math.pow), [].reduce(Math.pow)]

arr.reduce(callback[, initialValue])
reduce接受兩個(gè)參數(shù), 一個(gè)回調(diào), 一個(gè)初始值.
回調(diào)函數(shù)接受四個(gè)參數(shù) previousValue, currentValue, currentIndex, array
需要注意的是 If the array is empty and no initialValue was provided, TypeError would be thrown.
所以第二個(gè)表達(dá)式會(huì)報(bào)異常. 第一個(gè)表達(dá)式等價(jià)于 Math.pow(3, 2) => 9; Math.pow(9, 1) =>9

3

var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) { return x === undefined;});
我們看到在迭代這個(gè)數(shù)組的時(shí)候, 首先檢查了這個(gè)索引值是不是數(shù)組的一個(gè)屬性, 那么我們測(cè)試一下.

0 in ary; => true
3 in ary; => false
10 in ary; => true
也就是說(shuō) 從 3 - 9 都是沒(méi)有初始化的bug !, 這些索引并不存在與數(shù)組中. 在 array 的函數(shù)調(diào)用的時(shí)候是會(huì)跳過(guò)這些坑的.

4 [typeof null, null instanceof Object]

typeof 返回一個(gè)表示類型的字符串.
instanceof 運(yùn)算符用來(lái)檢測(cè) constructor.prototype 是否存在于參數(shù) object 的原型鏈上.
type         result
Undefined   "undefined"
Null        "object"
Boolean     "boolean"
Number      "number"
String      "string"
Symbol      "symbol"
Host object Implementation-dependent
Function    "function"
Object      "object"

5 js數(shù)據(jù)類型

1.number;

2.string;

3.boolean;

4.undefined;

5.null;

6.symbol（ES6新增，文章后面有對(duì)著新類型的解釋）Symbol 生成一個(gè)全局唯一的值。

7.Object.（包括Object，Array，F(xiàn)unction）

6 promise 用法

定義
var promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
使用
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});
//等價(jià)于：
promise.then(function(){
  //success
}).catch(function(){
  //failure
})

7 es6 promise ajax

定義
const myHttpClient = url => {
  return new Promise((resolve, reject) => {
    let client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    }
  });
};
使用
myHttpClient("https://www.baidu.com").then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
});

8閉包

function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar 現(xiàn)在是一個(gè)閉包
bar(10);
結(jié)果是16
es6通常用let const塊級(jí)作用域代替，
閉包缺點(diǎn)，ie中會(huì)引起內(nèi)存泄漏，嚴(yán)格來(lái)說(shuō)是ie的缺點(diǎn)不是閉包的問(wèn)題

9 什么是立即執(zhí)行函數(shù)？使用立即執(zhí)行函數(shù)的目的是什么？

常見(jiàn)兩種方式
1.(function(){...})()
  (function(x){
      console.log(x);
  })(12345)
2.(function(){...}())
  (function(x){
      console.log(x);
  }(12345))
作用 不破壞污染全局的命名空間，若需要使用，將其用變量傳入如
（function(window){...}(window)）

10 async/await 語(yǔ)法

作用：異步代碼的新方式
promise示例
const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}
async/await示例
const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}
函數(shù)前面多了一個(gè)aync關(guān)鍵字。await關(guān)鍵字只能用在aync定義的函數(shù)內(nèi)。async函數(shù)會(huì)隱式地返回一個(gè)promise，該promise的reosolve值就是函數(shù)return的值。(示例中reosolve值就是字符串"done")

11 深淺拷貝

let a = {
  aa: 1,
  bb: 2,
  cc: 3,
  dd: {
    ee: 5,
  },
  ff: {
    gg: 6,
  }
};
let d = JSON.parse(JSON.stringify(a));//深復(fù)制包含子對(duì)象
let c = {...a};//深拷貝單不包含子對(duì)象
let b = a;//淺拷貝
b.bb = 22;
c.cc = 33;
c.dd.ee = 55;
d.ff.gg = 66;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

12數(shù)組去重

思路1：定義一個(gè)新數(shù)組，并存放原數(shù)組的第一個(gè)元素，然后將元素組一一和新數(shù)組的元素對(duì)比，若不同則存放在新數(shù)組中
思路2：先將原數(shù)組排序，在與相鄰的進(jìn)行比較，如果不同則存入新數(shù)組。
思路3：利用對(duì)象屬性存在的特性，如果沒(méi)有該屬性則存入新數(shù)組。
思路4（最常用）：使用es6 set
let arr= [1, 2, 3, 3, 5, 7, 2, 6, 8];
console.log([...new Set(arr)]);

13正則實(shí)現(xiàn)trim()功能

function myTrim(str) {
  let reg = /^s+|s+$/g;
  return str.replace(reg, "");
}
console.log(myTrim("    asdf    "));

14 JS原型

1.每個(gè)對(duì)象都有 __proto__ 屬性，但只有函數(shù)對(duì)象才有 prototype 屬性
2.個(gè)人粗略理解與python的類方法靜態(tài)方法實(shí)例方法差不多

15 es6 class

面向?qū)ο螅琷ava中類

16 JS 如何實(shí)現(xiàn)繼承

1.使用原型繼承（既繼承了父類的模板，又繼承了父類的原型對(duì)象。優(yōu)點(diǎn)是繼承了父類的模板，又繼承了父類的原型對(duì)象，缺點(diǎn)就是父類實(shí)例傳參，不是子類實(shí)例化傳參，不符合常規(guī)語(yǔ)言的寫(xiě)法）
2.使用call的方式（繼承了父類的模板，不繼承了父類的原型對(duì)象。優(yōu)點(diǎn)是方便了子類實(shí)例傳參，缺點(diǎn)就是不繼承了父類的原型對(duì)象）

17 手寫(xiě)jquery插件

(function ($) {
    $.fn.myPlugins = function (options) {
      //參數(shù)賦值
      options = $.extend(defaults, options);//對(duì)象合并
      this.each(function () {
          //執(zhí)行代碼邏輯
      });
    };
})(jQuery);

$(selector).myPlugins({參數(shù)});

18 數(shù)組合并去重排序

let arr1 = [1, 25, 2, 26, 1234, 6, 213];
let arr2 = [2, 6, 2134, 6, 31, 623];
let c = [...new Set([...arr1, ...arr2])].sort((a, b) => {
    return a - b;
});

19 call apply

作用：在函數(shù)調(diào)用時(shí)改變函數(shù)的執(zhí)行上下文也就是this的值
區(qū)別：call采用不定長(zhǎng)的參數(shù)列表，而apply使用一個(gè)參數(shù)數(shù)組。
性能優(yōu)化圖

20 for 中setTimeOut

要為循環(huán)題創(chuàng)建不同的循環(huán)副本

21 sort函數(shù)

V8 引擎 sort 函數(shù)只給出了兩種排序 InsertionSort 和 QuickSort，數(shù)量小于10的數(shù)組使用 插入，比10大的數(shù)組則使用 快排。

22 navigator

23 jquery綁定方式

click后者覆蓋

bind后者覆蓋

on(jquery>=1.7)

live

delegate

24 事件流向

冒泡：子節(jié)點(diǎn)一層層冒泡到根節(jié)點(diǎn)

捕獲順序與冒泡相反

addEventListener最后個(gè)參數(shù)true代表捕獲反之代表冒泡

阻止冒泡不停止父節(jié)點(diǎn)捕獲

25原生操作class

//判斷有無(wú)
function hasClass(ele, cls) {
    return ele.className.match(new RegExp("(s|^)" + cls + "(s|$)"));
}

//添加
function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

//刪除
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        let reg = new RegExp("(s|^)" + cls + "(s|$)");
        ele.className = ele.className.replace(reg, " ");
    }
}

html5中加入classList 
一系列操作
兼容至IE10

dom事件模型

DOM之事件模型分腳本模型、內(nèi)聯(lián)模型(同類一個(gè)，后者覆蓋)、動(dòng)態(tài)綁定(同類多個(gè))
demo

Hello1

Hello2

Hello3

冒泡解釋：當(dāng)點(diǎn)擊一個(gè)元素觸發(fā)事件時(shí). 事件會(huì)先從元素的最外層父元素一層一層進(jìn)入到觸發(fā)的元素, 然后在從觸發(fā)元素一層一層返回到最外層父元素, 從最外層一層一層進(jìn)入的階段叫事件捕獲階段, 從最里層一層一層往外的階段叫事件冒泡,

移動(dòng)端觸摸事件

①touchstart：當(dāng)手指觸碰到屏幕的時(shí)候觸發(fā)
②touchmove：當(dāng)手指在屏幕上滑動(dòng)的時(shí)候觸發(fā)
③touchend：當(dāng)手指離開(kāi)屏幕的時(shí)候時(shí)候觸發(fā)
④touchcancel事件：當(dāng)系統(tǒng)停止跟蹤觸摸的時(shí)候觸發(fā)(這個(gè)事件很少會(huì)用，一般不做深入研究)。 電話接入或者彈出信息等其他事件切入
event：

touches：表示當(dāng)前跟蹤的觸摸操作的touch對(duì)象的數(shù)組。

targetTouches：特定于事件目標(biāo)的Touch對(duì)象的數(shù)組。

changeTouches：表示自上次觸摸以來(lái)發(fā)生了什么改變的Touch對(duì)象的數(shù)組。

每個(gè)touch對(duì)象包含的屬性

clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。

clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。

identifier：標(biāo)識(shí)觸摸的唯一ID。

pageX：觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)。

pageY：觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)。

screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

screenY：觸摸目標(biāo)在屏幕中的y坐標(biāo)。

target：觸目的DOM節(jié)點(diǎn)目標(biāo)。

事件委托

參考定義：事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件
好處：給重復(fù)的節(jié)點(diǎn)添加相同操作，減少dom交互，提高性能
實(shí)現(xiàn)思路：給父組件添加事件，通過(guò)事件冒泡，排查元素是否為指定元素，并進(jìn)行系列操作

常見(jiàn)狀態(tài)碼

2開(kāi)頭 （請(qǐng)求成功）表示成功處理了請(qǐng)求的狀態(tài)代碼。

200 （成功） 服務(wù)器已成功處理了請(qǐng)求。 通常，這表示服務(wù)器提供了請(qǐng)求的網(wǎng)頁(yè)。
201 （已創(chuàng)建） 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源。
202 （已接受） 服務(wù)器已接受請(qǐng)求，但尚未處理。
203 （非授權(quán)信息） 服務(wù)器已成功處理了請(qǐng)求，但返回的信息可能來(lái)自另一來(lái)源。
204 （無(wú)內(nèi)容） 服務(wù)器成功處理了請(qǐng)求，但沒(méi)有返回任何內(nèi)容。
205 （重置內(nèi)容） 服務(wù)器成功處理了請(qǐng)求，但沒(méi)有返回任何內(nèi)容。
206 （部分內(nèi)容） 服務(wù)器成功處理了部分 GET 請(qǐng)求。

3開(kāi)頭 （請(qǐng)求被重定向）表示要完成請(qǐng)求，需要進(jìn)一步操作。 通常，這些狀態(tài)代碼用來(lái)重定向。

300 （多種選擇） 針對(duì)請(qǐng)求，服務(wù)器可執(zhí)行多種操作。 服務(wù)器可根據(jù)請(qǐng)求者 (user agent) 選擇一項(xiàng)操作，或提供操作列表供請(qǐng)求者選擇。
301 （永久移動(dòng)） 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。 服務(wù)器返回此響應(yīng)（對(duì) GET 或 HEAD 請(qǐng)求的響應(yīng)）時(shí)，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到新位置。
302 （臨時(shí)移動(dòng)） 服務(wù)器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)進(jìn)行以后的請(qǐng)求。
303 （查看其他位置） 請(qǐng)求者應(yīng)當(dāng)對(duì)不同的位置使用多帶帶的 GET 請(qǐng)求來(lái)檢索響應(yīng)時(shí)，服務(wù)器返回此代碼。
304 （未修改） 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)。 服務(wù)器返回此響應(yīng)時(shí)，不會(huì)返回網(wǎng)頁(yè)內(nèi)容。
305 （使用代理） 請(qǐng)求者只能使用代理訪問(wèn)請(qǐng)求的網(wǎng)頁(yè)。 如果服務(wù)器返回此響應(yīng)，還表示請(qǐng)求者應(yīng)使用代理。
307 （臨時(shí)重定向） 服務(wù)器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)進(jìn)行以后的請(qǐng)求。

4開(kāi)頭 （請(qǐng)求錯(cuò)誤）這些狀態(tài)代碼表示請(qǐng)求可能出錯(cuò)，妨礙了服務(wù)器的處理。

400 （錯(cuò)誤請(qǐng)求） 服務(wù)器不理解請(qǐng)求的語(yǔ)法。
401 （未授權(quán)） 請(qǐng)求要求身份驗(yàn)證。 對(duì)于需要登錄的網(wǎng)頁(yè)，服務(wù)器可能返回此響應(yīng)。
403 （禁止） 服務(wù)器拒絕請(qǐng)求。
404 （未找到） 服務(wù)器找不到請(qǐng)求的網(wǎng)頁(yè)。
405 （方法禁用） 禁用請(qǐng)求中指定的方法。
406 （不接受） 無(wú)法使用請(qǐng)求的內(nèi)容特性響應(yīng)請(qǐng)求的網(wǎng)頁(yè)。
407 （需要代理授權(quán)） 此狀態(tài)代碼與 401（未授權(quán)）類似，但指定請(qǐng)求者應(yīng)當(dāng)授權(quán)使用代理。
408 （請(qǐng)求超時(shí)） 服務(wù)器等候請(qǐng)求時(shí)發(fā)生超時(shí)。
409 （沖突） 服務(wù)器在完成請(qǐng)求時(shí)發(fā)生沖突。 服務(wù)器必須在響應(yīng)中包含有關(guān)沖突的信息。
410 （已刪除） 如果請(qǐng)求的資源已永久刪除，服務(wù)器就會(huì)返回此響應(yīng)。
411 （需要有效長(zhǎng)度） 服務(wù)器不接受不含有效內(nèi)容長(zhǎng)度標(biāo)頭字段的請(qǐng)求。
412 （未滿足前提條件） 服務(wù)器未滿足請(qǐng)求者在請(qǐng)求中設(shè)置的其中一個(gè)前提條件。
413 （請(qǐng)求實(shí)體過(guò)大） 服務(wù)器無(wú)法處理請(qǐng)求，因?yàn)檎?qǐng)求實(shí)體過(guò)大，超出服務(wù)器的處理能力。
414 （請(qǐng)求的 URI 過(guò)長(zhǎng)） 請(qǐng)求的 URI（通常為網(wǎng)址）過(guò)長(zhǎng)，服務(wù)器無(wú)法處理。
415 （不支持的媒體類型） 請(qǐng)求的格式不受請(qǐng)求頁(yè)面的支持。
416 （請(qǐng)求范圍不符合要求） 如果頁(yè)面無(wú)法提供請(qǐng)求的范圍，則服務(wù)器會(huì)返回此狀態(tài)代碼。
417 （未滿足期望值） 服務(wù)器未滿足"期望"請(qǐng)求標(biāo)頭字段的要求。

5開(kāi)頭（服務(wù)器錯(cuò)誤）這些狀態(tài)代碼表示服務(wù)器在嘗試處理請(qǐng)求時(shí)發(fā)生內(nèi)部錯(cuò)誤。 這些錯(cuò)誤可能是服務(wù)器本身的錯(cuò)誤，而不是請(qǐng)求出錯(cuò)。

500 （服務(wù)器內(nèi)部錯(cuò)誤） 服務(wù)器遇到錯(cuò)誤，無(wú)法完成請(qǐng)求。
501 （尚未實(shí)施） 服務(wù)器不具備完成請(qǐng)求的功能。 例如，服務(wù)器無(wú)法識(shí)別請(qǐng)求方法時(shí)可能會(huì)返回此代碼。
502 （錯(cuò)誤網(wǎng)關(guān)） 服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無(wú)效響應(yīng)。
503 （服務(wù)不可用） 服務(wù)器目前無(wú)法使用（由于超載或停機(jī)維護(hù)）。 通常，這只是暫時(shí)狀態(tài)。
504 （網(wǎng)關(guān)超時(shí)） 服務(wù)器作為網(wǎng)關(guān)或代理，但是沒(méi)有及時(shí)從上游服務(wù)器收到請(qǐng)求。
505 （HTTP 版本不受支持） 服務(wù)器不支持請(qǐng)求中所用的 HTTP 協(xié)議版本。

緩存

Expires在http1.0中使用，與服務(wù)器時(shí)間有誤差，在1.1中由Cache-control替代

cdn

Cache-Control 和 Etag 的區(qū)別

如下圖

Cookie sessionStorage localStorage

共同點(diǎn)：都是保存在瀏覽器端，且同源的。
區(qū)別：cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)不能超過(guò)4k(適合保存小數(shù)據(jù))。
sessionStorage和localStorage容量較大，數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效。localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，需手動(dòng)清楚；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。作用域不同。
sessionStorage不在不同的瀏覽器窗口中共享；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

應(yīng)用場(chǎng)景：localStorage：常用于長(zhǎng)期登錄（+判斷用戶是否已登錄），適合長(zhǎng)期保存在本地的數(shù)據(jù)。sessionStorage ：敏感賬號(hào)一次性登錄； cookies與服務(wù)器交互。

GET POST區(qū)別

請(qǐng)求行，請(qǐng)求頭，請(qǐng)求體詳解

1,2,3請(qǐng)求行，4請(qǐng)求體，5請(qǐng)求體

跨域、JSONP 、CORS、postMessage

跨域概念解釋：當(dāng)前發(fā)起請(qǐng)求的域與該請(qǐng)求指向的資源所在的域不一樣。這里的域指的是這樣的一個(gè)概念：我們認(rèn)為若協(xié)議 + 域名 + 端口號(hào)均相同，那么就是同域。
如下表

jsoup實(shí)現(xiàn)

原生

 
jquery
$.ajax({
    url: "http://www.domain2.com:8080/login",
    type: "get",
    dataType: "jsonp",  // 請(qǐng)求方式為jsonp
    jsonpCallback: "onBack",    // 自定義回調(diào)函數(shù)名
    data: {}
});

vue
this.$http.jsonp("http://www.domain2.com:8080/login", {
    params: {},
    jsonp: "onBack"
}).then((res) => {
    console.log(res); 
})

配合的后端node實(shí)現(xiàn),其他服務(wù)器語(yǔ)言也可以
const querystring = require("querystring");
const http = require("http");
const server = http.createServer();
server.on("request", function(req, res) {
    var params = qs.parse(req.url.split("?")[1]);
    var fn = params.callback;
 
    // jsonp返回設(shè)置
    res.writeHead(200, { "Content-Type": "text/javascript" });
    res.write(fn + "(" + JSON.stringify(params) + ")");
 
    res.end();
});
server.listen("8080");

jsoup缺點(diǎn)只能實(shí)現(xiàn)get請(qǐng)求

CORS：跨源資源共享 Cross-Origin Resource Sharing(CORS)，通常服務(wù)器設(shè)置，若帶cookie請(qǐng)求，則前后端都需要設(shè)置
后端常見(jiàn)設(shè)置
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 若有端口需寫(xiě)全（協(xié)議+域名+端口），允許那些外源請(qǐng)求
response.setHeader("Access-Control-Allow-Credentials", "true"); //是否需要驗(yàn)證

前端示例

原生

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端設(shè)置是否帶cookie
xhr.withCredentials = true;
xhr.open("post", "http://www.domain2.com:8080/login", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("user=admin");
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }

jquery
$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端設(shè)置是否帶cookie
   },
   crossDomain: true,   // 會(huì)讓請(qǐng)求頭中包含跨域的額外信息，但不會(huì)含cookie
    ...
});

postMessage(data,origin)方法接受兩個(gè)參數(shù)
demo

a.html



b.html  與a.html不同源

osi模型

七層結(jié)構(gòu)：物理層、數(shù)據(jù)鏈路層、網(wǎng)絡(luò)層、傳輸層、會(huì)話層、表示層、應(yīng)用層
tcp ucp屬于傳輸層；http屬于應(yīng)用層

http2.0 http1

HTTP2.0的基本單位為二進(jìn)制幀

HTTP2.0中幀具有優(yōu)先級(jí)

HTTP2.0的多路復(fù)用（ 1次連接）

HTTP2.0壓縮消息頭

HTTP2.0服務(wù)端推送

HTTP2.0只適用于HTTPS的場(chǎng)景

生命周期順序

組件通信

1.父?jìng)髯佑胮rops,父用子用ref 子調(diào)父用$emit,無(wú)關(guān)系用Bus

Vuex

組件通信庫(kù)，可以避免子組件無(wú)法改變props的弊端等
mutations 同步操作， 用于改變狀態(tài) 官方不推薦異步
action 執(zhí)行多個(gè)mutaions，官方推薦異步操作
mapState、mapGetters、mapActions使用示例

后兩者類似

VueRouter

定義
var routes = [
    {
        path:"/one",

        component:導(dǎo)入的組件1
    },
    {
        path:"/two",
        component:導(dǎo)入的組件2
    },
];
// 定義路由組件
var router = new VueRouter({
    routes
});
// 定義路由
new Vue({
    el:"#box",
    router
});
 訪問(wèn)設(shè)定的路由后 會(huì)將替換成相應(yīng)的模版
 html訪問(wèn)方式 One(類似a標(biāo)簽)
 js訪問(wèn)方式 this.$router.push("/one"); 
 replace方式 替換當(dāng)前頁(yè)面
 攜帶的參數(shù) 可以通過(guò)this.$route.query.xxxx來(lái)獲取

Vue雙向綁定

原理：利用了 Object.defineProperty() 這個(gè)方法重新定義了對(duì)象獲取屬性值(get)和設(shè)置屬性值(set)的操作來(lái)實(shí)現(xiàn)的。
缺點(diǎn)：雙向數(shù)據(jù)流是自動(dòng)管理狀態(tài)的, 但是在實(shí)際應(yīng)用中會(huì)有很多不得不手動(dòng)處理狀態(tài)變化的邏輯, 使得程序復(fù)雜度上升, 難以調(diào)試。

computed watch methods

用法：
區(qū)別：

前兩者自動(dòng)追蹤數(shù)據(jù)，執(zhí)行相關(guān)函數(shù)，最后一個(gè)手動(dòng)調(diào)用；

computed是計(jì)算屬性，用法與data一致

watch像事件監(jiān)聽(tīng)，對(duì)象發(fā)生變化時(shí)，執(zhí)行相關(guān)操作

methods與js中執(zhí)行方法類似

computed通常只有g(shù)et屬性

數(shù)據(jù)變化的同時(shí)進(jìn)行異步操作或者是比較大的開(kāi)銷，那么watch為最佳選擇

watch的對(duì)象必須事先聲明

各種排序?qū)崿F(xiàn)

相關(guān)數(shù)據(jù)

// 冒泡排序: 比較兩個(gè)相鄰的項(xiàng)，如果第一個(gè)大于第二個(gè)則交換他們的位置,元素項(xiàng)向上移動(dòng)至正確的順序，就好像氣泡往上冒一樣
冒泡demo:
function bubbleSort(arr) {
    let len = arr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) {        //相鄰元素兩兩對(duì)比
                [arr[j + 1], arr[j]] = [arr[j], arr[j + 1]];
            }
        }
    }
    return arr;
}
// 1) 首先，在數(shù)組中選擇一個(gè)中間項(xiàng)作為主元
// 2) 創(chuàng)建兩個(gè)指針，左邊的指向數(shù)組第一個(gè)項(xiàng)，右邊的指向最后一個(gè)項(xiàng)，移動(dòng)左指針，直到找到一個(gè)比主元大的項(xiàng)，接著，移動(dòng)右邊的指針，直到找到一個(gè)比主元小的項(xiàng)，然后交換它們。重復(fù)這個(gè)過(guò)程，直到
// 左側(cè)的指針超過(guò)了右側(cè)的指針。這個(gè)使比主元小的都在左側(cè)，比主元大的都在右側(cè)。這一步叫劃分操作
// 3) 接著，算法對(duì)劃分后的小數(shù)組（較主元小的值組成的的小數(shù)組， 以及較主元大的值組成的小數(shù)組）重復(fù)之前的兩個(gè)步驟，直到排序完成
快排demo:
function quickSort(arr, left, right) {
    let len = arr.length;
    let partitionIndex;
    left = typeof left !== "number" ? 0 : left;
    right = typeof right !== "number" ? len - 1 : right;
    if (left < right) {
        partitionIndex = partition(arr, left, right);
        quickSort(arr, left, partitionIndex - 1);
        quickSort(arr, partitionIndex + 1, right);
    }
    return arr;
}

function partition(arr, left, right) {     //分區(qū)操作
    let pivot = left;                      //設(shè)定基準(zhǔn)值（pivot）
    let index = pivot + 1;
    for (let i = index; i <= right; i++) {
        if (arr[i] < arr[pivot]) {
            [arr[i], arr[index]] = [arr[index], arr[i]];
            index++;
        }
    }
    [arr[pivot], arr[index - 1]] = [arr[index - 1], arr[pivot]];
    return index - 1;
}
// 選擇排序：大概思路是找到最小的放在第一位，找到第二小的放在第二位，以此類推 算法復(fù)雜度O(n^2)
選擇demo:
function selectionSort(arr) {
    let len = arr.length;
    let minIndex;
    for (let i = 0; i < len - 1; i++) {
        minIndex = i;
        for (let j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {     //尋找最小的數(shù)
                minIndex = j;                 //將最小數(shù)的索引保存
            }
        }
        [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
    }
return arr;
}
// 插入排序：每次排一個(gè)數(shù)組項(xiàng)，假設(shè)數(shù)組的第一項(xiàng)已經(jīng)排序，接著，把第二項(xiàng)與第一項(xiàng)進(jìn)行對(duì)比，第二項(xiàng)是該插入到第一項(xiàng)之前還是之后，第三項(xiàng)是該插入到第一項(xiàng)之前還是第一項(xiàng)之后還是第三項(xiàng)
插入demo:
function insertionSort(arr) {
    let len = arr.length;
    let preIndex, current;
    for (let i = 1; i < len; i++) {
        preIndex = i - 1;
        current = arr[i];
        while (preIndex >= 0 && arr[preIndex] > current) {
            arr[preIndex + 1] = arr[preIndex];
            preIndex--;
        }
        arr[preIndex + 1] = current;
    }
    return arr;
}
// 歸并排序：Mozilla Firefox 使用歸并排序作為Array.prototype.sort的實(shí)現(xiàn)，而chrome使用快速排序的一個(gè)變體實(shí)現(xiàn)的,前面三種算法性能不好，但歸并排序性能不錯(cuò) 算法復(fù)雜度O(nlog^n)
// 歸并排序是一種分治算法。本質(zhì)上就是把一個(gè)原始數(shù)組切分成較小的數(shù)組，直到每個(gè)小數(shù)組只有一個(gè)位置，接著把小數(shù)組歸并成較大的數(shù)組，在歸并過(guò)程中也會(huì)完成排序，直到最后只有一個(gè)排序完畢的大數(shù)組
歸并demo:
function mergeSort(arr) {  //采用自上而下的遞歸方法
    let len = arr.length;
    if(len < 2) {
        return arr;
    }
    let middle = Math.floor(len / 2),
    left = arr.slice(0, middle),
    right = arr.slice(middle);
    return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right){
    let result = [];
    while (left.length && right.length) {
        if (left[0] <= right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());
        }
    }
    result.push(...left);
    result.push(...right);
    return result;
}
//堆排序：堆排序把數(shù)組當(dāng)中二叉樹(shù)來(lái)排序而得名。
// 1）索引0是樹(shù)的根節(jié)點(diǎn)；2）除根節(jié)點(diǎn)為，任意節(jié)點(diǎn)N的父節(jié)點(diǎn)是N/2；3）節(jié)點(diǎn)L的左子節(jié)點(diǎn)是2*L；4）節(jié)點(diǎn)R的右子節(jié)點(diǎn)為2*R + 1
// 本質(zhì)上就是先構(gòu)建二叉樹(shù)，然后把根節(jié)點(diǎn)與最后一個(gè)進(jìn)行交換，然后對(duì)剩下對(duì)元素進(jìn)行二叉樹(shù)構(gòu)建，進(jìn)行交換，直到剩下最后一個(gè)
堆demo:
var len;    //因?yàn)槁暶鞯亩鄠€(gè)函數(shù)都需要數(shù)據(jù)長(zhǎng)度，所以把len設(shè)置成為全局變量

function buildMaxHeap(arr) {   //建立大頂堆
    len = arr.length;
    for (let i = Math.floor(len / 2); i >= 0; i--) {
        heapify(arr, i);
    }
}

function heapify(arr, i) {     //堆調(diào)整
    let left = 2 * i + 1;
    let right = 2 * i + 2;
    let largest = i;
    if (left < len && arr[left] > arr[largest]) {
        largest = left;
    }
    if (right < len && arr[right] > arr[largest]) {
        largest = right;
    }
    if (largest !== i) {
        [arr[i], arr[largest]] = [arr[largest], arr[i]];
        heapify(arr, largest);
    }
}

function heapSort(arr) {
    buildMaxHeap(arr);
    for (let i = arr.length - 1; i > 0; i--) {
        [arr[0],arr[i]]=[arr[i],arr[0]];
        len--;
        heapify(arr, 0);
    }
    return arr;
}

二分查找

思路
（1）首先，從有序數(shù)組的中間的元素開(kāi)始搜索，如果該元素正好是目標(biāo)元素（即要查找的元素），則搜索過(guò)程結(jié)束，否則進(jìn)行下一步。
（2）如果目標(biāo)元素大于或者小于中間元素，則在數(shù)組大于或小于中間元素的那一半?yún)^(qū)域查找，然后重復(fù)第一步的操作。
（3）如果某一步數(shù)組為空，則表示找不到目標(biāo)元素。

// 非遞歸算法
function binary_search(arr, key) {
    let low = 0;
    let high = arr.length - 1;
    while(low <= high){
        let mid = parseInt((high + low) / 2);
        if(key === arr[mid]){
            return  mid;
        }else if(key > arr[mid]){
            low = mid + 1;
        }else if(key < arr[mid]){
            high = mid -1;
        }else{
            return -1;
        }
    }
}
      

// 遞歸算法
function binary_search(arr,low, high, key) {
    if (low > high){
        return -1;
    }
    let mid = parseInt((high + low) / 2);
    if(arr[mid] === key){
        return mid;
    }else if (arr[mid] > key){
        high = mid - 1;
        return binary_search(arr, low, high, key);
    }else if (arr[mid] < key){
        low = mid + 1;
        return binary_search(arr, low, high, key);
    }
};

二叉樹(shù)相關(guān)

創(chuàng)建
function Node(data,left,right){
    this.data = data;//數(shù)值
    this.left = left;//左節(jié)點(diǎn)
    this.right = right;//右節(jié)點(diǎn)
};
插入二叉樹(shù)
function insert(node,data){
    //創(chuàng)建一個(gè)新的節(jié)點(diǎn)
    let newNode  = new Node(data,null,null);
    //判斷是否存在根節(jié)點(diǎn)，沒(méi)有將新節(jié)點(diǎn)存入
    if(node == null){
        node = newNode;
    }else{
        //獲取根節(jié)點(diǎn)
        let current = node;
        let parent;
        while(true){
            //將當(dāng)前節(jié)點(diǎn)保存為父節(jié)點(diǎn)
            parent = current;
            //將小的數(shù)據(jù)放在左節(jié)點(diǎn)
            if(data < current.data){
                //獲取當(dāng)前節(jié)點(diǎn)的左節(jié)點(diǎn)
                //判斷當(dāng)前節(jié)點(diǎn)下的左節(jié)點(diǎn)是否有數(shù)據(jù)
                current = current.left;
                if(current == null){
                    //如果沒(méi)有數(shù)據(jù)將新節(jié)點(diǎn)存入當(dāng)前節(jié)點(diǎn)下的左節(jié)點(diǎn)
                    parent.left = newNode;
                    break;
                }
            }else{
                current = current.right;
                if(current == null){
                    parent.right = newNode;
                    break;
                }
            }
        }    
    }
}
翻轉(zhuǎn)二叉樹(shù)
function invertTree(node) {
    if (node !== null) {
        node.left, node.right = node.left, node.right;
        invertTree(node.left);
        invertTree(node.right);
    }
    return node;
}

查找鏈表中倒數(shù)第k個(gè)結(jié)點(diǎn)
2個(gè)思路
1：先遍歷出長(zhǎng)度，然后查找長(zhǎng)度-k+1的值
2：2個(gè)指針，一個(gè)指針先走k-1，然后兩個(gè)一起走到底部，后者就是結(jié)果

XSS CSRF

XSS(跨站腳本攻擊)，惡意的注入html代碼，其他用戶訪問(wèn)時(shí)，會(huì)被執(zhí)行
特點(diǎn)：能注入惡意的HTML/JavaScript代碼到用戶瀏覽的網(wǎng)頁(yè)上，從而達(dá)到Cookie資料竊取、會(huì)話劫持、釣魚(yú)欺騙等攻擊
防御手段：

瀏覽器禁止頁(yè)面的JS訪問(wèn)帶有HttpOnly屬性的Cookie

兩端進(jìn)行輸入格式檢查

通過(guò)編碼轉(zhuǎn)義的方式進(jìn)行輸出檢查

CSRF(攻擊跨站請(qǐng)求偽造)
特點(diǎn)：重要操作的所有參數(shù)都是可以被攻擊者猜測(cè)到的。攻擊者預(yù)測(cè)出URL的所有參數(shù)與參數(shù)值，才能成功地構(gòu)造一個(gè)偽造的請(qǐng)求。
防御手段：

token驗(yàn)證機(jī)制，比如請(qǐng)求數(shù)據(jù)字段中添加一個(gè)token，響應(yīng)請(qǐng)求時(shí)校驗(yàn)其有效性

用戶操作限制，比如驗(yàn)證碼（繁瑣，用戶體驗(yàn)差）

請(qǐng)求來(lái)源限制，比如限制HTTP Referer才能完成操作（防御效果相比較差）

實(shí)踐中常用第一種

打包體積

優(yōu)化思路

提取第三方庫(kù)或通過(guò)引用外部文件的方式引入第三方庫(kù)

代碼壓縮插件UglifyJsPlugin

服務(wù)器啟用gzip壓縮

按需加載資源文件 require.ensure

優(yōu)化devtool中的source-map

剝離css文件，多帶帶打包

去除不必要插件，通常就是開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境用同一套配置文件導(dǎo)致

打包效率

開(kāi)發(fā)環(huán)境采用增量構(gòu)建，啟用熱更新

開(kāi)發(fā)環(huán)境不做無(wú)意義的工作如提取css計(jì)算文件hash等

配置devtool

選擇合適的loader

個(gè)別loader開(kāi)啟cache 如babel-loader

第三方庫(kù)采用引入方式

提取公共代碼

優(yōu)化構(gòu)建時(shí)的搜索路徑 指明需要構(gòu)建目錄及不需要構(gòu)建目錄

模塊化引入需要的部分

Loader

編寫(xiě)一個(gè)loader

loader就是一個(gè)node模塊，它輸出了一個(gè)函數(shù)。當(dāng)某種資源需要用這個(gè)loader轉(zhuǎn)換時(shí)，這個(gè)函數(shù)會(huì)被調(diào)用。并且，這個(gè)函數(shù)可以通過(guò)提供給它的this上下文訪問(wèn)Loader API。
reverse-txt-loader
定義
module.exports = function(src) {
  //src是原文件內(nèi)容（abcde），下面對(duì)內(nèi)容進(jìn)行處理，這里是反轉(zhuǎn)
  var result = src.split("").reverse().join(""); 
  //返回JavaScript源碼，必須是String或者Buffer
  return `module.exports = "${result}"`;
}
使用
{
    test: /.txt$/,
    use: [
        {
            "./path/reverse-txt-loader"
        }
    ]
},

plugins

使用范圍更廣，通常只需要require()然后添加到plugins數(shù)組中，且需要new一個(gè)

URL到界面顯示發(fā)生了什么

DNS解析

先本地緩存找，在一層層找
將常見(jiàn)的地址解析成唯一對(duì)應(yīng)的ip地址基本順序?yàn)椋罕镜赜蛎?wù)器->根域名服務(wù)器->com頂級(jí)域名服務(wù)器依次類推下去,找到后記錄并緩存下來(lái)如www.google.com為
. -> .com -> google.com. -> www.google.com.

TCP連接

三次握手，只要沒(méi)收到確認(rèn)消息就要重新發(fā)

1. 主機(jī)向服務(wù)器發(fā)送一個(gè)建立連接的請(qǐng)求（您好，我想認(rèn)識(shí)您）；
2. 服務(wù)器接到請(qǐng)求后發(fā)送同意連接的信號(hào)（好的，很高興認(rèn)識(shí)您）；
3. 主機(jī)接到同意連接的信號(hào)后，再次向服務(wù)器發(fā)送了確認(rèn)信號(hào)（我也很高興認(rèn)識(shí)您），自此，主機(jī)與服務(wù)器兩者建立了連接。

發(fā)送HTTP請(qǐng)求

瀏覽器會(huì)分析這個(gè)url，并設(shè)置好請(qǐng)求報(bào)文發(fā)出。請(qǐng)求報(bào)文中包括請(qǐng)求行、請(qǐng)求頭、空行、請(qǐng)求主體。https默認(rèn)請(qǐng)求端口443， http默認(rèn)80。
常見(jiàn)的http請(qǐng)求如下

POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley
第一部分：請(qǐng)求行，第一行說(shuō)明是post請(qǐng)求，以及http1.1版本。
第二部分：請(qǐng)求頭部，第二行至第六行。
第三部分：空行，第七行的空行。
第四部分：請(qǐng)求數(shù)據(jù)，第八行。
4. 服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文
后端處理返回http報(bào)文如下

HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8


      
      
            
      

第一行為狀態(tài)行，（HTTP/1.1）表明HTTP版本為1.1版本，狀態(tài)碼為200，狀態(tài)消息為（ok）
第二行和第三行為消息報(bào)頭，
Date:生成響應(yīng)的日期和時(shí)間；Content-Type:指定了MIME類型的HTML(text/html),編碼類型是UTF-8
第三部分：空行，消息報(bào)頭后面的空行是必須的
第四部分：響應(yīng)正文，服務(wù)器返回給客戶端的文本信息。
空行后面的html部分為響應(yīng)正文。

瀏覽器解析渲染頁(yè)面

通過(guò)HTML解析器解析HTML文檔，構(gòu)建一個(gè)DOM Tree，同時(shí)通過(guò)CSS解析器解析HTML中存在的CSS，構(gòu)建Style Rules，兩者結(jié)合形成一個(gè)Attachment。

通過(guò)Attachment構(gòu)造出一個(gè)呈現(xiàn)樹(shù)（Render Tree）

Render Tree構(gòu)建完畢，進(jìn)入到布局階段（layout/reflow），將會(huì)為每個(gè)階段分配一個(gè)應(yīng)出現(xiàn)在屏幕上的確切坐標(biāo)。

最后將全部的節(jié)點(diǎn)遍歷繪制出來(lái)后，一個(gè)頁(yè)面就展現(xiàn)出來(lái)了。

遇到script會(huì)停下來(lái)執(zhí)行，所以通常把script放在底部

連接結(jié)束

組件封裝

目的：為了重用，提高開(kāi)發(fā)效率和代碼質(zhì)量
注意：低耦合，單一職責(zé)，可復(fù)用性，可維護(hù)性
常用操作：

分析布局

初步開(kāi)發(fā)

化繁為簡(jiǎn)

組件抽象

JS異步加載

動(dòng)態(tài)生成script標(biāo)簽

添加h5的async defer屬性，前者亂序不適合依賴性加載

async 是“下載完就執(zhí)行”， defer 是“渲染完再執(zhí)行”

css與js動(dòng)畫(huà)差異

css性能好

css代碼邏輯相對(duì)簡(jiǎn)單

js動(dòng)畫(huà)控制好

js兼容性好

js可實(shí)現(xiàn)的動(dòng)畫(huà)多

js可以添加事件

負(fù)載均衡

多臺(tái)服務(wù)器共同協(xié)作，不讓其中某一臺(tái)或幾臺(tái)超額工作，發(fā)揮服務(wù)器的最大作用

http重定向負(fù)載均衡：調(diào)度者根據(jù)策略選擇服務(wù)器以302響應(yīng)請(qǐng)求，缺點(diǎn)只有第一次有效果，后續(xù)操作維持在該服務(wù)器

dns負(fù)載均衡：解析域名時(shí)，訪問(wèn)多個(gè)ip服務(wù)器中的一個(gè)（可監(jiān)控性較弱）

反向代理負(fù)載均衡：訪問(wèn)統(tǒng)一的服務(wù)器，由服務(wù)器進(jìn)行調(diào)度訪問(wèn)實(shí)際的某個(gè)服務(wù)器，對(duì)統(tǒng)一的服務(wù)器要求大，性能受到 服務(wù)器群的數(shù)量

CDN

內(nèi)容分發(fā)網(wǎng)絡(luò)，基本思路是盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母臁⒏€(wěn)定。

內(nèi)存泄漏

定義：程序中己動(dòng)態(tài)分配的堆內(nèi)存由于某種原因程序未釋放或無(wú)法釋放引發(fā)的各種問(wèn)題
js中可能出現(xiàn)的內(nèi)存泄漏情況
結(jié)果：變慢，崩潰，延遲大等
原因：

全局變量

dom清空時(shí)，還存在引用

ie中使用閉包

定時(shí)器未清理

子元素存在引起的內(nèi)存泄露

避免策略：

減少不必要的全局變量，或者生命周期較長(zhǎng)的對(duì)象，及時(shí)對(duì)無(wú)用的數(shù)據(jù)進(jìn)行垃圾回收；

注意程序邏輯，避免“死循環(huán)”之類的 ；

避免創(chuàng)建過(guò)多的對(duì)象 原則：不用了的東西要及時(shí)歸還。

減少層級(jí)過(guò)多的引用

babel原理

ES6、7代碼輸入 -> babylon進(jìn)行解析 -> 得到AST（抽象語(yǔ)法樹(shù)）-> plugin用babel-traverse對(duì)AST樹(shù)進(jìn)行遍歷轉(zhuǎn)譯 ->得到新的AST樹(shù)->用babel-generator通過(guò)AST樹(shù)生成ES5代碼、

promise

特性：Promise 對(duì)象的錯(cuò)誤具有冒泡性質(zhì)，會(huì)一直向后傳遞，直到被捕獲為止，也即是說(shuō)，錯(cuò)誤總會(huì)被下一個(gè)catch語(yǔ)句捕獲

js自定義事件

三要素：
document.createEvent()
event.initEvent()
element.dispatchEvent()

demo:
(en:自定義事件名稱，fn:事件處理函數(shù)，addEvent:為DOM元素添加自定義事件，triggerEvent:觸發(fā)自定義事件)
window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEvent("test",function(){console.log("handler1")});
    demo.addEvent("test",function(){console.log("handler2")});
    demo.onclick = function(){
        this.triggerEvent("test");
    }
}
Element.prototype.addEvent = function(en,fn){
    this.pools = this.pools || {};
    if(en in this.pools){
        this.pools[en].push(fn);
    }else{
        this.pools[en] = [];
        this.pools[en].push(fn);
    }
}
Element.prototype.triggerEvent  = function(en){
    if(en in this.pools){
        var fns = this.pools[en];
        for(var i=0,il=fns.length;i
es6模塊 commonjs  amd cmd

CommonJS 的規(guī)范中，每個(gè) JavaScript 文件就是一個(gè)獨(dú)立的模塊上下文（module context），在這個(gè)上下文中默認(rèn)創(chuàng)建的屬性都是私有的。也就是說(shuō)，在一個(gè)文件定義的變量（還包括函數(shù)和類），都是私有的，對(duì)其他文件是不可見(jiàn)的。
CommonJS是同步加載模塊,在瀏覽器中會(huì)出現(xiàn)堵塞情況，所以不適用
AMD 異步，需要定義回調(diào)define方式
es6 一個(gè)模塊就是一個(gè)獨(dú)立的文件，該文件內(nèi)部的所有變量，外部無(wú)法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量
es6還可以導(dǎo)出類、方法，自動(dòng)適用嚴(yán)格模式

前后端路由差別
1.后端每次路由請(qǐng)求都是重新訪問(wèn)服務(wù)器
2.前端路由實(shí)際上只是JS根據(jù)URL來(lái)操作DOM元素，根據(jù)每個(gè)頁(yè)面需要的去服務(wù)端請(qǐng)求數(shù)據(jù)，返回?cái)?shù)據(jù)后和模板進(jìn)行組合。