跳槽人速來，記錄一下大廠的前端面經

1.算法題：實現一個連接，能夠新增節點，刪除節點

function insert(head, n ,val) {
    var node = {
        val: val,
        next: null
    }
    if (head == null) {
        return node
    }
    if (n === 0) {
        node.next = head;
        return node;
    }

    var p = head;
    for(var i=0; i<n-1; i++){
        p = p.next;
    }
    node.next = p.next;
    p.next = node;
    return head;
}
複製代碼

function remove(head, n) {
    if (!head) {
        return null;
    }
    if (head === 0) {
        return head.next;
    }
    var p = head;
    for(var i=0; i<n-1; i++) {
        p = head.next;
    }
    p.next = p.next.next;
    return head;
}
複製代碼

2.實現一個instanceof方法

function myInstanceOf(left, right) {
    if (typeof left !== 'object' || left == null) {
        return false;
    }
    
    let pro = Object.getPrototypeOf(left);
    while(true) {
        if (pro === null) {
            return false;
        }
        if (pro === right.prototype) {
            return true;
        }
        pro = Object.getPrototypeOf(pro);
    }
}
複製代碼

3.響應式佈局怎麼實現 rem佈局 flex佈局

rem

(function(doc, win) {
   var docE1 = doc.documentElement,
       resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
       recalc = function() {
           var clientWidth = docE1.clientWidth;
           if (!clientWidth) return;
           docE1.style.fontSize = clientWidth / 7.5 + 'px';
       }
   
   if(!doc.addEventListener) return;
   win.addEventListener(resizeEvt, recalc, false);
   doc.addEventListener('DOMContentLoaded', recalc, false);  
})(document, window)
複製代碼

4.事件循環機制

• 1.一開始整段腳本做爲第一個宏任務執行
• 2.執行過程當中同步代碼直接執行，宏任務進入宏任務隊列，微任務進入微任務隊列
• 3.當前宏任務執行完出隊，檢查微任務隊列，若是有則依次執行，直到微任務隊列爲空
• 4.執行瀏覽器 UI 線程的渲染工做
• 5.檢查是否有Web worker任務，有則執行
• 6.執行隊首新的宏任務，回到2，依此循環，直到宏任務和微任務隊列都爲空

5.設計模式：觀察-訂閱者模式 與 觀察者模式的區別

6. https過程

HTTPS協議=HTTP協議+SSL/TLS協議,數據傳輸的過程當中，須要使用SSl/TLS協議對數據進行加密和解密，須要用HTTP對加密後的數據進行傳輸，由此能夠看出HTTPS是由HTTP和SSL/TLS一塊兒合做完成的。

• HTTPS爲了兼顧安全與效率，同時使用了對稱加密和非對稱加密。
• 數據是被對稱加密傳輸的，對稱加密過程須要客戶端的一個密鑰， 爲了確保能把該密鑰安全傳輸到服務器端，採用非對稱加密對該密鑰進行加密傳輸，
• 總的來講，對數據進行對稱加密，對稱加密所要使用的密鑰經過非對稱加密傳輸。

爲何要使用對稱加密？

緣由：非對稱加密基於大數運算，好比大素數或者橢圓曲線，是複雜的數學難題，因此消耗計算量，運算速度慢。除了慢，可能還有一個缺點就是須要更多的位數，相同強度的對稱密鑰要比非對稱密鑰短。對稱密鑰通常都128位、256位，而rsa通常要2048位，不過橢圓曲線的會短一點

7.http2的優化點

1. 頭部壓縮： 採用HPACK算法，在客戶端和服務端兩端創建「字典」，用索引號表示重複的字符串， 還採用哈夫曼編碼來壓縮整數和字符串，能夠到達50%-90%的高壓縮率。

2. 多路複用： 採用二進制分幀傳輸，不存在前後關係， 所以也就不會有等待排隊，也就沒有了HTTP 的對頭阻塞問題。 通訊雙方均可以給對分發送二進制幀， 這種二進制幀的雙向傳輸的序列，也叫作流。 HTTP/2用流來在一個TCP鏈接上來進行數據幀的通訊， 這就是多路複用的概念。

3. 設置請求優先級： 在二進制幀當中還有其它的一些字段， 實現了優先級和流量控制等功能

4. 服務器推送 服務器再也不是徹底被動地響應請求，也能夠新建「流」主動向客戶端發送消息。

8.介紹csrf以及應對手段

CSRF 攻擊就是黑客利用了用戶的登陸狀態，並經過第三方的站點來作一些壞事

應對手段：

• 1.充分利用好 Cookie 的 SameSite 屬性。 咱們能夠針對實際狀況將一些關鍵的 Cookie 設置爲 Strict 或者 Lax 模式， 這樣在跨站點請求時，這些關鍵的 Cookie 就不會被髮送到服務器，從而使得黑客的 CSRF 攻擊失效。

• 2. 驗證請求的來源站點。

  HTTP 請求頭中的 Referer 和 Origin 屬性 服務器的策略是優先判斷 Origin，若是請求頭中沒有包含 Origin 屬性， 再根據實際狀況判斷是否使用 Referer 值

• 3. CSRF Token

  第一步，在瀏覽器向服務器發起請求時，服務器生成一個 CSRF Token。 CSRF Token 其實就是服務器生成的字符串，而後將該字符串植入到返回的頁面中。 第二步，在瀏覽器端若是要發起轉帳的請求，那麼須要帶上頁面中的 CSRF Token， 而後服務器會驗證該 Token 是否合法。若是是從第三方站點發出的請求， 那麼將沒法獲取到 CSRF Token 的值，因此即便發出了請求， 服務器也會由於 CSRF Token 不正確而拒絕請求。

9.優化白屏的方式

1. 提取第三方庫，第三方依賴文件以及打包文件放進CDN服務器
2. 對路由進行懶加載
3. 首頁白屏添加骨架屏或loading（僅僅是優化體驗）
4. 優化 webpack 減小模塊打包體積，code-split 按需加載
5. 服務端渲染，在服務端事先拼裝好首頁所需的 html
6. 服務端開啓gzip壓縮
7. element-ui等UI框架按需引入
8. 打包文件分包，提取公共文件包
9. 使用文件名增長hash名，解決新版本須要清除依賴的問題
10. 代碼壓縮
11. 壓縮圖片文件，減小文件體積
12. 圖片資源放進CDN服務器
13. 使用CSS精靈圖

10.繼承與組合的優缺點

11.http緩存

1.先判斷強緩存是否生效： 控制強緩存的字段分別是Expires和Cache-Control(優先級較高),

Expires：是HTTP/1.0控制網頁緩存的字段， 值爲服務器返回該請求結果緩存的到期時間
即再次發起該請求時，若是客戶端的時間小於Expires的值時，直接使用緩存結果。
到了HTTP/1.1，Expire已經被Cache-Control替代

Cache-Control：主要取值
。 public:全部內容都將被緩存（客戶端和代理服務器均可緩存）
。 private: 全部內容只有客戶端能夠緩存，Cache-Control的默認取值
。 no-cache：客戶端緩存內容，可是是否使用緩存則須要通過協商緩存來驗證決定
。 no-store：全部內容都不會被緩存，即不使用強制緩存，也不使用協商緩存
。 max-age=xxx (xxx is numeric)：緩存內容將在xxx秒後失效

內存緩存(from memory cache)和硬盤緩存(from disk cache)
。內存緩存(from memory cache)：內存緩存具備兩個特色，分別是快速讀取和時效性：
。快速讀取：內存緩存會將編譯解析後的文件，直接存入該進程的內存中，
  佔據該進程必定的內存資源，以方便下次運行使用時的快速讀取。
。時效性：一旦該進程關閉，則該進程的內存則會清空。
。硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中，
  讀取緩存須要對該緩存存放的硬盤文件進行I/O操做，而後從新解析該緩存內容，讀取複雜，速度比內存緩存慢。
  
  在瀏覽器中，瀏覽器會在js和圖片等文件解析執行後直接存入內存緩存中，
  那麼當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；
  而css文件則會存入硬盤文件中，因此每次渲染頁面都須要從硬盤讀取緩存(from disk cache)。
複製代碼

2.協商緩存
協商緩存就是強制緩存失效後，瀏覽器攜帶緩存標識向服務器發起請求， 由服務器根據緩存標識決定是否使用緩存的過程

控制協商緩存的字段分別有：Last-Modified/If-Modified-Since 和 Etag/If-None-Match(優先級高)

Last-Modified / If-Modified-Since：
    Last-Modified是服務器響應請求時，返回該資源文件在服務器最後被修改的時間。
    If-Modified-Since則是客戶端再次發起該請求時，攜帶上次請求返回的Last-Modified值，
    經過此字段值告訴服務器該資源上次請求返回的最後被修改時間。
    服務器收到該請求，發現請求頭含有If-Modified-Since字段，
    則會根據If-Modified-Since的字段值與該資源在服務器的最後被修改時間作對比，
    若服務器的資源最後被修改時間大於If-Modified-Since的字段值，則從新返回資源，狀態碼爲200；
    不然則返回304，表明資源無更新，可繼續使用緩存文件

Etag / If-None-Match ：
    Etag是服務器響應請求時，返回當前資源文件的一個惟一標識(由服務器生成)。
    If-None-Match是客戶端再次發起該請求時，攜帶上次請求返回的惟一標識Etag值，
    經過此字段值告訴服務器該資源上次請求返回的惟一標識值。
    服務器收到該請求後，發現該請求頭中含有If-None-Match，
    則會根據If-None-Match的字段值與該資源在服務器的Etag值作對比，一致則返回304，表明資源無更新，
    繼續使用緩存文件；不一致則從新返回資源文件，狀態碼爲200，

總結： 
    強制緩存優先於協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，
    若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，
    協商緩存由服務器決定是否使用緩存，若協商緩存失效，那麼表明該請求的緩存失效，
    從新獲取請求結果，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存  
複製代碼

12.require 與 import 的區別

• 1.原生瀏覽器不支持 require/exports，可以使用支持 CommonJS 模塊規範的 Browsersify、webpack 等打包工具，它們會將 require/exports 轉換成能在瀏覽器使用的代碼。
• 2.import/export 在瀏覽器中沒法直接使用，咱們須要在引入模塊的
• 3.即便 Node.js 13.2+ 已經支持 import/export，Node.js官方不建議在正式環境使用，目前可使用 babel 將 ES6 的模塊系統編譯成 CommonJS 規範（注意：語法同樣，但具體實現還 是require/exports）
• 4. require/exports 是運行時動態加載，import/export 是靜態編譯
• 5. require/exports 輸出的是一個值的拷貝，import/export 模塊輸出的是值的引用
• 6. ES6 模塊能夠在 import 引用語句前使用模塊，CommonJS 則須要先引用後使用
• 7. import/export 只能在模塊頂層使用，不能在函數、判斷語句等代碼塊之中引用；require/exports 能夠
• 8. 是否採用嚴格模式
  • import/export 導出的模塊默認調用嚴格模式。
  • require/exports 默認不使用嚴格模式，能夠自定義是否使用嚴格模式

13.箭頭函數的實現

14.vue的雙向綁定

• 1. Data經過observer轉換成了getter/setter的形式來追蹤變化。
• 2. 當外界經過Watcher讀取數據時，會觸發getter從而將Watch添加到依賴中。
• 3. 當數據發生了變化時，會觸發setter,從而向Dep中的依賴（即Watcher）發送通知
• 4. Watcher接收到通知後，會向外界發送通知，變化通知到外界後可能會觸發視圖更新，
  也有可能觸發用戶的某個回調函數等。

二面

1.離職緣由

2.對 ts 的使用狀況

3.觀察者模式

4.單例模式

5.歸併排序

function mergeSort(arr) {
    const len = arr.length;
    if (len <= 1 ) {
        return arr;
    }
    let mid = Math.floor(len / 2);
    let leftArr = mergeSort(arr.slice(0,mid));
    let rightArr = mergeSort(arr.slice(mid, len));
    arr = mergeArr(leftArr, rightArr);
    return arr;
}

function mergeArr(arr1, arr2){
    let i = 0;
    let j = 0;
    let len1 = arr1.length;
    let len2 = arr2.length;
    let res = [];
    while(i<len1 && j<len2) {
        if (arr1[i] < arr2[j]) {
            res.push(arr1[i])
            i++;
        } else {
            res.push(arr2[j])
            j++;
        }
    }
    if (i<len1) {
        return res.concat(arr1.slice(i));
    } else {
        return res.concat(arr2.slice(j));
    }
}
複製代碼

6.快速排序

function quickSort(arr, left=0; right=arr.length - 1) {
    if (arr.lenth > 1) {
        const lineIndex = partition(arr,left, right);
        if (left < lineIndex -1) {
            quickSort(arr,left,lineIndex -1);
        }
        if (right > lineIndex) {
            quickSort(arr,lineIndex,right);
        }
    }
    return arr;
}
function partition(arr, left, right) {
    let i = left;
    let j = right;
    let pivotValue = arr[Math.floor(left + (right-left)/2)];
    if (i<=j) {
        while(arr[i] < pivotValue) {
            i++
        }
        while(arr[j] > pivotValue) {
            j++
        }
        if (i<=j) {
            swap(arr,i,j);
            i++;
            j--;
        }    
    }
    return i;
}
function swap(arr,i,j){
    [arr[i],arr[j]] = [arr[j],arr[i]];
}
複製代碼

7.this 的使用

• 1.在普通函數中使用 this， this表明全局對象window。
• 2.做爲一個對象的方法調用，此時this指的是調用它的那個對象。
• 3.做爲一個構造函數被調用，此時this指代new出來的那個對象。
• 4.call調用 ，call方法的做用是改變函數的調用對象，此方法的第一個參數爲改變後調用這個函數的對象，this指的是第一個參數，若是不傳參數，默認指的是全局對象window。

8.對 Http3 的瞭解

採用 QUIC 協議： HTTP/3 選擇了一個折衷的方法——UDP 協議， 基於 UDP 實現了相似於 TCP 的多路數據流、傳輸可靠性等功能，咱們把這套功能稱爲 QUIC 協議

HTTP/3 中的 QUIC 協議集合瞭如下幾點功能：

• 1.實現了相似 TCP 的流量控制、傳輸可靠性的功能
• 2.集成了 TLS 加密功能
• 3. 實現了 HTTP/2 中的多路複用功能。
  和 TCP 不一樣，QUIC 實現了在同一物理鏈接上能夠有多個獨立的邏輯數據流。 實現了數據流的單獨傳輸，就解決了 TCP 中隊頭阻塞的問題。

9.http2的優化點

(參考上面的)

10. 網絡攻防 1. 主要有哪些問題 2. Xss 主要針對哪些字符進行轉化

1.Xss： XSS 攻擊就是黑客往頁面中注入惡意腳本，而後將頁面的一些重要數據上傳到惡意服務器。 常見的三種攻擊模式：1.存儲型XSS攻擊 2.反射性XSS攻擊 3.基於DOM的XSS攻擊

主要有三種防範策略： 第一種是經過服務器對輸入的內容進行過濾或者轉碼， 第二種是充分利用好 CSP， 第三種是使用 HttpOnly 來保護重要的 Cookie 信息

2.Csrf(參看上面)

11.項目網絡性能優化

12.主要使用哪一個框架，vue源碼相關的瞭解

13.對前沿技術的瞭解

最後：分享下本身整理的部分知識點文章連接

• 記錄一下3月底到4月的前端開發工程師面經

• 面試高頻的手寫JS代碼

• 某大廠面經

• webpack全方位由淺到深講解，作到簡歷上真正所謂的「熟悉」(系列一)

• webpack全方位由淺到深講解，作到簡歷上真正所謂的「熟悉」(系列二)

• webpack全方位由淺到深講解，作到簡歷上真正所謂的「熟悉」(系列三)

• webpack全方位由淺到深講解，作到簡歷上真正所謂的「熟悉」(系列四)

• webpack全方位由淺到深講解，作到簡歷上真正所謂的「熟悉」(系列五)