摘要：站點(diǎn)接收到請求后，對請求進(jìn)行驗(yàn)證，并確認(rèn)是受害者的憑證，誤以為是無辜的受害者發(fā)送的請求。函數(shù)內(nèi)部語句返回的值，會成為方法回調(diào)函數(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屬性是為了控制文本顯示多少行。說明：必須定義display屬性才可以對box進(jìn)行劃分。 box-orient 屬性指定一個box子元素是否應(yīng)按水平或垂直排列。        
2. :afert在最后加個背景圖然后加上省略號   
3.插件

js:

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

通過$符號 $(document)

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

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

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

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

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)站時就會執(zhí)行這些惡意代碼，這些腳本可以讀取 cookie，session tokens，或者其它敏感的網(wǎng)站信息，對用戶進(jìn)行釣魚欺詐，甚至發(fā)起蠕蟲攻擊等。
XSS 的本質(zhì)是：惡意代碼未經(jīng)過濾，與網(wǎng)站正常的代碼混在一起；瀏覽器無法分辨哪些腳本是可信的，導(dǎo)致惡意腳本被執(zhí)行。由于直接在用戶的終端執(zhí)行，惡意代碼能夠直接獲取用戶的信息，利用這些信息冒充用戶向網(wǎng)站發(fā)起攻擊者定義的請求。

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

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

Csrf解決方案：

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

判斷請求的來源：檢測Referer(并不安全，Referer可以被更改)

使用Token(主流)

Samesite Cookie屬性

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

9.解決跨域的方法

jsonp、cors、iframe 

10.css3新特性

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

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

使用flash

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

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

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

websocket  、 http keep-alive

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

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

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

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

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

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

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

18.對window.proformance的理解

19.對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.對node.js、npm有什么了解

es6

1.遍歷器（iterator）

2.Generator yield

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

3.async await

async函數(shù)返回一個 Promise 對象，可以使用then方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。
async函數(shù)內(nèi)部return語句返回的值，會成為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,會捕獲其所在上下文的this值作為自己的this,任何方法（call,apply,bind）都改變不了其this指向
④箭頭函數(shù)沒有原型屬性
⑤箭頭函數(shù)不能當(dāng)做Generator函數(shù)，不能使用yield關(guān)鍵字

7.filter reduce過濾器

filter : array.filter(callback [,that]);
對于回調(diào)，可以指定數(shù)組元素的值“value”，數(shù)組元素的數(shù)字索引“index”以及存儲數(shù)組元素的數(shù)組對象“arrayObj”。
對于每個數(shù)組元素，callbak返回true的元素將生成為新數(shù)組，callcak未返回true的元素將被跳過，并且不包含在新數(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)
高級用法 ：（1）計(jì)算數(shù)組中每個元素出現(xiàn)的次數(shù)
（2）數(shù)組去重
（3）將二維數(shù)組轉(zhuǎn)化為一維
（3）將多維數(shù)組轉(zhuǎn)化為一維（數(shù)組扁平化）
（4）、對象里的屬性求和

8. Object.assign()

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

vue

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

 每個 Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個 Vue 的根實(shí)例 啟動的：
 1.2.在實(shí)例化 Vue 時，需要傳入一個選項(xiàng)對象，它可以包含數(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ā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。當(dāng)把一個普通 Javascript 對象傳給 Vue 實(shí)例來作為它的 data 選項(xiàng)時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

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

4.slot插槽

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

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

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

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

6.vuex

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

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

7.vueRouter

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