原文鏈接：https://segmentfault.com/a/1190000015946529?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly

一鹃祖、CSS篇

1念祭、盒子模型

css中的盒子模型包括IE盒子模型和標(biāo)準(zhǔn)的W3C盒子模型。其盒子模型還是要?dú)w宗于box-sizing的屬性,盒子模型對(duì)應(yīng)的分被為border-box,content-box。所謂的標(biāo)準(zhǔn)盒子模型(border-box):width = 左右border+左右padding+contentwidth寝贡，而我們的IE盒子模型(border-box): width = content+padding+border 元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。

2疟丙、前端一像素問題（畫一條0.5px的線）

方法一：transform:scaleY（0.5）使用偽元素設(shè)置1px的邊框嵌巷，然后對(duì)邊框進(jìn)行縮放(scaleY)
實(shí)現(xiàn)思路：
1、設(shè)定目標(biāo)元素的參考位置
2丹皱、給目標(biāo)元素添加一個(gè)偽元素before或者after妒穴，并設(shè)置絕對(duì)定位
3、給偽元素添加1px的邊框
4摊崭、用box-sizing: border-box 屬性把邊框都包進(jìn)寬和高里面
5讼油、寬和高設(shè)置為 200%
6、整個(gè)盒子模型縮小為0.5
7呢簸、調(diào)整盒子模型的位置矮台，以左上角為基準(zhǔn) transform-origin: 0
方法二： border-image 設(shè)置圖片的邊框

3、transition和animation的區(qū)別

Animation和transition大部分屬性是相同的根时，他們都是隨時(shí)間改變?cè)氐膶傩灾凳莺眨麄兊闹饕獏^(qū)別是transition需要觸發(fā)一個(gè)事件才能改變屬性，
而animation不需要觸發(fā)任何事件的情況下才會(huì)隨時(shí)間改變屬性值蛤迎，并且transition為2幀确虱，從from .... to，而animation可以一幀一幀的替裆。

4校辩、不定高的DIV居中

1.使用flex

在父盒子設(shè)置display: flex; justify-content: center;align-items: center

2.使用css的transform

父盒子設(shè)置:display:relative
Div 設(shè)置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

3.display：table-cell

父盒子設(shè)置:display:table-cell; text-align:center;vertical-align:middle;
Div 設(shè)置: display:inline-block;vertical-align:middle;

5辆童、浮動(dòng)

• 特性：浮動(dòng)元素影響的不僅是自己宜咒，他會(huì)影響周圍元素對(duì)其進(jìn)行環(huán)繞
• 為什么要清除浮動(dòng)？（解決父元素高度坍陷問題）
  一個(gè)塊級(jí)元素如果沒有設(shè)置height,其height由子元素?fù)伍_胸遇，對(duì)子元素使用了浮動(dòng)之后荧呐，子元素就會(huì)脫離文檔流也就是說，父及元素中沒有內(nèi)容可以撐開其高度，這樣父級(jí)元素height就會(huì)被忽略倍阐。這就是所謂的高度坍塌
• 如何清除浮動(dòng)

1.給父級(jí)元素定義高度
2.讓父級(jí)元素也浮動(dòng)
3.父級(jí)定義display:table
4.父元素設(shè)置overflow:hidden
5.clearfix:使用內(nèi)容生成的方式清除浮動(dòng)
.clearfix:after { // :after選擇器向選定的元素之后插入內(nèi)容
content:""; // 生成內(nèi)容為空
display: block; // 塊級(jí)元素顯示
clear:both; // 清除前面元素
}
不破壞文檔流概疆，沒有副作用

6、css選擇器分類

基本的：
1.id選擇器（id="name"）
2.類選擇器（class="head"）
3.標(biāo)簽選擇器（body, div, ul, li）
4.全局選擇器（*）
復(fù)雜的：
1.組合選擇器（.head .head_logo）
2.后代選擇器 （#head .nav ul li 從父集到子孫集）
3.群組選擇器 (div, span, img {color:Red} 具有相同樣式的標(biāo)簽分組顯示)
4.繼承選擇器
5.偽類選擇器（鏈接樣式峰搪，a元素的偽類）
6.子選擇器（div>p, 帶大于號(hào)>）
7.CSS相鄰相鄰兄弟選擇器（h1+p, 帶加號(hào)+）

優(yōu)先級(jí)：
不同級(jí)別：總結(jié)排序：!important > 行內(nèi)樣式 > ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
1.屬性后面加!import 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素內(nèi)的樣式
3.id選擇器
4.類選擇器
5.標(biāo)簽選擇器
6.通配符選擇器（*）
7.瀏覽器自定義或繼承
同一級(jí)別：后寫的會(huì)覆蓋先寫的
css選擇器的解析原則：選擇器定位DOM元素是從右往左的方向岔冀，這樣可以盡早的過濾掉一些不必要的樣式規(guī)則和元素

7、如何畫一個(gè)三角形

設(shè)置寬高概耻，然后用border去畫
width: 0;
height: 0;
border-bottom: 100px solid cyan;
border-left: 50px solid transparent;
border-right: 50px solid transparent;

8使套、使元素消失的方法

visibility:hidden、display:none鞠柄、z-index=-1侦高、opacity：0
1.opacity：0,該元素隱藏起來了，但不會(huì)改變頁面布局厌杜，并且奉呛，如果該元素已經(jīng)綁定了一些事件，如click事件也能觸發(fā)
2.visibility:hidden,該元素隱藏起來了夯尽，但不會(huì)改變頁面布局瞧壮，但是不會(huì)觸發(fā)該元素已經(jīng)綁定的事件
3.display:node, 把元素隱藏起來，并且會(huì)改變頁面布局匙握，可以理解成在頁面中把該元素刪掉

9咆槽、為什么css放在頂部而js寫在后面

1.瀏覽器預(yù)先加載css后，可以不必等待HTML加載完畢就可以渲染頁面了
2.其實(shí)HTML渲染并不會(huì)等到完全加載完在渲染頁面圈纺，而是一邊解析DOM一邊渲染秦忿。
3.js寫在尾部，主要是因?yàn)閖s主要扮演事件處理的功能赠堵，一方面很多操作是在頁面渲染后才執(zhí)行的小渊。另一方面可以節(jié)省加載時(shí)間法褥，使頁面能夠更加的加載茫叭，提高用戶的良好體驗(yàn)
但是隨著JS技術(shù)的發(fā)展，JS也開始承擔(dān)頁面渲染的工作半等。比如我們的UI其實(shí)可以分被對(duì)待揍愁，把渲染頁面的js放在前面，時(shí)間處理的js放在后面

二杀饵、布局篇

1莽囤、flex彈性布局

可以簡單的使一個(gè)元素居中（包括水平和垂直居中）柵格式系統(tǒng)布局，bootstrap grid

2切距、三欄式布局

三欄是布局（兩邊兩欄寬度固定朽缎，中間欄寬度自適應(yīng)）

• 方案一：position（絕對(duì)定位法） center的div需要放在最后面
  絕對(duì)定位法原理將左右兩邊使用absolute定位，因?yàn)榻^對(duì)定位使其脫離文檔流，后面的center會(huì)自然流動(dòng)到他們的上賣弄话肖，然后margin屬性北秽，留出左右兩邊的寬度。就可以自適應(yīng)了最筒。
• 方案二：float 自身浮動(dòng)法 center的div需要放到后面
  自身浮動(dòng)法的原理就是對(duì)左右使用float:left和float：right贺氓，float使左右兩個(gè)元素脫離文檔流，中間的正常文檔流中床蜘，使用margin指定左右外邊距對(duì)其進(jìn)行一個(gè)定位辙培。
• 方案三(圣杯布局)：原理就是margin負(fù)值法。使用圣杯布局首先需要在center元素外部包含一個(gè)div,包含的div需要設(shè)置float屬性使其形成一個(gè)BFC邢锯，并且這個(gè)寬度和margin的負(fù)值進(jìn)行匹配

3扬蕊、左邊定寬，右邊自適應(yīng)

• 方案一：左邊設(shè)置浮動(dòng)丹擎，右邊寬度設(shè)置100% .left{float:left} .right:{width:100%}
• 方案二：左設(shè)置浮動(dòng)厨相，右用cacl去補(bǔ)寬度計(jì)算 .left{float:left} .right:{width:cacl(100vw-200px}
• 方案三：父容器設(shè)置display：flex right部分是設(shè)置flex：1
• 方案四：右邊div套個(gè)包裹、并前置鸥鹉、左及包裹 雙浮動(dòng)

4蛮穿、水平居中

行內(nèi)元素居中（父元素text-align:center）
塊狀元素居中（塊狀元素沒發(fā)用text-align）
1.寬度一定：margin:auto
2.寬度不定：塊級(jí)變行內(nèi)，然后在父上text-align

5毁渗、BFC

理解：BFC是css布局的一個(gè)概念践磅，是一塊獨(dú)立的渲染區(qū)域，一個(gè)環(huán)境灸异，里面的元素不會(huì)影響到外部的元素

如何生成BFC：（脫離文檔流）
【1】根元素府适，即HTML元素（最大的一個(gè)BFC）
【2】float的值不為none
【3】position的值為absolute或fixed
【4】overflow的值不為visible（默認(rèn)值。內(nèi)容不會(huì)被修剪肺樟，會(huì)呈現(xiàn)在元素框之外）
【5】display的值為inline-block檐春、table-cell、table-caption

BFC布局規(guī)則：1.內(nèi)部的Box會(huì)在垂直方向么伯，一個(gè)接一個(gè)地放置疟暖。
2.屬于同一個(gè)BFC的兩個(gè)相鄰的Box的margin會(huì)發(fā)生重疊
3.BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素田柔。反之也如此, 文字環(huán)繞效果俐巴，設(shè)置float
4.BFC的區(qū)域不會(huì)與float box重疊。
5.計(jì)算BFC的高度硬爆，浮動(dòng)元素也參與計(jì)算

BFC作用：1.自適應(yīng)兩欄布局
2.可以阻止元素被浮動(dòng)元素覆蓋
3.可以包含浮動(dòng)元素---清除內(nèi)部浮動(dòng) 原理:：觸發(fā)父div的BFC屬性蛔六，使下面的子div都處在父div的同一個(gè)BFC區(qū)域之內(nèi)
4.分屬于不同的BFC時(shí)萌朱，可以阻止margin重疊

三馍盟、js篇

1梆奈、前端事件流

事件流描述的是從頁面中接受事件的順序劣光，可以分為：事件捕獲階段 處于目標(biāo)階段 事件冒泡階段其中需要主要的是addeventListener這個(gè)函數(shù) 最后這個(gè)布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序糟把；如果是false赎线，表示在冒泡階段調(diào)用事件處理程序。

• 1糊饱、事件捕獲階段：實(shí)際目標(biāo)div在捕獲階段不會(huì)接受事件垂寥，也就是在捕獲階段，事件從document到<html>再到<body>就停止了
• 2另锋、處于目標(biāo)階段：事件在div發(fā)生并處理滞项，但是事件處理會(huì)被看成是冒泡階段的一部分。
• 3夭坪、冒泡階段：事件又傳播回文檔
  阻止冒泡事件event.stopPropagation()

function stopBubble(e) {
  if (e && e.stopPropagation) { // 如果提供了事件對(duì)象event 這說明不是IE瀏覽器
    e.stopPropagation()
  } else {
    window.event.cancelBubble = true //IE方式阻止冒泡
  }
}

阻止默認(rèn)行為event.preventDefault()

function stopDefault(e) {
  if (e && e.preventDefault) {
    e.preventDefault()
  } else {
    // IE瀏覽器阻止函數(shù)器默認(rèn)動(dòng)作的行為
    window.event.returnValue = false
    }
}

事件如何先捕獲后冒泡：
在DOM標(biāo)準(zhǔn)事件模型中文判，是先捕獲后冒泡。但是如果要實(shí)現(xiàn)先冒泡后捕獲的效果室梅，對(duì)于同一個(gè)事件戏仓，監(jiān)聽捕獲和冒泡，分別對(duì)應(yīng)相應(yīng)的處理函數(shù)亡鼠，監(jiān)聽到捕獲事件赏殃，先暫緩執(zhí)行，直到冒泡事件被捕獲后再執(zhí)行捕獲事件间涵。
哪些事件不支持冒泡事件：

鼠標(biāo)事件：mouserleave mouseenter
焦點(diǎn)事件：blur focus
UI事件：scroll resize

2仁热、事件委托（提高性能）

簡介：事件委托指的是，不在事件的（直接dom）上設(shè)置監(jiān)聽函數(shù)勾哩，而是在其父元素上設(shè)置監(jiān)聽函數(shù)抗蠢。通過事件冒泡，父元素可以監(jiān)聽到子元素上事件的觸發(fā)通過判斷事件發(fā)生元素DOM的類型思劳，來做出不同的響應(yīng)迅矛。

• 舉例子： 最經(jīng)典的就是ui和li標(biāo)簽的事件監(jiān)聽，比如我們?cè)谔砑邮录臅r(shí)候潜叛，采用事件委托機(jī)制秽褒，不會(huì)在li標(biāo)簽上直接添加，而是在ul父元素上添加
• 好處：可以比較合適動(dòng)態(tài)元素的綁定钠导，新添加的子元素也會(huì)監(jiān)聽函數(shù)震嫉，也可以有事件觸發(fā)機(jī)制

3森瘪、js的new操作符做了什么

new操作符創(chuàng)建了一個(gè)空對(duì)象牡属，這個(gè)對(duì)象原型指向構(gòu)造函數(shù)的prototype，執(zhí)行構(gòu)造函數(shù)后返回這個(gè)對(duì)象扼睬。如果不要父類的屬性跟方法逮栅，在函數(shù)的prototype上去new這個(gè)父類悴势。

4、this的指向

1措伐、當(dāng)函數(shù)作為對(duì)象的方法被調(diào)用時(shí)特纤，this就會(huì)指向該對(duì)象。
2侥加、作為普通函數(shù)捧存，this指向window。
3担败、構(gòu)造器調(diào)用昔穴，this指向返回的這個(gè)對(duì)象。
4提前、箭頭函數(shù) 箭頭函數(shù)的this綁定看的是this所在函數(shù)定義在哪個(gè)對(duì)象下吗货，就綁定哪個(gè)對(duì)象。如果有嵌套的情況狈网，則this綁定到最近的一層對(duì)象上

4.1宙搬、箭頭函數(shù)this的原理：

this指向的固定化，并不是因?yàn)榧^函數(shù)內(nèi)部有綁定this的機(jī)制拓哺，實(shí)際原因是箭頭函數(shù)根本沒有自己的this勇垛，導(dǎo)致內(nèi)部的this就是外層代碼塊的this。正是因?yàn)樗鼪]有this士鸥，所以也就不能用作構(gòu)造函數(shù)窥摄。

4.2、怎么改變this的指向呢础淤？

1.使用es6的箭頭函數(shù)崭放；
2.在函數(shù)內(nèi)部使用that = this；
3.使用apply鸽凶，call币砂，bind；
4.new實(shí)例化一個(gè)對(duì)象

4.3玻侥、bind,apply,call的區(qū)別

通過apply和call改變函數(shù)的this指向决摧，他們兩個(gè)函數(shù)的第一個(gè)參數(shù)都是一樣的表示要改變指向的那個(gè)對(duì)象，第二個(gè)參數(shù)凑兰，apply是數(shù)組掌桩，而call則是arg1,arg2...這種形式。bind一個(gè)是返回一個(gè)函數(shù)姑食，并不會(huì)立即執(zhí)行第二個(gè)是帶參數(shù)（第一個(gè)參數(shù)要指向的this波岛，后面的的參數(shù)用來傳遞

5、深淺拷貝

參考鏈接：https://juejin.im/post/5b00e85af265da0b7d0ba63f

6音半、setTimeout和setInterval的機(jī)制

因?yàn)閖s是單線程的则拷。瀏覽器遇到etTimeout和setInterval會(huì)先執(zhí)行完當(dāng)前的代碼塊贡蓖，在此之前會(huì)把定時(shí)器推入瀏覽器的待執(zhí)行時(shí)間隊(duì)列里面，等到瀏覽器執(zhí)行完當(dāng)前代碼之后會(huì)看下事件隊(duì)列里有沒有任務(wù)煌茬，有的話才執(zhí)行定時(shí)器里的代碼

7斥铺、前端跨域問題

同源策略（協(xié)議+端口號(hào)+域名要相同）
1、jsonp跨域(只能解決get）
原理：動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽坛善。利用script標(biāo)簽的src屬性不受同源策略限制晾蜘，因?yàn)樗械膕rc屬性和href屬性都不受同源策略的限制，可以請(qǐng)求第三方服務(wù)器資源內(nèi)容

步驟：1.去創(chuàng)建一個(gè)script標(biāo)簽
2.script的src屬性設(shè)置接口地址
3.接口參數(shù)眠屎，必須要帶一個(gè)自定義函數(shù)名笙纤，要不然后臺(tái)無法返回?cái)?shù)據(jù)
4.通過定義函數(shù)名去接受返回的數(shù)據(jù)

2、document.domain 基礎(chǔ)域名相同 子域名不同
3组力、window.name 利用在一個(gè)瀏覽器窗口內(nèi)省容，載入所有的域名都是共享一個(gè)window.name
4、服務(wù)器設(shè)置對(duì)CORS的支持
原理：服務(wù)器設(shè)置Access-Control-Allow-Origin HTTP響應(yīng)頭之后燎字，瀏覽器將會(huì)允許跨域請(qǐng)求
利用h5新特性window.postMessage()

iframe元素創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（行內(nèi)框架）(setTimeout進(jìn)行異步加載)
解釋：瀏覽器中的瀏覽器腥椒！用于設(shè)置文本或者圖形的浮動(dòng)圖文框或容器
它和跨域
1、document.domain 實(shí)現(xiàn)主域名相同候衍，子域名不同的網(wǎng)頁通信
都設(shè)置為超域：document.domain = 'demo.com'
2笼蛛、window.postMessageht(data, url)，h5的API蛉鹿，啟動(dòng)跨域通信

8滨砍、圖片預(yù)加載和懶加載

8.1、預(yù)加載：

提前加載圖片妖异，當(dāng)用戶需要查看是可以直接從本地緩存中渲染
為什么要使用預(yù)加載：在網(wǎng)頁加載之前惋戏，對(duì)一些主要內(nèi)容進(jìn)行加載，以提供用戶更好的體驗(yàn)他膳，減少等待時(shí)間响逢。否則，如果一個(gè)頁面的內(nèi)容過于龐大棕孙，會(huì)出現(xiàn)留白舔亭。
解決頁面留白的方案：
1.預(yù)加載
2.使用svg站位圖片，將一些結(jié)構(gòu)快速搭建起來蟀俊，等待請(qǐng)求的數(shù)據(jù)來了之后钦铺，替換當(dāng)前的占位符
實(shí)現(xiàn)預(yù)加載的方法：

1.使用html標(biāo)簽
2.使用Image對(duì)象
3.使用XMLHTTPRequest對(duì)像，但會(huì)精細(xì)控制預(yù)加載過程

8.2肢预、懶加載（lazyload）

客戶端優(yōu)化矛洞，減少請(qǐng)求數(shù)和延遲請(qǐng)求數(shù)，提升用戶體驗(yàn)误甚，減少無效資源的加載缚甩，防止并發(fā)加載的資源過多會(huì)阻塞js的加載谱净，影響網(wǎng)站的正常使用
原理：首先將頁面上的圖片的src屬性設(shè)置為空字符串窑邦，而圖片的真是路經(jīng)則設(shè)置帶data-original屬性中擅威，當(dāng)頁面滾動(dòng)的時(shí)候需要去監(jiān)聽scroll事件，在scroll事件的回調(diào)中冈钦，判斷我們的懶加載的圖片是否進(jìn)入到可視區(qū)域郊丛，如果圖片在可視區(qū)域?qū)D片的src屬性設(shè)置為data-original的值，這樣就可以實(shí)現(xiàn)延遲加載瞧筛。

9厉熟、函數(shù)節(jié)流和防抖

防抖：短時(shí)間內(nèi)多次觸發(fā)同一個(gè)事件，只執(zhí)行最后一次较幌，或者在開始時(shí)執(zhí)行揍瑟，中間不執(zhí)行。比如公交車上車乍炉，要等待最后一個(gè)乘客上車
節(jié)流：節(jié)流是連續(xù)觸發(fā)事件的過程中以一定時(shí)間間隔執(zhí)行函數(shù)绢片。節(jié)流會(huì)稀釋你的執(zhí)行頻率，比如每間隔1秒鐘岛琼，只會(huì)執(zhí)行一次函數(shù)底循，無論這1秒鐘內(nèi)觸發(fā)了多少次事件
都為解決高頻事件而來， scroll mousewhell mousemover touchmove onresize槐瑞，后面有相應(yīng)的代碼實(shí)現(xiàn)函數(shù)的節(jié)流和防抖熙涤。

10、js垃圾回收機(jī)制

1.JS具有自動(dòng)垃圾收集的機(jī)制
2.JS的內(nèi)存生命周期（變量的生命）

• 1.分配你所需要的空間 var a = 20
• 2.使用分配帶的內(nèi)存（讀寫） alert（a + 10）
• 3.不適用的時(shí)候困檩，釋放內(nèi)存空間 a = null

3.JS的垃圾收集器每隔固定的時(shí)間就執(zhí)行一次釋放操作祠挫，通用的是通過標(biāo)記清除的算法
4.在局部作用域中，垃圾回收器很容易做出判斷并回收悼沿，全局比較難茸歧，因此應(yīng)避免全局變量

標(biāo)記清除算法：js最常見的垃圾回收方式，當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時(shí)候显沈，比如函數(shù)中聲明一個(gè)變量软瞎，垃圾回收器將他標(biāo)記為'進(jìn)入環(huán)境'，當(dāng)變量離開（函數(shù)執(zhí)行完后）拉讯，就其標(biāo)記為'離開環(huán)境'涤浇。垃圾回收器會(huì)在運(yùn)行的時(shí)候給存儲(chǔ)在內(nèi)存中的所有變量加上標(biāo)記，然后去掉環(huán)境中的變量以及被環(huán)境中該變量所引用的變量（閉包）魔慷。在這些完成之后仍存在標(biāo)記的就是要?jiǎng)h除的變量了

11只锭、一些檢驗(yàn)方法

千萬不要使用typeof來判斷對(duì)象和數(shù)組，因?yàn)檫@種類型都會(huì)返回object院尔。

• typeOf()是判斷基本類型的Boolean,Number蜻展，symbol, undefined, String喉誊。
  對(duì)于引用類型：除function，都返回object null返回object纵顾。
• installOf() 用來判斷A是否是B的實(shí)例伍茄，installof檢查的是原型。
• toString() 是Object的原型方法施逾，對(duì)于 Object 對(duì)象敷矫，直接調(diào)用 toString() 就能返回 [Object Object] 。而對(duì)于其他對(duì)象汉额，則需要通過 call / apply 來調(diào)用才能返回正確的類型信息曹仗。
• hasOwnProperty()方法返回一個(gè)布爾值，指示對(duì)象自身屬性中是否具有指定的屬性蠕搜，該方法會(huì)忽略掉那些從原型鏈上繼承到的屬性怎茫。
• isProperty()方法測試一個(gè)對(duì)象是否存在另一個(gè)對(duì)象的原型鏈上。
  valueof：所有對(duì)象都有valueof妓灌，如果存在任意原始值轨蛤，他就默認(rèn)將對(duì)象轉(zhuǎn)化為表示它的原始值。如果對(duì)象是復(fù)合值旬渠，而卻大部分對(duì)象無法真正表示一個(gè)原始值俱萍，因此默認(rèn)的valueof()方法簡單的返回對(duì)象本身，而不是返回原始值

12告丢、splice和slice枪蘑、map和forEach、 filter()岖免、reduce()的區(qū)別

• 1.slice(start,end):方法可以從已有數(shù)組中返回選定的元素岳颇，返回一個(gè)新數(shù)組，包含從start到end（不包含該元素）的數(shù)組方法
  注意：該方法不會(huì)更新原數(shù)組颅湘，而是返回一個(gè)子數(shù)組
• 2.splice():該方法想或者從數(shù)組中添加或刪除項(xiàng)目话侧，返回被刪除的項(xiàng)目。（該方法會(huì)改變?cè)瓟?shù)組）

splice(index, howmany,item1,...itemx)
index參數(shù)：必須闯参，整數(shù)規(guī)定添加或刪除的位置瞻鹏，使用負(fù)數(shù)，從數(shù)組尾部規(guī)定位置
howmany參數(shù)：必須鹿寨，要?jiǎng)h除的數(shù)量新博，
item1..itemx:可選，向數(shù)組添加新項(xiàng)目

• 3.map()：會(huì)返回一個(gè)全新的數(shù)組脚草。使用于改變數(shù)據(jù)值的時(shí)候赫悄。會(huì)分配內(nèi)存存儲(chǔ)空間數(shù)組并返回，forEach（）不會(huì)返回?cái)?shù)據(jù)
• 4.forEach(): 不會(huì)返回任何有價(jià)值的東西，并且不打算改變數(shù)據(jù)埂淮，單純的只是想用數(shù)據(jù)做一些事情姑隅，他允許callback更改原始數(shù)組的元素
• 5.reduce(): 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每一個(gè)值（從左到右）開始縮減倔撞，最終計(jì)算一個(gè)值讲仰，不會(huì)改變?cè)瓟?shù)組的值
• 6.filter(): 方法創(chuàng)建一個(gè)新數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素误窖。它里面通過function去做處理

13叮盘、js秩贰、css阻塞

js阻塞：所有瀏覽器在下載JS的時(shí)候霹俺，會(huì)阻止一切其他活動(dòng)，比如其他資源的下載毒费，內(nèi)容的呈現(xiàn)等等丙唧。直到JS下載、解析觅玻、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容想际。為了提高用戶體驗(yàn)，新一代瀏覽器都支持并行下載JS溪厘，但是JS下載仍然會(huì)阻塞其它資源的下載（例如.圖片胡本，css文件等）。
css阻塞：因?yàn)闉g覽器會(huì)維持html中css和js的順序畸悬，樣式表必須在嵌入的JS執(zhí)行前先加載侧甫、解析完。而嵌入的JS會(huì)阻塞后面的資源加載蹋宦，所以就會(huì)出現(xiàn)上面CSS阻塞下載的情況披粟。

14、類的創(chuàng)建和繼承

(es6)中class, extends

14.1冷冗、 繼承：

• 原型鏈繼承： function Cat(){ } Cat.prototype = new Animal(); Cat.prototype.name = 'cat'; 無法實(shí)現(xiàn)多繼承
• 構(gòu)造繼承：使用父類的構(gòu)造函數(shù)來增強(qiáng)子類實(shí)例守屉。function Cat(name){Animal.call(this);this.name = name || 'Tom';} 無法繼承父類原型鏈上的屬性跟方法 installof去檢驗(yàn)
• 實(shí)例繼承：為父類實(shí)例添加新特性，作為子類實(shí)例的返回
• 拷貝繼承：拷貝父類元素上的屬性跟方法
• 組合繼承：構(gòu)造繼承 + 原型繼承的組合體
• 寄生組合繼承：通過寄生方式蒿辙，在構(gòu)造繼承上加一個(gè)Super函數(shù)(沒有實(shí)例和方法) 讓他的原型鏈指向父類的原型鏈 砍掉父類的實(shí)例屬性拇泛，這樣，在調(diào)用兩次父類的構(gòu)造的時(shí)候思灌，就不會(huì)初始化兩次實(shí)例方法/屬性

14.2 給兩個(gè)構(gòu)造函數(shù)A和B俺叭，如何實(shí)現(xiàn)A繼承B （Object.prototype）

function A(....){} A.prototype...
function B(....){} B.prototype...
A.prototype = Object.create(B.prototype) 再A的構(gòu)造函數(shù)里new B(props)
使用new一個(gè)函數(shù)的話，函數(shù)里的構(gòu)造函數(shù)的參數(shù)就為undefined习瑰，里面的一些函數(shù)可能執(zhí)行錯(cuò)誤绪颖，因?yàn)閠his改變了

Object.create =  function (o) {
       var F = function () {};
       F.prototype = o;
       return new F();
    };

15、閉包和原型

15.1、閉包的理解

1柠横、內(nèi)部函數(shù)可以訪問定義他們外部函數(shù)的參數(shù)和變量窃款。（作用域鏈的向上查找，把外圍的作用域中的變量值存儲(chǔ)在內(nèi)存中而不是在函數(shù)調(diào)用完畢后銷毀）設(shè)計(jì)私有的方法和變量牍氛，避免全局變量的污染
2晨继、函數(shù)嵌套函數(shù)
3、本質(zhì)是將函數(shù)內(nèi)部和外部連接起來搬俊。優(yōu)點(diǎn)是可以讀取函數(shù)內(nèi)部的變量紊扬，讓這些變量的值始終保存在內(nèi)存中，不會(huì)在函數(shù)被調(diào)用之后自動(dòng)清除

15.2唉擂、閉包的缺陷：

1.閉包的缺點(diǎn)就是常駐內(nèi)存會(huì)增大內(nèi)存使用量餐屎，并且使用不當(dāng)容易造成內(nèi)存泄漏
2.如果不是因?yàn)槟承┨厥馊蝿?wù)而需要閉包，在沒有必要的情況下玩祟，在其它函數(shù)中創(chuàng)建函數(shù)是不明智的腹缩，因?yàn)殚]包對(duì)腳本性能具有負(fù)面影響，包括處理速度和內(nèi)存消耗空扎。

15.3藏鹊、內(nèi)存的理解

內(nèi)存溢出和內(nèi)存泄漏（給的不夠用| 用了不歸還）

• 1、內(nèi)存溢出：在程序中申請(qǐng)內(nèi)存時(shí)转锈，沒有足夠的內(nèi)存空間供其使用盘寡，出現(xiàn)out of memory；比如申請(qǐng)了一個(gè)integer,但給它存了long才能存下的數(shù)撮慨，那就是內(nèi)存溢出
• 2竿痰、內(nèi)存泄漏：在程序申請(qǐng)內(nèi)存后，無法釋放已申請(qǐng)的內(nèi)存空間甫煞，一次內(nèi)存泄漏危害可以忽略菇曲，但內(nèi)存泄漏堆積后果很嚴(yán)重，無論多少內(nèi)存抚吠，遲到會(huì)被占光

舉列子：閉包中的this,對(duì)象函數(shù)常潮。匿名函數(shù)返回函數(shù)return function

15.4、作用域

作用域：(由當(dāng)前環(huán)境與上層環(huán)境一系列的變量對(duì)象組成？Α：笆健！保證當(dāng)先執(zhí)行環(huán)境里萧朝，有權(quán)訪問的變量和函數(shù)是有序的岔留，作用域鏈變量只能被向上訪問)

定義：由當(dāng)前環(huán)境與上層環(huán)境的一系列變量對(duì)象組成(函數(shù)嵌套函數(shù)，內(nèi)部一級(jí)級(jí)往上有序訪問變量或?qū)ο?

作用是：保證當(dāng)前執(zhí)行環(huán)境里检柬，有權(quán)訪問的變量和函數(shù)時(shí)有序的献联，作用域鏈的變量只能被向上訪問

變量訪問到window對(duì)象及被終止，作用域鏈向下訪問是不允許的
1.改變作用域有 with try..中的catch，
2.所有為定義的直接賦值的變量自動(dòng)聲明為全局作用域

作用域：一套規(guī)則里逆，管理引擎如何在當(dāng)前作用域以及嵌套的子作用域中根據(jù)標(biāo)識(shí)符名稱
查找變量（標(biāo)識(shí)符就是變量或者函數(shù)名）（只用全局作用域和局部作用域）（作用域在它創(chuàng)建的時(shí)候就存在了）

代碼執(zhí)行分為兩個(gè)階段：
1.代碼編譯階段：有編譯器完成进胯，將代碼翻譯可執(zhí)行的代碼，這個(gè)階段會(huì)被確定
2.代碼執(zhí)行階段：有js引擎完成原押，主要執(zhí)行可執(zhí)行的大媽胁镐，這個(gè)階段執(zhí)行上下文被創(chuàng)建（對(duì)象被創(chuàng)建）

執(zhí)行上下文：一個(gè)看不見得對(duì)象，存在若干個(gè)屬性和變量诸衔，它被調(diào)用的時(shí)候創(chuàng)建的盯漂。函數(shù)被調(diào)用查看的this指向的object，object就是上下文（只有被調(diào)用的時(shí)候創(chuàng)建）

15.5笨农、作用域鏈

參考鏈接：https://blog.csdn.net/yooungt13/article/details/20581635

15.6就缆、原型鏈

原型鏈：函數(shù)的原型鏈對(duì)象constructor默認(rèn)指向函數(shù)本身，原型對(duì)象除了有原型屬性外磁餐，為了實(shí)現(xiàn)繼承违崇，還有一個(gè)原型鏈指針proto,該指針是指向上一層的原型對(duì)象阿弃，而上一層的原型對(duì)象的結(jié)構(gòu)依然類似诊霹。因此可以利用proto一直指向Object的原型對(duì)象上，而Object原型對(duì)象用Object.prototype.proto=null表示原型鏈頂端渣淳。如此形成了js的原型鏈繼承脾还。同時(shí)所有的js對(duì)象都有Object的基本防范

四、服務(wù)器端篇

1入愧、狀態(tài)碼

2XX（成功處理了請(qǐng)求狀態(tài)）
200 服務(wù)器已經(jīng)成功處理請(qǐng)求鄙漏，并提供了請(qǐng)求的網(wǎng)頁
201 用戶新建或修改數(shù)據(jù)成功
202 一個(gè)請(qǐng)求已經(jīng)進(jìn)入后臺(tái)
204 用戶刪除成功
3XX（每次請(qǐng)求使用的重定向不要超過5次）
304 網(wǎng)頁上次請(qǐng)求沒有更新，節(jié)省帶寬和開銷
4XX（表示請(qǐng)求可能出錯(cuò)棺蛛，妨礙了服務(wù)器的處理）
400 服務(wù)器不理解請(qǐng)求的語法
401 用戶沒有權(quán)限（用戶名怔蚌，密碼輸入錯(cuò)誤）
403 用戶得到授權(quán)（401相反），但是訪問被禁止
404 服務(wù)器找不到請(qǐng)求的網(wǎng)頁旁赊，
5XX（表示服務(wù)器在處理請(qǐng)求的時(shí)候發(fā)生內(nèi)部錯(cuò)誤）
500 服務(wù)器遇到錯(cuò)誤桦踊，無法完成請(qǐng)求
503 服務(wù)器目前無法使用（超載或停機(jī)維護(hù)）

2、get/post的區(qū)別

1.get數(shù)據(jù)是存放在url之后终畅，以籍胯？分割url和傳輸數(shù)據(jù)，參數(shù)之間以&相連离福； post方法是把提交的數(shù)據(jù)放在http包的Body中
2.get提交的數(shù)據(jù)大小有限制杖狼，（因?yàn)闉g覽器對(duì)url的長度有限制），post的方法提交的數(shù)據(jù)沒有限制
3.get需要request.queryString來獲取變量的值妖爷，而post方式通過request.from來獲取變量的值
4.get的方法提交數(shù)據(jù)蝶涩，會(huì)帶來安全問題，比如登錄一個(gè)頁面，通過get的方式提交數(shù)據(jù)绿聘，用戶名和密碼就會(huì)出現(xiàn)在url上

3暗挑、http和https的總結(jié)

3.1、http協(xié)議的理解

• 1.超文本的傳輸協(xié)議斜友，是用于從萬維網(wǎng)服務(wù)器超文本傳輸?shù)奖镜刭Y源的傳輸協(xié)議
• 2.基于TCP/IP通信協(xié)議來傳遞數(shù)據(jù)（HTML炸裆，圖片資源）
• 3.基于運(yùn)用層的面向?qū)ο蟮膮f(xié)議，由于其簡潔鲜屏、快速的方法烹看、適用于分布式超媒體信息系統(tǒng)
• 4.http請(qǐng)求信息request：
  請(qǐng)求行（request line）、請(qǐng)求頭部（header）,空行和請(qǐng)求數(shù)據(jù)四部分構(gòu)成
  請(qǐng)求行洛史，用來說明請(qǐng)求類型,要訪問的資源以及所使用的HTTP版本.
  請(qǐng)求頭部惯殊，用來說明服務(wù)器要使用的附加信息
  空行，請(qǐng)求頭部后面的空行是必須的
  請(qǐng)求數(shù)據(jù)也叫主體也殖，可以添加任意的其他數(shù)據(jù)土思。
• 5.http相應(yīng)信息Response
  狀態(tài)行、消息報(bào)頭忆嗜、空行和響應(yīng)正文
  狀態(tài)行己儒，由HTTP協(xié)議版本號(hào)， 狀態(tài)碼捆毫， 狀態(tài)消息 三部分組成
  消息報(bào)頭闪湾，用來說明客戶端要使用的一些附加信息
  空行，消息報(bào)頭后面的空行是必須的
  響應(yīng)正文绩卤，服務(wù)器返回給客戶端的文本信息途样。

3.2、http和https的區(qū)別

http：是以安全為目標(biāo)的HTTP通道濒憋，簡單講是HTTP的安全版本何暇，通過SSL加密
https：超文本傳輸協(xié)議。是一個(gè)客服端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)（tcp）,使瀏覽器更加高效凛驮，使網(wǎng)絡(luò)傳輸減少

3.3裆站、http1.0、1.1辐烂、2.0的區(qū)別

1.0跟1.1的區(qū)別：
長連接：HTTP1.0需要使用keep-alive參數(shù)來告知服務(wù)器建立一個(gè)長連接遏插，而HTP1.1默認(rèn)支持長連接
節(jié)約寬帶：HTTP1.1支持只發(fā)送一個(gè)header信息（不帶任何body信息）
host域（設(shè)置虛擬站點(diǎn)，也就是說纠修，webserver上的多個(gè)虛擬站點(diǎn)可以共享同一個(gè)ip端口）：HTTP1.0沒有host域

1.1跟2.0的區(qū)別：
1.http2采用的二進(jìn)制文本傳輸數(shù)據(jù)胳嘲，而非http1文本格式，二進(jìn)制在協(xié)議的解析和擴(kuò)展更好
2.數(shù)據(jù)壓縮：對(duì)信息頭采用了HPACK進(jìn)行壓縮傳輸扣草，節(jié)省了信息頭帶來的網(wǎng)絡(luò)流量
3.多路復(fù)用：一個(gè)連接可以并發(fā)處理多個(gè)請(qǐng)求
4.服務(wù)器推送：我們對(duì)支持HTTP2.0的webserver請(qǐng)求數(shù)據(jù)的時(shí)候了牛，服務(wù)器會(huì)順便把一些客戶端需要的資源一起推送到客戶端颜屠，免得客戶端再次創(chuàng)建連接發(fā)送請(qǐng)求到服務(wù)器端獲取。這種方式非常合適加載靜態(tài)資源

4鹰祸、前端呈現(xiàn)流程（TCP三次握手甫窟，DOM樹渲染）

4.1、從輸入url到獲取頁面的完整過程

1.查詢NDS(域名解析),獲取域名對(duì)應(yīng)的IP地址 查詢?yōu)g覽器緩存
2.瀏覽器與服務(wù)器建立tcp鏈接（三次握手）
3.瀏覽器向服務(wù)器發(fā)送http請(qǐng)求(請(qǐng)求和傳輸數(shù)據(jù)）
4.服務(wù)器接受到這個(gè)請(qǐng)求后蛙婴，根據(jù)路經(jīng)參數(shù)粗井，經(jīng)過后端的一些處理生成html代碼返回給瀏覽器
5.瀏覽器拿到完整的html頁面代碼開始解析和渲染，如果遇到外部的css或者js街图，圖片一樣的步驟
6.瀏覽器根據(jù)拿到的資源對(duì)頁面進(jìn)行渲染浇衬，把一個(gè)完整的頁面呈現(xiàn)出來

4.2、TCP三次握手

客服端發(fā)c起請(qǐng)求連接服務(wù)器端s確認(rèn)餐济，服務(wù)器端也發(fā)起連接確認(rèn)客服端確認(rèn)耘擂。
第一次握手：客服端發(fā)送一個(gè)請(qǐng)求連接，服務(wù)器端只能確認(rèn)自己可以接受客服端發(fā)送的報(bào)文段
第二次握手： 服務(wù)端向客服端發(fā)送一個(gè)鏈接絮姆，確認(rèn)客服端收到自己發(fā)送的報(bào)文段
第三次握手： 服務(wù)器端確認(rèn)客服端收到了自己發(fā)送的報(bào)文段

4.3醉冤、瀏覽器渲染原理及流程 DOM -> CSSOM -> render -> layout -> print

流程：解析html以及構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹
概念：1.構(gòu)建DOM樹： 渲染引擎解析HTML文檔，首先將標(biāo)簽轉(zhuǎn)換成DOM樹中的DOM node(包括js生成的標(biāo)簽)生成內(nèi)容樹
2.構(gòu)建渲染樹： 解析對(duì)應(yīng)的css樣式文件信息（包括js生成的樣式和外部的css）
3.布局渲染樹：從根節(jié)點(diǎn)遞歸調(diào)用篙悯，計(jì)算每一個(gè)元素的大小蚁阳，位置等。給出每個(gè)節(jié)點(diǎn)所在的屏幕的精準(zhǔn)位置
4.繪制渲染樹：遍歷渲染樹辕近，使用UI后端層來繪制每一個(gè)節(jié)點(diǎn)
重繪：當(dāng)盒子的位置韵吨、大小以及其他屬性，例如顏色移宅、字體大小等到確定下來之后，瀏覽器便把這些顏色都按照各自的特性繪制一遍椿疗，將內(nèi)容呈現(xiàn)在頁面上
觸發(fā)重繪的條件：改變?cè)赝庥^屬性漏峰。如：color，background-color等
重繪是指一個(gè)元素外觀的改變所觸發(fā)的瀏覽器行為届榄，瀏覽器會(huì)根據(jù)元素的新屬性重新繪制浅乔，使元素呈現(xiàn)新的外觀
注意：table及其內(nèi)部元素需要多次計(jì)算才能確定好其在渲染樹中節(jié)點(diǎn)的屬性值，比同等元素要多發(fā)時(shí)間铝条，要盡量避免使用table布局
重排（重構(gòu)/回流/reflow）： 當(dāng)渲染書中的一部分（或全部）因?yàn)樵氐囊?guī)模尺寸靖苇，布局，隱藏等改變而需要重新構(gòu)建班缰，這就是回流贤壁。
每個(gè)頁面都需要一次回流，就是頁面第一次渲染的時(shí)候
重排一定會(huì)影響重繪埠忘，但是重繪不一定會(huì)影響重排

5脾拆、前端儲(chǔ)存總結(jié)

5.1馒索、存儲(chǔ)方式與傳輸方式

1.indexBD: 是h5的本地存儲(chǔ)庫，把一些數(shù)據(jù)存儲(chǔ)到瀏覽器中名船，沒網(wǎng)絡(luò)绰上，瀏覽器可以從這里讀取數(shù)據(jù)，離線運(yùn)用渠驼。5m
2.Cookie: 通過瀏覽器記錄信息確認(rèn)用戶身份蜈块，最大4kb,這也就限制了傳輸?shù)臄?shù)據(jù)，請(qǐng)求的性能會(huì)受到影響
3.Session: 服務(wù)器端使用的一種記錄客戶狀態(tài)的機(jī)制（session_id存在set_cookie發(fā)送到客服端迷扇，保存為cookie）
4.localStroage: h5的本地存儲(chǔ)疯趟，數(shù)據(jù)永久保存在客服端

• 1匈织、cookie褐筛，sessionStorage，localStorage是存放在客戶端祭饭，session對(duì)象數(shù)據(jù)是存放在服務(wù)器上
  實(shí)際上瀏覽器和服務(wù)器之間僅需傳遞session id即可瓮床，服務(wù)器根據(jù)session-id找到對(duì)應(yīng)的用戶session對(duì)象
  session存儲(chǔ)數(shù)據(jù)更安全一些盹舞，一般存放用戶信息，瀏覽器只適合存儲(chǔ)一般的數(shù)據(jù)
• 2隘庄、cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶踢步，在瀏覽器和服務(wù)器來回傳遞，里面存放著session-id
  sessionStorage丑掺，localStorage僅在本地保存
• 3获印、大小限制區(qū)別，cookie數(shù)據(jù)不超過4kb街州，localStorage在谷歌瀏覽中2.6MB
• 4兼丰、數(shù)據(jù)有效期不同，cookie在設(shè)置的（服務(wù)器設(shè)置）有效期內(nèi)有效唆缴，不管窗口和瀏覽器關(guān)閉
  sessionStorage僅在當(dāng)前瀏覽器窗口關(guān)閉前有效鳍征，關(guān)閉即銷毀（臨時(shí)存儲(chǔ)）
  localStorage始終有效

5.2、SessionStorage和localStorage區(qū)別：

1.sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)面徽，這些數(shù)據(jù)只有在用一個(gè)會(huì)話的頁面中才能被訪問（也就是說在第一次通信過程中）并且在會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀艳丛，不是一個(gè)持久的本地存儲(chǔ)，會(huì)話級(jí)別的儲(chǔ)存
2.localStorage用于持久化的本地存儲(chǔ)趟紊，除非主動(dòng)刪除數(shù)據(jù)氮双，否則不會(huì)過期

5.3、token霎匈、cookie戴差、session三者的理解

1、token就是令牌唧躲，比如你授權(quán)(登錄)一個(gè)程序時(shí),他就是個(gè)依據(jù),判斷你是否已經(jīng)授權(quán)該軟件（最好的身份認(rèn)證造挽，安全性好碱璃，且是唯一的）用戶身份的驗(yàn)證方式
2、cookie是寫在客戶端一個(gè)txt文件饭入，里面包括登錄信息之類的嵌器，這樣你下次在登錄某個(gè)網(wǎng)站，就會(huì)自動(dòng)調(diào)用cookie自動(dòng)登錄用戶名服務(wù)器生成谐丢，發(fā)送到瀏覽器爽航、瀏覽器保存，下次請(qǐng)求再次發(fā)送給服務(wù)器（存放著登錄信息）
3乾忱、session是一類用來客戶端和服務(wù)器之間保存狀態(tài)的解決方案讥珍，會(huì)話完成被銷毀（代表的就是服務(wù)器和客戶端的一次會(huì)話過程）cookie中存放著sessionID，請(qǐng)求會(huì)發(fā)送這個(gè)id窄瘟。sesion因?yàn)閞equest對(duì)象而產(chǎn)生衷佃。

5.4、基于Token的身份驗(yàn)證：（最簡單的token: uid用戶唯一的身份識(shí)別 + time當(dāng)前事件戳 + sign簽名）

1蹄葱、用戶通過用戶名和密碼發(fā)送請(qǐng)求
2氏义、服務(wù)器端驗(yàn)證
3、服務(wù)器端返回一個(gè)帶簽名的token图云，給客戶端
4惯悠、客戶端儲(chǔ)存token，并且每次用于發(fā)送請(qǐng)求
5竣况、服務(wù)器驗(yàn)證token并且返回?cái)?shù)據(jù)
每一次請(qǐng)求都需要token

cookie與session區(qū)別
1克婶、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上丹泉。
2情萤、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙考慮到安全應(yīng)當(dāng)使用session嘀掸。
3紫岩、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多睬塌，會(huì)比較占用你服務(wù)器的性能考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE歇万。
4揩晴、單個(gè)cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie贪磺。

5.5硫兰、session與token區(qū)別

1、session認(rèn)證只是把簡單的User的信息存儲(chǔ)Session里面寒锚，sessionID不可預(yù)測劫映，一種認(rèn)證手段违孝。只存在服務(wù)端，不能共享到其他的網(wǎng)站和第三方App
2泳赋、token是oAuth Token雌桑，提供的是認(rèn)證和授權(quán)，認(rèn)證針對(duì)用戶祖今，授權(quán)是針對(duì)App校坑，目的就是讓某APP有權(quán)訪問某用戶的的信息。Token是唯一的千诬，token不能轉(zhuǎn)移到其他的App耍目，也不能轉(zhuǎn)到其他用戶上。（適用app）
3徐绑、session的狀態(tài)是存在服務(wù)器端的邪驮，客戶端只存在session id， Token狀態(tài)是存儲(chǔ)在客戶端的

5.6傲茄、Cookie的弊端有哪些毅访？？烫幕？（優(yōu)勢(shì)：保存客戶端數(shù)據(jù)俺抽，分擔(dān)了服務(wù)器存儲(chǔ)的負(fù)擔(dān)）

1、數(shù)量和長度的限制较曼。每個(gè)特定的域名下最多生成20個(gè)cookie（chorme和safari沒有限制）
2磷斧、安全性問題。