摘要：站點(diǎn)接收到請(qǐng)求后，對(duì)請(qǐng)求進(jìn)行驗(yàn)證，并確認(rèn)是受害者的憑證，誤以為是無(wú)辜的受害者發(fā)送的請(qǐng)求。函數(shù)內(nèi)部語(yǔ)句返回的值，會(huì)成為方法回調(diào)函數(shù)的參數(shù)。

記錄我最近面試缺漏的知識(shí)點(diǎn)

css

1.bootstrap如何實(shí)現(xiàn)手機(jī)PC端自適應(yīng)

媒體查詢

2.flex布局

父容器：（記得常用屬性）
display:flex
flex-direction： row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch

3. 多行文本與單行文本的省略

單行：width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 
多行：1. width:100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 
line-clamp屬性是為了控制文本顯示多少行。說(shuō)明：必須定義display屬性才可以對(duì)box進(jìn)行劃分。 box-orient 屬性指定一個(gè)box子元素是否應(yīng)按水平或垂直排列。        
2. :afert在最后加個(gè)背景圖然后加上省略號(hào)   
3.插件

js:

1.$和dom對(duì)象轉(zhuǎn)化

通過(guò)$符號(hào) $(document)

2.jq鏈?zhǔn)秸{(diào)用原理

 return 實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用 （可研讀jq源碼）

3.$this 和 this區(qū)別

 $(this)表示的是用jquery封裝候的當(dāng)前對(duì)象
 this表示的是javascript提供的當(dāng)前對(duì)象

4.websocket基于什么協(xié)議

  TCP

5.TCP和HTTP區(qū)別

 TCP傳輸層協(xié)議 HTTP應(yīng)用層協(xié)議 

6.canvas和svg區(qū)別

 Canvas 能以.png .jpg格式保存圖像，依賴分辨率，不支持事件處理器，適合圖像密集型的游戲（被頻繁重繪）
 Svg 是矢量圖像，不依賴分辨率，支持事件處理器，適合大型渲染應(yīng)用程序，不適合游戲應(yīng)用

7.xss、csrf攻擊

XSS(Cross-Site Scripting，跨站腳本攻擊)是一種代碼注入攻擊。攻擊者在目標(biāo)網(wǎng)站上注入惡意代碼，當(dāng)被攻擊者登陸網(wǎng)站時(shí)就會(huì)執(zhí)行這些惡意代碼，這些腳本可以讀取 cookie，session tokens，或者其它敏感的網(wǎng)站信息，對(duì)用戶進(jìn)行釣魚(yú)欺詐，甚至發(fā)起蠕蟲(chóng)攻擊等。
XSS 的本質(zhì)是：惡意代碼未經(jīng)過(guò)濾，與網(wǎng)站正常的代碼混在一起；瀏覽器無(wú)法分辨哪些腳本是可信的，導(dǎo)致惡意腳本被執(zhí)行。由于直接在用戶的終端執(zhí)行，惡意代碼能夠直接獲取用戶的信息，利用這些信息冒充用戶向網(wǎng)站發(fā)起攻擊者定義的請(qǐng)求。

Xss解決方案：代碼嚴(yán)謹(jǐn) 加驗(yàn)證 編碼

 CSRF（Cross-site request forgery）跨站請(qǐng)求偽造：攻擊者誘導(dǎo)受害者進(jìn)入第三方網(wǎng)站，在第三方網(wǎng)站中，向被攻擊網(wǎng)站發(fā)送跨站請(qǐng)求。利用受害者在被攻擊網(wǎng)站已經(jīng)獲取的注冊(cè)憑證，繞過(guò)后臺(tái)的用戶驗(yàn)證，達(dá)到冒充用戶對(duì)被攻擊的網(wǎng)站執(zhí)行某項(xiàng)操作的目的。
 典型的CSRF攻擊流程：
 受害者登錄A站點(diǎn)，并保留了登錄憑證（Cookie）。
 攻擊者誘導(dǎo)受害者訪問(wèn)了站點(diǎn)B。
 站點(diǎn)B向站點(diǎn)A發(fā)送了一個(gè)請(qǐng)求，瀏覽器會(huì)默認(rèn)攜帶站點(diǎn)A的Cookie信息。
 站點(diǎn)A接收到請(qǐng)求后，對(duì)請(qǐng)求進(jìn)行驗(yàn)證，并確認(rèn)是受害者的憑證，誤以為是無(wú)辜的受害者發(fā)送的請(qǐng)求。
 站點(diǎn)A以受害者的名義執(zhí)行了站點(diǎn)B的請(qǐng)求。
 攻擊完成，攻擊者在受害者不知情的情況下，冒充受害者完成了攻擊。

Csrf解決方案：

添加驗(yàn)證碼(體驗(yàn)不好)

判斷請(qǐng)求的來(lái)源：檢測(cè)Referer(并不安全，Referer可以被更改)

使用Token(主流)

Samesite Cookie屬性

8.cookie和session區(qū)別 cookie如何實(shí)現(xiàn)session （需要依靠后臺(tái)） 同源策略 可以跨域嗎

9.解決跨域的方法

jsonp、cors、iframe 

10.css3新特性

新增了選擇器，偽類，樣式屬性

11.如何實(shí)現(xiàn)一個(gè)音頻播放 資源不被竊取

使用flash

12.如何實(shí)現(xiàn)發(fā)微博還剩多少字 漢字英文 表情

正則驗(yàn)證轉(zhuǎn)化Unicode

13.如何實(shí)現(xiàn)長(zhǎng)連接

websocket  、 http keep-alive

14.原型鏈 、prototype是什么 可以實(shí)現(xiàn)繼承嗎

每個(gè)對(duì)象都有一個(gè)__proto__屬性指向構(gòu)造函數(shù)的prototype原型，在找一個(gè)對(duì)象的屬性或方法時(shí)，在本身上找不到就去原型上找，直到undefined。  
new Pet (實(shí)例)--（__proto__） ---->Pet.prototype
prototype主要來(lái)實(shí)現(xiàn)繼承（原型繼承）

15.實(shí)現(xiàn)繼承的幾種方式

16.原型繼承與new構(gòu)造繼承的優(yōu)缺點(diǎn)

原型繼承：
  核心： 將父類的實(shí)例作為子類的原型
  缺點(diǎn)： 父類新增原型方法/原型屬性，子類都能訪問(wèn)到，父類一變其它的都變了
構(gòu)造繼承：
 核心：復(fù)制父類的實(shí)例屬性給子類
 缺點(diǎn)： 方法都在構(gòu)造函數(shù)中定義， 只能繼承父類的實(shí)例屬性和方法，不能繼承原型屬性/方法，無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類都有父類實(shí)例函數(shù)的副本，影響性能

17.如何做緩存 瀏覽器如何實(shí)現(xiàn)緩存

1.localstorage
2.vue keep-alive
對(duì)cache-control、etag、expires、last-modified的理解 使用

18.對(duì)window.proformance的理解

19.對(duì)Event-loop的理解

執(zhí)行線程，macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval，micro-task(微任務(wù))：Promise，process.nextTick

先執(zhí)行微任務(wù)再執(zhí)行宏任務(wù)

20. 數(shù)組去重 數(shù)組扁平化

21.字符串拼接方法

1.“+” 
2.以數(shù)組作為中介用 join 連接字符串  
3.es6:模板字符串 `` 

22.閉包、垃圾回收的幾種方式

23.對(duì)node.js、npm有什么了解

es6

1.遍歷器（iterator）

2.Generator yield

 generator（生成器）是ES6標(biāo)準(zhǔn)引入的新的數(shù)據(jù)類型。一個(gè)generator看上去像一個(gè)函數(shù)，但可以返回多次。
 generator和函數(shù)不同的是，generator由function*定義（注意多出的*號(hào)），并且，除了return語(yǔ)句，還可以用yield返回多次。
 generator還有另一個(gè)巨大的好處，就是把異步回調(diào)代碼變成“同步”代碼。

3.async await

async函數(shù)返回一個(gè) Promise 對(duì)象，可以使用then方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。
async函數(shù)內(nèi)部return語(yǔ)句返回的值，會(huì)成為then方法回調(diào)函數(shù)的參數(shù)。
async內(nèi)的代碼是同步的

4.promise 狀態(tài)改變 里面內(nèi)容的同步異步

Promise 構(gòu)造函數(shù)是同步執(zhí)行的，promise.then 中的函數(shù)是異步執(zhí)行的。

5.promise 和 async關(guān)系

6.箭頭函數(shù)和普通函數(shù)的區(qū)別

① 箭頭函數(shù)是匿名函數(shù)，不能作為構(gòu)造函數(shù)，不能使用new
② 箭頭函數(shù)不綁定arguments,用rest參數(shù)替代
③ 箭頭函數(shù)不綁定this,會(huì)捕獲其所在上下文的this值作為自己的this,任何方法（call,apply,bind）都改變不了其this指向
④箭頭函數(shù)沒(méi)有原型屬性
⑤箭頭函數(shù)不能當(dāng)做Generator函數(shù)，不能使用yield關(guān)鍵字

7.filter reduce過(guò)濾器

filter : array.filter(callback [,that]);
對(duì)于回調(diào)，可以指定數(shù)組元素的值“value”，數(shù)組元素的數(shù)字索引“index”以及存儲(chǔ)數(shù)組元素的數(shù)組對(duì)象“arrayObj”。
對(duì)于每個(gè)數(shù)組元素，callbak返回true的元素將生成為新數(shù)組，callcak未返回true的元素將被跳過(guò)，并且不包含在新數(shù)組中。
var data = [1, 4, 7, 12, 21];var result = data.filter(function(value) {return value % 2 === 1;});console.log(result);

reduce普通用法: 數(shù)組求和，求乘積 var sum = arr.reduce((x,y)=>x+y)； var mul = arr.reduce((x,y)=>x*y)
高級(jí)用法 ：（1）計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)
（2）數(shù)組去重
（3）將二維數(shù)組轉(zhuǎn)化為一維
（3）將多維數(shù)組轉(zhuǎn)化為一維（數(shù)組扁平化）
（4）、對(duì)象里的屬性求和

8. Object.assign()

Object.assign方法用于對(duì)象的合并，將源對(duì)象（source）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（target）。
Object.assign方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象。
注意，如果目標(biāo)對(duì)象與源對(duì)象有同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。
如果只有一個(gè)參數(shù)，Object.assign會(huì)直接返回該參數(shù)。
如果該參數(shù)不是對(duì)象，則會(huì)先轉(zhuǎn)成對(duì)象，然后返回。
由于undefined和null無(wú)法轉(zhuǎn)成對(duì)象，所以如果它們作為參數(shù)，就會(huì)報(bào)錯(cuò)。undefined和null不在首參數(shù)，就不會(huì)報(bào)錯(cuò)。
Object.assign拷貝的屬性是有限制的，只拷貝源對(duì)象的自身屬性（不拷貝繼承屬性），也不拷貝不可枚舉的屬性（enumerable: false）。

vue

1.對(duì)vue實(shí)例的了解

 每個(gè) Vue.js 應(yīng)用都是通過(guò)構(gòu)造函數(shù) Vue 創(chuàng)建一個(gè) Vue 的根實(shí)例 啟動(dòng)的：
 1.2.在實(shí)例化 Vue 時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項(xiàng)。
 1.3.可以擴(kuò)展 Vue 構(gòu)造器，從而用預(yù)定義選項(xiàng)創(chuàng)建可復(fù)用的組件構(gòu)造器var MyConponent = Vue.extends({})
 1.4.所有的 Vue.js 組件其實(shí)都是被擴(kuò)展的 Vue 實(shí)例

2.vue的雙向數(shù)據(jù)綁定 數(shù)據(jù)劫持defineProperty

 采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty（）來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽(tīng)回調(diào)。當(dāng)把一個(gè)普通 Javascript 對(duì)象傳給 Vue 實(shí)例來(lái)作為它的 data 選項(xiàng)時(shí)，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化。

3.發(fā)布-訂閱者模式 對(duì)Observer Compile Watcher的理解

4.slot插槽

插槽就是Vue實(shí)現(xiàn)的一套內(nèi)容分發(fā)的API，將元素作為承載分發(fā)內(nèi)容的出口。

沒(méi)有插槽的情況下在組件標(biāo)簽內(nèi)些一些內(nèi)容是不起任何作用的，當(dāng)我在組件中聲明了slot元素后，在組件元素內(nèi)寫(xiě)的內(nèi)容就會(huì)跑到它這里了！

 slot屬性對(duì)應(yīng)的內(nèi)容都會(huì)和組件中name一一對(duì)應(yīng)。沒(méi)有名字的，就是默認(rèn)插槽??！

作用域槽：在組件上的屬性，可以在組件元素內(nèi)使用。slot上面的屬性（slot-scope）和值組成的鍵值對(duì)。可以把組件上的屬性/值，在組件元素上使用
5.nextTick函數(shù)

6.vuex

 一個(gè) Vuex 應(yīng)用的核心是 store（倉(cāng)庫(kù)，一個(gè)容器），store包含著你的應(yīng)用中大部分的狀態(tài) (state)。

適用于：中大型單頁(yè)應(yīng)用，你可能會(huì)考慮如何把組件的共享狀態(tài)抽取出來(lái)，以一個(gè)全局單例模式管理，不管在哪個(gè)組件，都能獲取狀態(tài)/觸發(fā)行為，解決問(wèn)題如下：
① 多個(gè)視圖使用于同一狀態(tài)：
傳參的方法對(duì)于多層嵌套的組件將會(huì)非常繁瑣，并且對(duì)于兄弟組件間的狀態(tài)傳遞無(wú)能為力
② 不同視圖需要變更同一狀態(tài)：
采用父子組件直接引用或者通過(guò)事件來(lái)變更和同步狀態(tài)的多份拷貝，通常會(huì)導(dǎo)致無(wú)法維護(hù)的代碼

7.vueRouter

ps:以上均為近期遇到我知識(shí)疏漏的面試題，其他一些基礎(chǔ)類型知識(shí)點(diǎn)也是要掌握的。答案有參考官方文檔，自己看過(guò)的文章，有我自己總結(jié)的，如有錯(cuò)誤，請(qǐng)嚴(yán)厲指正。