總結(jié)，又雜又多

crypto

1、事件循環(huán)

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

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

騰訊

頭條

筆試

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

一面

react diff算法

• tree diff ：DOM節(jié)點(diǎn)跨層級(jí)移動(dòng)較少，忽略

  
  
  image.png
  
  

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

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

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

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

在原型上手寫map，reduce

前端緩存

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

cookies： HTML5之前本地儲(chǔ)存的主要方式，大小只有4k，HTTP請(qǐng)求頭會(huì)自動(dòng)帶上cookie，兼容性好
localStorage：HTML5新特性，持久性存儲(chǔ)，即使頁(yè)面關(guān)閉也不會(huì)被清除，以鍵值對(duì)的方式存儲(chǔ)，大小為5M
sessionStorage：HTML5新特性，操作及大小同localStorage，和localStorage的區(qū)別在于sessionStorage在選項(xiàng)卡(頁(yè)面)被關(guān)閉時(shí)即清除，且不同選項(xiàng)卡之間的sessionStorage不互通
IndexedDB： NoSQL型數(shù)據(jù)庫(kù)，類比MongoDB，使用鍵值對(duì)進(jìn)行儲(chǔ)存，異步操作數(shù)據(jù)庫(kù)，支持事務(wù)，儲(chǔ)存空間可以在250MB以上，但是IndexedDB受同源策略限制
Web SQL：是在瀏覽器上模擬的關(guān)系型數(shù)據(jù)庫(kù)，開(kāi)發(fā)者可以通過(guò)SQL語(yǔ)句來(lái)操作Web SQL，是HTML5以外一套獨(dú)立的規(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，核心的用戶身份標(biāo)示或token保存在Cookie中,Cookie中一定要加“HTTPOnly”在結(jié)尾，保證只有在html操作時(shí)才能將cookie中的內(nèi)容發(fā)送出去，在JS中無(wú)法獲得用戶的Cookie信息
• 禁止用戶在輸入的過(guò)程中輸入"<",">","引號(hào)","$","_",

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

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

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

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

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

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

哪幾種設(shè)計(jì)模式

1、單例模式

var single = (function(){
    let instance;

    function getInstance(){
　　　　// 如果該實(shí)例存在，則直接返回，否則就對(duì)其實(shí)例化
        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è)置所有對(duì)象的構(gòu)造函數(shù)
UserFactory.prototype = {
  SuperAdmin: function() {
    this.name = "超級(jí)管理員",
    this.viewPage = ['首頁(yè)', '通訊錄', '發(fā)現(xiàn)頁(yè)', '應(yīng)用數(shù)據(jù)', '權(quán)限管理']
  },
  Admin: function() {
    this.name = "管理員",
    this.viewPage = ['首頁(yè)', '通訊錄', '發(fā)現(xiàn)頁(yè)', '應(yīng)用數(shù)據(jù)']
  },
  NormalUser: function() {
    this.name = '普通用戶',
    this.viewPage = ['首頁(yè)', '通訊錄', '發(fā)現(xiàn)頁(yè)']
  }
}

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

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

回流重繪

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

原型繼承

ip mac

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

位運(yùn)算

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

二面

vue @click

jQuery 事件代理

rem如何實(shí)現(xiàn)

跨域

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