前端常見面試題
TODO：
- 原型鏈
- 宏任務、微任務
1、關于解構賦值
ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，只有當等號右邊的數組成員嚴格等于undefined，默認值才會生效。
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
2、W3C標準
W3C（萬維網聯盟），萬維網聯盟標準不是某一個標準，而是一些列標準的集合。
網頁主要有三部分組成：結構（Structure）、表現（Presentation）、行為（Behavior）。對應的標準也有三方面：結構化標準主要包括XHTML和XML，表現標準語言主要包括CSS、行為標準主要包括（如W3C DOM）、ECMAScript等。這些標準大部分是W3C起草發布，也有一是其他標準組織制定的標準，比如ECMAScript 的ECMAScript的標準。
制定標準是讓瀏覽器遵守標準，讓程序員按照標準來編寫程序，由此讓程序能夠支持所有瀏覽器，能夠滿足盡可能多的用戶。
2.1、<!DOCTYPE> 聲明
<!DOCTYPE> 聲明不是 HTML 標簽，它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因為 HTML 4.01 基于 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。HTML5 不基于 SGML，所以不需要引用 DTD。：請始終向 HTML 文檔添加 <!DOCTYPE> 聲明，這樣瀏覽器才能獲知文檔類型。
在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：
<!DOCTYPE html>
其它版本的HTML的 DOCTYPE 聲明請參考：http://www.w3school.com.cn/tags/tag_doctype.asp
2.2、<meta> 標簽
<meta> 元素提供了有關頁面的信息，比如針對搜索引擎和更新頻度的描述和關鍵詞。<meta> 標簽位于文檔的頭部，在HTML中沒有結束標簽，標簽不包含任何內容，而是在標簽的屬性定義與文檔相關聯的名稱/值對。
在 HTML 4.01 中定義字符集：
<meta http-equiv="content-type" content="text/html; charset="UTF-8">
在 HTML 5 中有一個新的 charset 屬性，它使字符集的定義更加容易，使用方法：
<meta charset="UTF-8">
詳情參考：http://www.w3school.com.cn/tags/tag_meta.asp
其它標準請參考：https://blog.csdn.net/erdfty/article/details/81363893
3、DOM
DOM 是 Document Object Model（文檔對象模型）的縮寫。
W3C DOM 標準被分為 3 個不同的部分：
- 核心 DOM - 針對任何結構化文檔的標準模型
- XML DOM - 針對 XML 文檔的標準模型
- HTML DOM - 針對 HTML 文檔的標準模型
3.1、HTML DOM
HTML DOM 是：
- HTML 的標準對象模型
- HTML 的標準編程接口
- W3C 標準
HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。換言之，HTML DOM 是關于如何獲取、修改、添加或刪除 HTML 元素的標準。
在 HTML DOM 中，所有事物都是節點。
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
- 整個文檔是一個文檔節點
- 每個 HTML 元素是元素節點
- HTML 元素內的文本是文本節點
- 每個 HTML 屬性是屬性節點
- 注釋是注釋節點
詳情參考：http://www.w3school.com.cn/htmldom/dom_nodes.asp
4、瀏覽器如何渲染頁面的？
1、HTML被HTML解析器解析成DOM樹。
2、CSS被CSS解析器解析成CSS規則樹。
3、瀏覽器會將CSS規則樹附著在DOM樹上，并結合兩者生成渲染樹Render Tree。
4、生成布局（flow）。瀏覽器通過解析計算出每一個渲染樹節點的位置和大小，在屏幕上畫出渲染樹的所有節點。
5、將布局繪制（paint）在屏幕上，顯示出整個頁面
5、說一說new會發生什么？
- 創建一個空對象
- 將新對象的__proto__指向構造函數的prototype（原型對象）
- 讓構造函數內的this指向該對象
- 判斷是否有返回值，如果有則返回該返回值，如果沒有則返回this
6、瀏覽器輸入URL后發生了什么？
1、解析URL：判斷瀏覽器輸入的是搜索內容還是URL；
2、查找緩存：如果能找到緩存則直接返回頁面，如果沒有緩存則需要發送網絡請求頁面；
3、DNS域名解析；
4、三次握手建立TCP連接；
5、發起HTTP請求；
6、服務器響應并返回結果；
7、通過四次揮手釋放TCP連接；
8、瀏覽器渲染；
9、js引擎解析
7、TCP協議
7.1、三次握手
開始客戶端和服務器都處于CLOSED狀態，然后服務端開始監聽某個端口，進入LISTEN狀態
第一次握手(SYN=1, seq=x)，發送完畢后，客戶端進入 SYN_SEND 狀態
第二次握手(SYN=1, ACK=1, seq=y, ACKnum=x+1)， 發送完畢后，服務器端進入 SYN_RCVD 狀態。
第三次握手(ACK=1，ACKnum=y+1)，發送完畢后，客戶端進入 ESTABLISHED 狀態，當服務器端接收到這個包時,也進入 ESTABLISHED 狀態，TCP 握手，即可以開始數據傳輸。
7.1.1、為什么連接建立需要三次握手，而不是兩次握手？
防止已經失效的連接請求報文段又被服務端接收到，從而產生錯誤讓服務器端浪費資源。
情景假設：A發出連接請求，但因連接請求報文丟失而未收到確認報文，于是A便超時重發請求報文，然后收到了B發來的確認，建立連接，數據傳輸完畢后，就釋放了連接。但如果A發出的第一個請求報文并沒有失效而是滯留了，過段時間后到達了B，此時B就會向A發出確認報文。如果沒有第三次握手，那么只要發出確認B就以為建立了新的連接，由于A早已處于CLOSED狀態，并不會理睬B的確認報文，也不會向B發送數據，而此時 B 在繼續等待 A 發來數據，從而導致白白浪費資源。
7.2、TCP四次揮手
第一次揮手(FIN=1，seq=u)，發送完畢后，客戶端進入FIN_WAIT_1 狀態
第二次揮手(ACK=1，ack=u+1,seq =v)，發送完畢后，服務器端進入CLOSE_WAIT 狀態，客戶端接收到這個確認包之后，進入 FIN_WAIT_2 狀態
第三次揮手(FIN=1，ACK1,seq=w,ack=u+1)，發送完畢后，服務器端進入LAST_ACK 狀態，等待來自客戶端的最后一個ACK。
第四次揮手(ACK=1，seq=u+1,ack=w+1)，客戶端接收到來自服務器端的關閉請求，發送一個確認包，并進入 TIME_WAIT狀態，等待了某個固定時間（兩個最大段生命周期，2MSL，2 Maximum Segment Lifetime）之后，沒有收到服務器端的 ACK ，認為服務器端已經正常關閉連接，于是自己也關閉連接，進入 CLOSED 狀態。服務器端接收到這個確認包之后，關閉連接，進入 CLOSED 狀態。
7.2.1、為什么要 4 次揮手？
主要是為了確保數據能夠完成傳輸。 在關閉連接時，當收到主動關閉方的 FIN 報文通知時，它僅僅表示它沒有數據發送給你了，但不代表你已經把所有的數據都全部發送給對方了，所以你不會馬上會關閉傳輸數據的SOCKET，而是回復一個ACK確認收到對方的關閉請求，而你需要把剩下的數據傳輸給對方之后，再發送 FIN 報文給對方來表示你同意現在可以關閉連接了，所以這里的 ACK 報文和 FIN 報文多數情況下都是分開發送的。
例子：
小明和小紅打電話聊天，通話差不多要結束時，小紅說“我沒啥要說的了”，小明回答“我知道了”。但是小明可能還會有要說的話，小紅不能要求小明跟著自己的節奏結束通話，于是小明可能又嘰嘰歪歪說了一通，最后小明說“我說完了”，小紅回答“知道了”，這樣通話才算結束。
浙公網安備 33010602011771號