摘要：站點接收到請求后，對請求進行驗證，并確認是受害者的憑證，誤以為是無辜的受害者發送的請求。函數內部語句返回的值，會成為方法回調函數的參數。

記錄我最近面試缺漏的知識點

css

1.bootstrap如何實現手機PC端自適應

媒體查詢

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進行劃分。 box-orient 屬性指定一個box子元素是否應按水平或垂直排列。        
2. :afert在最后加個背景圖然后加上省略號   
3.插件

js:

1.$和dom對象轉化

通過$符號 $(document)

2.jq鏈式調用原理

 return 實現鏈式調用 （可研讀jq源碼）

3.$this 和 this區別

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

4.websocket基于什么協議

  TCP

5.TCP和HTTP區別

 TCP傳輸層協議 HTTP應用層協議 

6.canvas和svg區別

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

7.xss、csrf攻擊

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

Xss解決方案：代碼嚴謹 加驗證 編碼

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

Csrf解決方案：

添加驗證碼(體驗不好)

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

使用Token(主流)

Samesite Cookie屬性

8.cookie和session區別 cookie如何實現session （需要依靠后臺） 同源策略 可以跨域嗎

9.解決跨域的方法

jsonp、cors、iframe 

10.css3新特性

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

11.如何實現一個音頻播放 資源不被竊取

使用flash

12.如何實現發微博還剩多少字 漢字英文 表情

正則驗證轉化Unicode

13.如何實現長連接

websocket  、 http keep-alive

14.原型鏈 、prototype是什么 可以實現繼承嗎

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

15.實現繼承的幾種方式

16.原型繼承與new構造繼承的優缺點

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

17.如何做緩存 瀏覽器如何實現緩存

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

18.對window.proformance的理解

19.對Event-loop的理解

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

先執行微任務再執行宏任務

20. 數組去重 數組扁平化

21.字符串拼接方法

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

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

23.對node.js、npm有什么了解

es6

1.遍歷器（iterator）

2.Generator yield

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

3.async await

async函數返回一個 Promise 對象，可以使用then方法添加回調函數。當函數執行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執行函數體內后面的語句。
async函數內部return語句返回的值，會成為then方法回調函數的參數。
async內的代碼是同步的

4.promise 狀態改變 里面內容的同步異步

Promise 構造函數是同步執行的，promise.then 中的函數是異步執行的。

5.promise 和 async關系

6.箭頭函數和普通函數的區別

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

7.filter reduce過濾器

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

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

8. Object.assign()

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

vue

1.對vue實例的了解

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

2.vue的雙向數據綁定 數據劫持defineProperty

 采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

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

4.slot插槽

插槽就是Vue實現的一套內容分發的API，將元素作為承載分發內容的出口。

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

 slot屬性對應的內容都會和組件中name一一對應。沒有名字的，就是默認插槽！！

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

6.vuex

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

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

7.vueRouter

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