前端面試-面試題梳理總結（持續更新...）

面試血淚史

不要問我面的是否是架構師。我只是面的低級前端。總結不易點個贊吧。

JS

1. 包裝類跟普通類有什麼區別？new String() 和String()的區別

答：：js 提供了3個包裝類 分別是 new String()，new Number()，new Boolean()。因爲基礎類型不能添加屬性和方法，js的包裝類的做用是將基礎類型包裝成一個對象，這樣就能夠有屬性和方法。

tips:當咱們對一些基本數據類型的值去調用屬性和方法時，瀏覽器會臨時使用包裝類將其轉換爲對象，而後在調用對象的屬性和方法；調用完之後，在將其轉換爲基本數據類型。

2. promise.then 是怎麼實現鏈式調用的

答： 經過從新return 一個new Promise 來實現鏈式調用

3. 多調用幾回bind 好比bind a bind b 最後this指向誰 爲啥

答： 永遠指向第一次調用bind時傳入的上下文，由於bind以後的調用都是綁定在這個上下文上。

4. v8引擎回收機制簡述

答： v8垃圾回收主要經過兩個策略：

• 標記清除

• 引用計數

  標記清除是js最經常使用的垃圾回收機制。垃圾回收程序運行的時候，會標記內存中存儲的全部變量。而後，它會將全部在上下文中的變量，以及被在上下文中的變量引用的變量的標記去掉。在此以後再被加上標記的變量就是待刪除的了，緣由是任何在上下文中的變量都訪問不到它們了。隨後垃圾回收程序作一次內存清理，銷燬帶標記的全部值並收回它們的內存。

  引用計數是對每一個值都記錄它被引用的次數。聲明變量並給它賦一個引用值時，這個值的引用數爲 1。若是同一個值又被賦給另外一個變量，那麼引用數加 1。相似地，若是保存對該值引用的變量被其餘值給覆蓋了，那麼引用數減 1。當一個值的引用數爲 0 時，就說明沒辦法再訪問到這個值了，所以能夠安全地收回其內存了。垃圾回收程序下次運行的時候就會釋放引用數爲 0 的值的內存。（以上摘自js紅寶書第四版）

5. v8回收算法運行時會阻塞js嗎？爲何

答： 會阻塞。

6. 怎麼優化垃圾回收機制

答： https://www.cnblogs.com/cheng... 總結就是多用新生代算法

7. 做用域鏈簡述。怎麼能獲取函數內部變量？

答： 做用域鏈就是變量向上查找過程。能夠經過函數內部return 一個攜帶函數內部變量的閉包使得外部能夠訪問函數內部的變量

8. 閉包簡述，怎麼避免內存泄漏

答： 不管什麼時候聲明新函數並將其賦值給變量，都要存儲函數定義和閉包，閉包包含在函數建立時做用域中的全部變量，相似於揹包，函數定義附帶一個小揹包，他的包中存儲了函數建立時做用域中的全部變量。及時將指針指向null能夠避免內存泄漏。

9. class 類能夠枚舉嗎？類 instanceof Function 輸出什麼?

答： 類的內部全部定義的方法，都是不可枚舉的。類的數據類型就是函數，類自己就指向構造函數。 代碼以下：

class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

class Fn{}
Fn instanceof Function // true

const a = new Fn()
a instanceof Function // false

webpack

1. webpack 是怎麼實現分模塊打包的？

答： 能夠經過splitChunks 實現。

webpack 中如下三種常見的代碼分割方式:

• 入口起點：使用 entry 配置手動地分離代碼。
• 動態導入：經過模塊的內聯函數調用來分離代碼。
• 防止重複：使用 splitChunks 去重和分離 chunk。 第一種方式，很簡單，只須要在 entry 裏配置多個入口便可。

splitChunks 代碼拆分

splitChunks: {
    // 表示選擇哪些 chunks 進行分割，可選值有：async，initial和all
    chunks: "async",
    // 表示新分離出的chunk必須大於等於minSize，默認爲30000，約30kb。
    minSize: 30000,
    // 表示一個模塊至少應被minChunks個chunk所包含才能分割。默認爲1。
    minChunks: 1,
    // 表示按需加載文件時，並行請求的最大數目。默認爲5。
    maxAsyncRequests: 5,
    // 表示加載入口文件時，並行請求的最大數目。默認爲3。
    maxInitialRequests: 3,
    // 表示拆分出的chunk的名稱鏈接符。默認爲~。如chunk~vendors.js
    automaticNameDelimiter: '~',
    // 設置chunk的文件名。默認爲true。當爲true時，splitChunks基於chunk和cacheGroups的key自動命名。
    name: true,
    // cacheGroups 下能夠能夠配置多個組，每一個組根據test設置條件，符合test條件的模塊，就分配到該組。
    // 模塊能夠被多個組引用，但最終會根據priority來決定打包到哪一個組中。默認將全部來自 
    // node_modules目錄的模塊打包至vendors組，將兩個以上的chunk所共享的模塊打包至default組。
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10 // 緩存組優先級
        },
        // 
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true  // 可設置是否重用該chunk
        }
    }
}

經過 cacheGroups，咱們能夠定義自定義 chunk 組，經過 test 條件對模塊進行過濾，符合條件的模塊分配到相同的組。

2. webpack4 的tree-shaking是什麼？怎麼實現的？在什麼狀況下會失效？爲何？

答： tree-shaking本質是webpack打包時用來捨棄無用的代碼。

工做原理： 在ES6之前，咱們可使用CommonJS引入模塊：require()，這種引入是動態的，也意味着咱們能夠基於條件來導入須要的代碼

let module
if(true){
    module = require('a')
}else{
    module = require('b')
}

CommonJS規範沒法肯定在實際運行前須要或者不須要某些模塊，因此CommonJS不適合tree-shaking機制

ES6的import語法能夠完美使用tree shaking，由於能夠在代碼不運行的狀況下就能分析出不須要的代碼。

由於tree shaking只能在靜態modules下工做。ECMAScript 6 模塊加載是靜態的,所以整個依賴樹能夠被靜態地推導出解析語法樹。

side effects是指那些當import的時候會執行一些動做，可是不必定會有任何export

tree shaking 不能自動的識別哪些代碼屬於side effects，所以手動指定這些代碼顯得很是重要。若是全部代碼都不包含反作用，咱們就能夠簡單地將該屬性標記爲false，來告知 webpack，它能夠安全地刪除未用到的export導出。

總結： ES6 Module引入進行靜態分析，故而編譯的時候正確判斷到底加載了那些模塊。再判斷那些模塊和變量未被使用或者引用，進而刪除對應代碼。

另外，webpack中能夠在項目package.json文件中，添加一個 「sideEffects」 屬性,手動指定由反作用的腳本。

3. env 知道嗎？是用來幹什麼的？項目須要單獨安裝嗎？爲何？

env是nodejs裏內置的一個對象，能夠利用process.env拿到當前項目運行環境的信息。不須要獨立安裝，由於是nodejs的內置對象。

4. import 和 require 的區別

答：

1. CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
2. CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。
3. CommonJs 是單個值導出，ES6 Module能夠導出多個
4. CommonJs 是動態語法能夠寫在判斷裏，ES6 Module 靜態語法只能寫在頂層
5. CommonJs 的 this 是當前模塊，ES6 Module的 this 是 undefined

5. 知道什麼是靜態分析嗎？

答： es modules能夠在代碼不運行的狀況下對代碼進行分析，能夠知道哪些模塊有沒有被使用。

6. webpack babel是如何工做的？

答：

• 1. 詞法解析 。將字符串形式的代碼轉換爲Tokens(令牌)，Tokens 能夠視做是一些語法片斷組成的數組。
• 1. 語法解析。把Tokens轉換爲抽象語法樹AST
• 1. 轉換階段。會對 AST 進行遍歷，在這個過程當中對節點進行增刪查改。Babel 全部插件都是在這個階段工做, 好比語法轉換、代碼壓縮。
• 1. 輸出階段。將通過轉換的AST經過babel-generator再轉換成js代碼，過程就是深度優先遍歷整個AST，而後構建能夠表示轉換後代碼的字符串。同時這個階段還會生成Source Map。

7. webpack plugins的執行時機？

答： 加載文件完成後，輸出文件前，不一樣的plugins有不一樣的執行時機。

node

1. koa 源碼瞭解過，是怎麼實現的？

答： koa經過對http模塊的封裝，在內部實現了一個context上下文的概念，把res跟req都放在ctx上面，而且對req和res進行優雅的setter/getter處理，調用方式更簡單。

洋蔥模型經過將中間件數組裏的異步方法經過dispatch去遞歸調用，因爲在app.use中去調用next方法時去調用下一個中間件。

洋蔥模型實現僞代碼

function compose(middlewares){
    return function(){
        return dispatch(0)
        function dispatch(i){
            let fn = middlewares[i]
            if(!fn) return Promise.resolve()
            return Promise.resolve(fn(function next(){
                // promise 完成以後在執行下一個
                return dispatch(i+1)
            }))
        }
    }
}

2. koa 洋蔥模型

答： 見上

http

1. http 和 https的區別

答： HTTPS就是將HTTP運行在TLS/SSL的加密安全措施下。

• https須要申請CA證書
• https更安全。運用了加密手段
• https端口443 http是80

2. udp和tcp的區別

答： 見個人另外一篇文章TCP/IP

3. http3.0是基於udp的，爲何udp面向無鏈接還會選擇udp？

答： 由於udp高效。並且在應用層解決了udp的不可靠性問題。

4. http3.0怎麼解決udp的丟包問題？

答： http3不只僅只是簡單將傳輸協議替換成了 UDP。還基於 UDP 協議在「應用層」實現了 QUIC 協議。它具備相似 TCP 的鏈接管理、擁塞窗口、流量控制的網絡特性，至關於將不可靠傳輸的 UDP 協議變成「可靠」的了，因此不用擔憂數據包丟失的問題。並且， QUIC 協議會保證數據包的可靠性，每一個數據包都有一個序號惟一標識。當某個流中的一個數據包丟失了，即便該流的其餘數據包到達了，數據也沒法被 HTTP/3 讀取，直到 QUIC 重傳丟失的報文，數據纔會交給 HTTP/3。

5. tcp除了你剛剛說的窗口控制，還有哪些控制？

答： 重發控制，流控制，擁塞控制

6. tcp重發機制是基於哪一個時間節點

答： 引入兩個概念：

• RTT（Round Trip Time）：往返時延，也就是數據包從發出去到收到對應 ACK 的時間。RTT 是針對鏈接的，每個鏈接都有各自獨立的 RTT。
• RTO（Retransmission Time Out）：重傳超時，也就是前面說的超時時間。

我通常認爲是兩倍的RTT。