總結(jié)，又雜又多

crypto

1、事件循環(huán)

g(x) f(x) g(21)
start promise setTimeOut

2、選擇排序 歸并排序 快速排序
3、hooks
4、graphQL resful
5、深克隆，map，promise 手動實現(xiàn)
6、看過什么書
7、0 100 300 200 200 async/await實現(xiàn)

騰訊

頭條

筆試

四個題型
單選：比較簡單，有問etag不太了解
填空：一個事件循環(huán)，一個this指針
編程：數(shù)組深度，大數(shù)相加
問答：性能優(yōu)化

一面

react diff算法

• tree diff ：DOM節(jié)點跨層級移動較少，忽略

  
  
  image.png
  
  

  （1）React通過updateDepth對Virtual DOM樹進行層級控制。
  （2）對樹分層比較，兩棵樹 只對同一層次節(jié)點 進行比較。如果該節(jié)點不存在時，則該節(jié)點及其子節(jié)點會被完全刪除，不會再進一步比較。
  （3）只需遍歷一次，就能完成整棵DOM樹的比較。
  添加刪除會導(dǎo)致跨層級，所以官方建議少刪除添加，而用隱藏顯示

• component diff：擁有相同類的兩個組件，生成相似樹形結(jié)構(gòu)
  component diff
  React對不同的組件間的比較，有三種策略
  （1）同一類型的兩個組件，按原策略（層級比較）繼續(xù)比較Virtual DOM樹即可。
  （2）同一類型的兩個組件，組件A變化為組件B時，可能Virtual DOM沒有任何變化，如果知道這點（變換的過程中，Virtual DOM沒有改變），可節(jié)省大量計算時間，所以 用戶 可以通過 shouldComponentUpdate() 來判斷是否需要 判斷計算。
  （3）不同類型的組件，將一個（將被改變的）組件判斷為dirty component（臟組件），從而替換 整個組件的所有節(jié)點。

• element diff ：同一層級的一組子節(jié)點，通過唯一id區(qū)分
  當(dāng)節(jié)點處于同一層級時，diff提供三種節(jié)點操作：刪除、插入、移動。
  插入：組件 C 不在集合（A,B）中，需要插入
  刪除：（1）組件 D 在集合（A,B,D）中，但 D的節(jié)點已經(jīng)更改，不能復(fù)用和更新，所以需要刪除 舊的 D ，再創(chuàng)建新的。
  （2）組件 D 之前在 集合（A,B,D）中，但集合變成新的集合（A,B）了，D 就需要被刪除。
  移動：組件D已經(jīng)在集合（A,B,C,D）里了，且集合更新時，D沒有發(fā)生更新，只是位置改變，如新集合（A,D,B,C），D在第二個，無須像傳統(tǒng)diff，讓舊集合的第二個B和新集合的第二個D 比較，并且刪除第二個位置的B，再在第二個位置插入D，而是 （對同一層級的同組子節(jié)點） 添加唯一key進行區(qū)分，移動即可。

在開發(fā)過程中，盡量減少類似將最后一個節(jié)點移動到列表首部的操作，當(dāng)節(jié)點數(shù)量過大或更新操作過于頻繁時，會影響React的渲染性能。

在原型上手寫map，reduce

前端緩存

service worker>memory cache>disk cache>請求
1.根據(jù) Service Worker 中的 handler 決定是否存入 Cache Storage (額外的緩存位置)。
2.根據(jù) HTTP 頭部的相關(guān)字段(Cache-control, Pragma 等)決定是否存入 disk cache
3.memory cache 保存一份資源 的引用，以備下次使用。

cookies： HTML5之前本地儲存的主要方式，大小只有4k，HTTP請求頭會自動帶上cookie，兼容性好
localStorage：HTML5新特性，持久性存儲，即使頁面關(guān)閉也不會被清除，以鍵值對的方式存儲，大小為5M
sessionStorage：HTML5新特性，操作及大小同localStorage，和localStorage的區(qū)別在于sessionStorage在選項卡(頁面)被關(guān)閉時即清除，且不同選項卡之間的sessionStorage不互通
IndexedDB： NoSQL型數(shù)據(jù)庫，類比MongoDB，使用鍵值對進行儲存，異步操作數(shù)據(jù)庫，支持事務(wù)，儲存空間可以在250MB以上，但是IndexedDB受同源策略限制
Web SQL：是在瀏覽器上模擬的關(guān)系型數(shù)據(jù)庫，開發(fā)者可以通過SQL語句來操作Web SQL，是HTML5以外一套獨立的規(guī)范，兼容性差

數(shù)組數(shù)學(xué)方法

map,reduce,filter,foreach,sort,reverse,slice,splice

網(wǎng)絡(luò)安全，哪幾種攻擊方式

1、 XXS： 腳本注入攻擊，用戶輸入可執(zhí)行JS代碼
輸入框，URL，img，$.append嵌入<script>腳本，導(dǎo)致cookie信息泄露
防范方式：

• 輸入內(nèi)容轉(zhuǎn)移
• httpOnly，核心的用戶身份標示或token保存在Cookie中,Cookie中一定要加“HTTPOnly”在結(jié)尾，保證只有在html操作時才能將cookie中的內(nèi)容發(fā)送出去，在JS中無法獲得用戶的Cookie信息
• 禁止用戶在輸入的過程中輸入"<",">","引號","$","_",

2、 XSRF/CSRF:跨站腳本攻擊，網(wǎng)站提交表單被利用，操作到其他網(wǎng)站
來源

• 攜帶業(yè)務(wù)特性參數(shù)的GET 請求
• 被隱藏和偽造的POST 請求
  導(dǎo)致用戶不知情的情況下對其他網(wǎng)站接口進行了提交。
  主要防范方式為
• 使用驗證碼
• get請求不對數(shù)據(jù)進行修改，請求附帶token
• 使用唯一的session作為接口校驗規(guī)則
• 減少在cookie，不讓第三方網(wǎng)站訪問cookie
• 中存儲客戶核心內(nèi)容比如用戶的token、ID、access_token等，將和信息存在前端的storage中

3、網(wǎng)絡(luò)劫持：網(wǎng)站的訪問并非進入目標服務(wù)器，而是中間被轉(zhuǎn)移到其他網(wǎng)站了
解決方法

• 使用https
• 使用非對稱加密方式RSA進行數(shù)據(jù)加密
  4、釣魚網(wǎng)站：高仿引誘提交表單

5、中間人攻擊：中間人攻擊是攻擊方同時與服務(wù)端和客戶端建立起了連接，并讓對方認為連接是安全的

• 用https
  總結(jié)：
  提防用戶自己生產(chǎn)內(nèi)容，對表單進行驗證
  對服務(wù)器傳入的內(nèi)容進行轉(zhuǎn)義輸出，大部分框架已經(jīng)集成了這個功能
  重要的用戶數(shù)據(jù)要進行加密，使用HTTPS傳送或者使用RSA加密
  規(guī)范使用POST/GET請求，原則上，有用戶數(shù)據(jù)的部分統(tǒng)一使用POST

哪幾種設(shè)計模式

1、單例模式

var single = (function(){
    let instance;

    function getInstance(){
　　　　// 如果該實例存在，則直接返回，否則就對其實例化
        if( instance=== undefined ){
            instance= new Construct();
        }
        return instance;
    }

    function Construct(){
        // ... 生成單例的構(gòu)造函數(shù)的代碼
    }

    return {
        getInstance : getInstance
    }
})();

2、工廠模式

//安全模式創(chuàng)建的工廠方法函數(shù)
let UserFactory = function(role) {
  if(this instanceof UserFactory) {
    var s = new this[role]();
    return s;
  } else {
    return new UserFactory(role);
  }
}

//工廠方法函數(shù)的原型中設(shè)置所有對象的構(gòu)造函數(shù)
UserFactory.prototype = {
  SuperAdmin: function() {
    this.name = "超級管理員",
    this.viewPage = ['首頁', '通訊錄', '發(fā)現(xiàn)頁', '應(yīng)用數(shù)據(jù)', '權(quán)限管理']
  },
  Admin: function() {
    this.name = "管理員",
    this.viewPage = ['首頁', '通訊錄', '發(fā)現(xiàn)頁', '應(yīng)用數(shù)據(jù)']
  },
  NormalUser: function() {
    this.name = '普通用戶',
    this.viewPage = ['首頁', '通訊錄', '發(fā)現(xiàn)頁']
  }
}

//調(diào)用
let superAdmin = UserFactory('SuperAdmin');
let admin = UserFactory('Admin') 
let normalUser = UserFactory('NormalUser')

3、觀察者模式
4、裝飾器模式
5、適配器模式
6、代理模式

回流重繪

回流：長寬等發(fā)生變化，會引起布局變化
重繪：顏色，顯示變化
1、使用transform代替
2、visibility代替display:none
3、避免table布局
4、css層級減少
5、動畫用在position為absolute或fixed，復(fù)雜元素絕對定位脫離文檔流
6、css3硬件加速，transform\opacity，filter不引起
7、js少操作dom，樣式

原型繼承

ip mac

虛擬（一個地址可以對應(yīng)多個IP），物理（網(wǎng)卡）

位運算

加法，找出數(shù)組中唯一出現(xiàn)的數(shù)

二面

vue @click

jQuery 事件代理

rem如何實現(xiàn)

跨域

同源策略，協(xié)議域名端口都一致
1、后端加Access-Control-Allow等字段，不安全
2、腳手架webpack，node正向代理，proxy
3、nginx反向代理，proxy_pass
4、jsonp，script標簽沒有同源限制