前端面試零碎知識儲備

前言

本文是分爲三大塊分別是css、js、網絡主要是略微講解一下我面試中過程當中的問到的一些面試題。第一次發文章未免有些緊張，想我在掘金社區白piao了半年多了(老臉一紅)，如今面試已經經過了，拿了幾個小小的offer，相對比較清閒，以爲是時候未社區作點力所能及的貢獻了。假如感受這篇小文章對你有所幫助，請給我點個讚唄(畢竟是第一次寫，緊張)。假若有些問題說得不正確，還請各位掘友們在評論區斧正，感激涕零！

1、CSS相關

（一）盒子模型（box-model）

1. 盒子模型分爲兩種，一種是標準的盒模型，另一種是IE盒模型。
2. 區別：盒模型的組成由內到外分別是content、padding、border、margin。標準盒模型的寬高只包括content；而IE盒模型的寬高則是由content、padding、border一塊兒撐開。
3. css中設置
   標準盒模型：box-sizing: content-box
   IE盒模型： box-sizing: border-box

（二）CSS選擇器的優先級

選擇器	CSS權重
!important	infinity
行間樣式	1000
id選擇器	100
class選擇器、屬性選擇器、僞類選擇器	10
標籤選擇器、關係選擇器、僞元素選擇器	1
通配符選擇器	0

注意：這些數值權重採用的是256進制，其中權重是能夠疊加的。

（三）BFC、層疊上下文

1. BFC的定義
   BFC是塊級格式上下文，它是一個獨立的渲染區域，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。
2. 觸發BFC的條件
   • 根元素
   • float的值不爲none
   • overfloat的值不爲visible
   • display的值爲inline-block、flex、table-cell等
   • position的值爲absolute或者fixed
3. BFC的約束條件
   • 內部的Box會在垂直方向上一個接一個的放置
   • 垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊（塌陷），與方向無關。）
   • 每一個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即便浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position爲absolute的元素能夠超出他的包含塊邊界）
   • BFC的區域不會與float的元素區域重疊
   • 計算BFC的高度時，浮動子元素也參與計算
   • BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然。
4. 層疊上下文 層疊上下文是一個三維上的概念，簡單來講若一個元素含有層疊上下文，那麼這個元素在Z軸上就「高人一等」，最終表現就是離觀察者越近。
5. 怎麼產生層疊上下文。
   • HTML中的根元素自己j就具備層疊上下文，稱爲「根層疊上下文」。
   • 普通元素設置position屬性爲非static值並設置z-index屬性爲具體數值，產生層疊上下文。
   • CSS3中的新屬性也能夠產生層疊上下文。
6. 層疊等級
   • 在同一個層疊上下文中，它描述定義的是該層疊上下文中的層疊上下文元素在Z軸上的上下順序。
   • 在其餘普通元素中，它描述定義的是這些普通元素在Z軸上的上下順序。

結論：普通元素的層疊等級優先由其所在的層疊上下文決定，層疊等級的比較只有在當前層疊上下文元素中才有意義。不一樣層疊上下文中比較層疊等級是沒有意義的。

（四）主流瀏覽器以及其內核

主流瀏覽器	內核
Google	Webkit
IE	Trident
Safari	webkit
Firefox	Gecko
Opera	Presto

2、js相關

（一）Nodejs和瀏覽器js的區別

1. 瀏覽器中的js
   遵循ES的語法規範，添加了DOM（文檔對象模型）和BOM（瀏覽器對象模型）
2. Nodejs
   遵循ES的語法規範，由於這是在服務器端操做來實現操做服務器端的script，因此它沒有DOM，它增長了核心API，使用頻繁的API被內置到node環境中，而且它也能夠引進第三方的API。

（二）js讀寫cookie

1. 讀cookie
   console.log(document.cookie)
2. 寫cookie
   document.cookie = 'username=zhangsan;password=123;'

注意：假如服務端設置了httpOnly，那麼能夠防止客戶端讀取cookie，能夠在必定程度上預防xss攻擊。在服務端設置httpOnly樣例

res.setHeader('Set-Cookie', `userid=${userId}; path=/; httpOnly;expires=${getCookieExpires()}`)
複製代碼

（三）常見的類數組對象

arguments、NodeList（節點對象）、String構造出來的實例對象；順便提一下常見的類數組的轉數組的一些方式，以arguments爲例

1. 用點運算符展開(寫法優雅)[...arguments]
2. 用slice方法(性能推薦)Array.prototype.slice.call(arguments)
3. 用splice方法Array.prototype.splice.call(arguments, 0)

（四）如何作一個AJAX Request?

const xhr = new XMLHttPRequest();
xhr.open('POST', 'http://www.baidu.com', true);  // method、url、async
xhr.send('username=zhangsan&password=123');
複製代碼

其中XMLHttpRequest中有readyState和onreadystatechange

1. readyState中有五個狀態

   state	name	description
   0	Uninitialized	XMLHttpRequest 對象已創建，但未初始化(未調用open方法)
   1	open	初始化，open方法已經調用，可是請求尚未被髮送
   2	sent	請求已經發送(send方法已經調用)
   3	receiving	全部響應頭部都已經接收到。響應體開始接收但未完成。
   4	loaded	數據接收完畢, 此時能夠經過responseBody和responseText獲取完整的響應數據

2. onreadystatechange事件回調方法在readystate狀態改變時觸發

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) { // 響應數據接收完畢
        const status = xhr.status;  // 獲取服務器響應的狀態碼
        if(status === 200) {
            let res = xhr.responseText;
            // todo...
        }
    }
}
複製代碼

（五）模塊化之AMD、CMD、Commonjs、ES6 module

1. commonJS用同步的方式加載模塊。在服務端，模塊文件都存在本地磁盤，讀取很是快，因此這樣作不會有問題。可是在瀏覽器端，限於網絡緣由，更合理的方案是使用異步加載。
2. AMD規範採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。
3. CMD是另外一種js模塊化方案，它與AMD很相似，不一樣點在於：AMD推崇依賴前置、提早執行，CMD推崇依賴就近、延遲執行。
4. CommonJS模塊輸出的是一個值的拷貝，ES6模塊輸出的是值的引用。CommonJS模塊是運行時加載，ES6模塊是編譯時輸出接口。
5. exports和module.exports的區別：require導出的內容是module.exports的指向的內存塊內容，並非exports的。區分他們之間的區別就是exports只是module.exports的引用，輔助後者添加內容用的。用內存指向的方式更好理解。

（六）Promise.all()和Promise.race()的區別

let allP = Promise.all([p1, p2, p3]);
let raceP = Promise.race([p1, p2, p3]);
複製代碼

• 他們都是將多個promise實例包裝成一個promise實例
• 可是Promise.all()中只要有一個的狀態返回rejected，那麼promise實例就會變成rejected，假如想要allP是resolved狀態，那麼p1，p2，p3必須都返回resolved才能夠。
• 而Promise.race()只要p一、p二、p3之中有一個實例率先改變狀態，raceP的狀態就跟着改變。那個率先改變的 Promise 實例的返回值，就傳遞給raceP的回調函數。Promise.race()的應用場景例如超時通知用戶。

// 超時通知用戶，超過5s假如沒接收到響應就返回request timeout
const p = Promise.race([
  fetch('/test'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);
複製代碼

（七）執行上下文

執行上下文的生命週期分爲兩個:

1. 建立階段 建立階段主要作的工做就是建立變量對象、創建做用域鏈、肯定this指向。其中建立變量對象可分爲四部曲：
   • 建立變量對象即VO(VariableObject，初始時是一個空對象)。
   • 添加arguments屬性，並賦值。找出當前函數執行環境下的被var定義的變量或者形參，並賦值爲undefined。
   • 將形參和實參進行統一。
   • 找出當前執行環境下的函數定義的函數名做爲VO的屬性，屬性值就爲定義的函數(假如出現與變量相同的屬性名會覆蓋掉，即函數提高的優先級更高)。
2. 執行階段 將執行到的函數環境下的VO轉化爲AO(Activation Object活動對象)，而後同步執行每條語句，須要賦值的話就更新AO對象。

注意：上面講的是函數的執行上下文的建立和執行，全局的執行上下文跟上面的步驟是同樣的，可是它的變量對象是window。

3、網絡相關

（一）HTTP1.0、HTTP1.一、SPDY、HTTP2.0、HTTP3.0

1. HTTP1.1跟HTTP1.0的區別主要體如今 +緩存處理(增長了if-match、cache-control、if-none-match、etag等)

   • 帶寬優化(請求頭引入range，支持只請求資源的某一部分)
   • host處理(請求頭部信息必須帶上host，由於一個ip地址可能對應多個主機)
   • 長鏈接(connection: keep-alive)
   • 錯誤通知管理(增長了24個錯誤狀態碼響應碼)。

2. HTTPS和HTTP的區別

   • HTTPS須要到CA申請證書
   • HTTP協議是運行在TCP之上，HTTPS協議是運行在SSL/TLS之上，SSL/TLS是運行在TCP之上。
   • HTTP傳輸的內容都是明文，HTTPS傳輸的內容都是通過加密的。
   • HTTP的默認端口爲80，HTTPS的默認端口爲443。

3. SPDY與HTTP1.*的區別

   • SPDY是基於HTTPS協議進行加密傳輸的；
   • 下降延遲(採用多路複用的方法)；
   • 能夠設置請求優先級(爲了解決多路複用帶來的問題)；
   • 進行header壓縮；
   • 服務端推送。

4. HTTP2.0跟SPDY的區別 HTTP2.0是基於SPDY進行改進的，不過仍是有一些區別

   • HTTP2.0支持明文傳輸，SPDY強制使用HTTPS。
   • HTTP2.0採用的消息頭壓縮算法是HPACK，SPDY採用的壓縮算法是DEFLATE。

5. HTTP2.0跟HTTP1.*的區別(跟SPDY跟HTTP1.*的區別有點接近)
   新的二進制格式(由於http1.*是基於文本進行解析的，而http2.0是基於二進制格式進行解析的)、多路複用、header壓縮、服務端推送。

6. HTTP3.0 HTTP3.0是基於QUIC協議，而QUIC協議是基於UDP協議的，不過QUIC協議在這上面增長了一些功能例如多路複用、0-RTT(往返時延)、糾錯機制、使用TLS1.3加密、流量控制、有序交付、重傳等。

（二）TCP三次握手和四次揮手

1. TCP三次握手
   • 第一次握手：客戶端向服務端發送帶有SYN標記位的鏈接請求報文段，客戶端進入SYN_SENT狀態。
   • 第二次握手：服務端接收到來自客戶端的請求鏈接的報文後，若是贊成鏈接，則向客戶端發送帶有SYN和ACK標記位的應答報文，發送以後服務端進入了SYN_RECEIVED狀態。
   • 第三次握手：當客戶端接收到服務器端贊成創建鏈接的報文後，客戶端再向服務器端發送帶有ACK標記的確認創建鏈接的報文段，隨後客戶端進入了ESTABLISHED狀態，當服務端收到這個應答後也進入ESTABLISHED 狀態，此時鏈接創建成功。
2. TCP四次揮手
   • 第一次揮手：客戶端向服務端發送帶有FIN標記的請求釋放鏈接的報文段，此時客戶端進入了FIN_WAIT1(終止等待1)狀態。
   • 第二次揮手：服務器端接收到客戶端的請求釋放鏈接的報文段時，會告訴應用層要釋放TCP鏈接了。而後會向客戶端發送帶有ACK的報文，隨後服務端進入了CLOSE_WAIT狀態，客戶端接收到來自服務器端的應答後會進入FIN_WAIT2(終止等待2)。此時不會再接收來自客戶端的數據，可是服務端還能夠發送數據給客戶端。
   • 第三次揮手：若此時還有數據沒發送給客戶端，那麼會繼續發送，發送完畢後會向客戶端發送帶有FIN標記的請求釋放鏈接的報文，而後服務端進入到LAST_ACK狀態。
   • 第四次揮手：客戶端收到服務端的請求釋放鏈接的請求後，會向服務器發送帶有ACK標記的確認應答報文，此時客戶端進入到TIME_WAIT狀態，該狀態會持續2MSL(最大段生存期，指報文段在網絡中生存的時間，超時會被拋棄)時間，若該時間段內沒有服務端的重發請求的話，就進入 CLOSED 狀態。當服務端收到確認應答後，也便進入CLOSED狀態。

結語

你的一個承認，將是我不斷前進的動力。同時我也祝福你們能找到本身滿意的工做，激流勇進，絲絕不殆。最後還祝掘友們，國慶節快樂！！！