前言

這個(gè)問題也是老生常談了，更是經(jīng)常被作為面試的壓軸題出現(xiàn)。在此稍微全面一點(diǎn)記錄下。

一、網(wǎng)頁重定向（Redirect）

檢查網(wǎng)頁重定向

• URL 重定向 （也稱為 URL 轉(zhuǎn)發(fā) ）是一種為頁面、表單或者整個(gè) Web 站點(diǎn)/應(yīng)用提供多個(gè) URL 地址的技術(shù)。
• 當(dāng)實(shí)際資源（如單個(gè)頁面、表單或者整個(gè) Web 應(yīng)用）被遷移到新的 URL 下的時(shí)候，保持（原有）鏈接可用的技術(shù)。

使用情景

• 站點(diǎn)維護(hù)或停機(jī)期間的臨時(shí)重定向。
• 永久重定向?qū)⒃诟恼军c(diǎn)的 URL，上傳文件時(shí)的進(jìn)度頁等之后保留現(xiàn)有的鏈接/書簽。
• 上傳文件時(shí)的表示進(jìn)度的頁面。

二、獲取本地緩存（AppCache）

• 瀏覽器會(huì)先查找當(dāng)前URL的DNS緩存記錄（瀏覽器緩存、系統(tǒng)緩存、路由緩存）。如存在緩存，就直接顯示。如果沒有，接著下一步
• 瀏覽器緩存：簡單來說，瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過的Web資源（如html頁面，圖片，js，數(shù)據(jù)等）拷貝一份副本儲(chǔ)存在瀏覽器中。

三、域名解析（DNS）

DNS解析——解析域名，獲取對(duì)應(yīng)的ip地址（互聯(lián)網(wǎng)協(xié)議地址）

什么是域名解析？過程是怎樣的？

例如https://www.blog.csdn.net/的解析

查詢緩存

• 瀏覽器緩存：瀏覽器會(huì)按照一定的頻率緩存DNS記錄（如有直接獲?。?/li>
• 操作系統(tǒng)緩存：瀏覽器緩存中沒有記錄，再到本地操作系統(tǒng)緩存中查詢，一般在hosts文件（如有直接獲取）
• 路由緩存：路由器也有DNS緩存（如有直接獲?。?/li>

ISP的DNS服務(wù)器

-ISP的DNS服務(wù)器：ISP（Internet Service Provider），是互聯(lián)網(wǎng)服務(wù)提供商的簡稱。ISP有專門的DNS服務(wù)器對(duì)應(yīng)DNS查詢請(qǐng)求。

根服務(wù)器

根服務(wù)器：如果ISP的DNS服務(wù)器沒有找不到，ISP會(huì)代替用戶向根服務(wù)器發(fā)起查詢請(qǐng)求。根域名服務(wù)器會(huì)返回.net域名服務(wù)器的ip地址，然后訪問.net域名服務(wù)器獲取blog.csdn.net域名服務(wù)器的ip地址，最后在訪問blog.csdn.net域名服務(wù)器獲取www.blog.csdn.net的ip地址，最后DNS域名解析完成。
DNS遞歸查詢（可能存在負(fù)載均衡導(dǎo)致每次IP不?樣）

四、建立TCP連接（TCP三次握手）

什么是TCP？

• TCP是傳輸控制協(xié)議，是一種面向連接的、可靠的、基于字節(jié)流的傳輸層通信協(xié)議。

網(wǎng)絡(luò)七層模型

• 應(yīng)用層（ftp，http，smtp，pop3）
• 表示層
• 會(huì)話層
• 傳輸層（TCP）
• 網(wǎng)絡(luò)層（IP）
• 數(shù)據(jù)鏈路層
• 物理層

TCP的三次握手

• 客戶端發(fā)送有待帶有SYN=1，Seq=x的syn包到服務(wù)器，并進(jìn)入到SYN_SEND狀態(tài)，等待服務(wù)器確認(rèn)。（客戶端–服務(wù)器。您好，您好漂亮呀，我想認(rèn)識(shí)您?。?/li>
• 服務(wù)器收到syn包后，必須確認(rèn)客戶的SYN（ack=x+1），同時(shí)發(fā)送一個(gè)自己的SYN（seq=k）包給客戶端（即SYN+ACK包），同時(shí)服務(wù)器進(jìn)入到SYN_RECV狀態(tài)。（服務(wù)器–客戶端。好的，很高興認(rèn)識(shí)您，當(dāng)然您也是蠻帥的哦！）
• 客戶端收到服務(wù)器的SYN+ACK包后，向服務(wù)器發(fā)一個(gè)確認(rèn)包ACK（k+1），這些包發(fā)送完畢后，客戶端和服務(wù)器同時(shí)進(jìn)入到ESTABLISHED狀態(tài)，完成三次握手。（客戶端–服務(wù)器。啊哈哈哈，我也很高興認(rèn)識(shí)您）

Tips：TCP在握手過程中不會(huì)攜帶任何數(shù)據(jù)，三次握手完成之后，才會(huì)進(jìn)行數(shù)據(jù)的傳遞。（即三次握手之后，瀏覽器才發(fā)送Http請(qǐng)求）

為什么需要三次握手？

• 引用《計(jì)算機(jī)網(wǎng)絡(luò)》說的，“三次握手“的目的是“為了防止已經(jīng)失效的連接請(qǐng)求報(bào)文突然又傳送到了服務(wù)端，因而產(chǎn)生了錯(cuò)誤”。
• 即客戶端與服務(wù)器的連接存在時(shí)效性，過了預(yù)定時(shí)間，就放棄等待，各自干別的事了。

那為什么不是四次而是三次呢？

• 因?yàn)榉?wù)器的ACK和SYN包是可以一起發(fā)送的，并不會(huì)產(chǎn)生什么不好的影響，何樂而不為是吧？

五、瀏覽器發(fā)送http請(qǐng)求

建立TCP連接后，客戶端就可以向服務(wù)端發(fā)送http請(qǐng)求報(bào)文了。

請(qǐng)求報(bào)文（包含三部分）：

請(qǐng)求行

請(qǐng)求行包含

• 請(qǐng)求方法
• URL
• 協(xié)議版本
  例：POST /demo/index.html HTTP/1.1

請(qǐng)求方法有哪些?

• get
• post
• put
• delete
• patch
• head
• options
• trace

請(qǐng)求頭

請(qǐng)求頭包含了請(qǐng)求的附加信息，一般以key:value的形式存在。比如關(guān)于客戶端的信息，host（主機(jī)名）。

請(qǐng)求主體。

請(qǐng)求體包含了多個(gè)請(qǐng)求參數(shù)的數(shù)據(jù)，包含了回車符、換行符、請(qǐng)求數(shù)據(jù)（不是所有的請(qǐng)求都帶有請(qǐng)求數(shù)據(jù)）。

六、服務(wù)器響應(yīng)http請(qǐng)求

服務(wù)器會(huì)檢查HTTP請(qǐng)求頭是否包含緩存驗(yàn)證信息，如果驗(yàn)證緩存新鮮，返回304等對(duì)應(yīng)狀態(tài)碼

服務(wù)器收到請(qǐng)求后處理請(qǐng)求，并返回響應(yīng)報(bào)文數(shù)據(jù)。

響應(yīng)報(bào)文包含三部分

• 響應(yīng)行：包含協(xié)議版本，狀態(tài)碼，狀態(tài)碼描述
• 響應(yīng)頭：包含一些附加的響應(yīng)信息
• 響應(yīng)主題：包含回車符、換行符和響應(yīng)返回的數(shù)據(jù)（不是所有的響應(yīng)都有響應(yīng)數(shù)據(jù)）

七、斷開TCP連接（TCP四次揮手）

瀏覽器接收HTTP響應(yīng)后，根據(jù)實(shí)際情況選擇關(guān)閉TCP連接或者保留重?，關(guān)閉TCP連接的四次握?如下：

• 瀏覽器向服務(wù)器發(fā)送報(bào)文（Fin=1，Ack=z，Seq=x），表示客戶端請(qǐng)求報(bào)文已經(jīng)發(fā)送完了，準(zhǔn)備關(guān)閉了。并進(jìn)入到FIN_WAIT_1狀態(tài)。，即斷開連接的請(qǐng)求（太陽下山了，我該回家干飯了）到服務(wù)器
• 服務(wù)器收到客戶端的斷開請(qǐng)求后，發(fā)送確認(rèn)報(bào)文（Ack=x+1，Seq=z），表示統(tǒng)一關(guān)閉。此時(shí)主機(jī)進(jìn)入FIN_WAIT_2狀態(tài)。，即服務(wù)器接到請(qǐng)求后發(fā)送確認(rèn)收到請(qǐng)求的信號(hào)（哦，我知道了）
• 服務(wù)器在發(fā)送完數(shù)據(jù)以后，也會(huì)向客戶端發(fā)送斷開連接的報(bào)文（Fin=1，Ack=x，Seq=y），表示我沒有響應(yīng)數(shù)據(jù)要傳了，準(zhǔn)備關(guān)閉了。此時(shí)進(jìn)入到LAST_ACK狀態(tài)，即服務(wù)器向?yàn)g覽器發(fā)送斷開通知（你走吧，我也該回家抱娃了）；
• 客戶端收到服務(wù)器的關(guān)閉請(qǐng)求后，會(huì)發(fā)送一個(gè)確認(rèn)報(bào)文（Ack=y+1，Seq=x），表示同意關(guān)閉。服務(wù)器收到客戶單的確認(rèn)報(bào)文后關(guān)閉連接。而瀏覽器在等待一段時(shí)間后未收到回復(fù)，則正常關(guān)閉。，即客戶端接到斷開通知后斷開連接并反饋一個(gè)確認(rèn)信號(hào)（嗯，走咯），服務(wù)器收到確認(rèn)信號(hào)后也斷開連接；

Tips：為什么不能三次揮手？有可能數(shù)據(jù)還未傳輸完成，所以服務(wù)器要先確認(rèn)后再發(fā)起斷開消息

八、瀏覽器解析http請(qǐng)求返回的數(shù)據(jù)并渲染頁面

瀏覽器解析htm代碼，并請(qǐng)求html代碼中的資源(如js、css、圖片等）

瀏覽器接收到 HTTP 數(shù)據(jù)包后的解析流程（解析 html、 詞法分析然后解析成 dom 樹、解析 css ?成 css 規(guī)則樹、合并成render 樹，然后layout 、 painting 渲染、復(fù)合圖層的合成、 GPU 繪制、外鏈資源的處理、 loaded 和 DOMContentLoaded 等）

回流：當(dāng)某個(gè)元素的尺寸大小或是位置信息發(fā)生改變的時(shí)候，會(huì)觸發(fā)回流，對(duì)元素的大小和位置進(jìn)行重新計(jì)算。
重繪：當(dāng)某個(gè)元素的背景顏色，文字顏色或是其他不影響周圍或內(nèi)部布局的屬性發(fā)生改變時(shí)會(huì)觸發(fā)重繪。

注：回流一定會(huì)包含著重繪，而重繪不一定會(huì)包含回流。

解析HTML?檔

瀏覽器在接收到服務(wù)器返回的HTML文件后，會(huì)對(duì)其進(jìn)行HTML解析。

構(gòu)件DOM樹

瀏覽器的HTML解析器把HTML解析成DOM 樹（根據(jù)HTML文件的結(jié)構(gòu)從上到下解析HTML，HTML元素以深度優(yōu)先的方式進(jìn)行解析）

• Tokenizing：根據(jù)HTML規(guī)范將字符流解析為標(biāo)記
• Lexing：詞法分析將標(biāo)記轉(zhuǎn)換為對(duì)象并定義屬性和規(guī)則
• DOM construction：根據(jù)HTML標(biāo)記關(guān)系將對(duì)象組成DOM樹

下載資源

解析HTML過程中遇到圖?、樣式表、js?件，會(huì)啟動(dòng)下載

構(gòu)造CSSOM樹

• Tokenizing：字符流轉(zhuǎn)換為標(biāo)記流
• Node：根據(jù)標(biāo)記創(chuàng)建節(jié)點(diǎn)
• CSSOM：節(jié)點(diǎn)創(chuàng)建CSSOM樹

根據(jù)DOM樹和CSSOM樹構(gòu)建渲染樹

• 從DOM樹的根節(jié)點(diǎn)遍歷所有可?節(jié)點(diǎn)（不可見的有script , meta 的標(biāo)簽。css隱藏的節(jié)點(diǎn)，如 display: none等）
• 給每?個(gè)可?節(jié)點(diǎn)，找到對(duì)應(yīng)的CSSOM規(guī)則并應(yīng)?
• 發(fā)布可視節(jié)點(diǎn)的內(nèi)容和計(jì)算樣式

執(zhí)?js腳本

JS 引擎解析過程（ JS 的解釋階段，預(yù)處理階段，執(zhí)?階段?成執(zhí)?上下?， VO ，作 ?域鏈、回收機(jī)制等等）

• script、link、style等標(biāo)簽會(huì)在解析過程產(chǎn)生阻塞
• 外部樣式會(huì)阻塞內(nèi)部腳本的執(zhí)行
  外部樣式和外部腳本可以并行加載，但是外部樣式會(huì)阻塞外部腳本執(zhí)行
  如果外部腳本帶有async屬性，則外部腳本的加載與執(zhí)行不受外部樣式影響
  如果link標(biāo)簽是動(dòng)態(tài)創(chuàng)建生成，不管有無async屬性，都不會(huì)阻塞外部腳本的加載和執(zhí)行。
• 瀏覽器在Document對(duì)象上觸發(fā)DOMContentLoaded事件
• 此時(shí)?檔完全解析完成，瀏覽器可能還在等待如圖?等內(nèi)容加載，等這些內(nèi)容完成載? 并且所有異步腳本完成載?和執(zhí)?，document.readState變?yōu)?code>complete，window觸發(fā) load事件

九、頁面加載完成

• HTML解析過程中會(huì)逐步顯示??（如果未做特殊處理，例如添加全局Loading）
• 頁面完成加載

總結(jié)

結(jié)合上述，瀏覽器輸入url后執(zhí)行的整個(gè)過程大致步驟如下表文章來源地址http://www.zghlxwxcb.cn/news/detail-768618.html

到了這里，關(guān)于瀏覽器輸入url后執(zhí)行的整個(gè)過程（詳細(xì)解析）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！