當(dāng)輸入U(xiǎn)RL、敲下回車、最后瀏覽器頁(yè)面顯示，這里面有什么故事？
當(dāng)輸入U(xiǎn)RL、敲下回車、最后瀏覽器頁(yè)面顯示，這里面有什么故事？鍵盤(pán)到操作系統(tǒng)、操作系統(tǒng)到瀏覽器、瀏覽器到服務(wù)器、服務(wù)器返回?cái)?shù)據(jù)頁(yè)面渲染……
鍵盤(pán)到操作系統(tǒng)
回車鍵按下時(shí)，與鍵盤(pán)相關(guān)的電路閉合，通過(guò)消抖操作，鍵盤(pán)的電路系統(tǒng)將回車鍵轉(zhuǎn)化為鍵碼13。按鍵被按下會(huì)觸發(fā)中斷事件，回車鍵的鍵碼被編碼并通過(guò)通用串行總線(USB)傳輸?shù)街袛嗾?qǐng)求線上(IRQ)，中斷控制器接收到IRQ上的信號(hào)后，會(huì)映射一個(gè)中斷向量。中斷描述符表將中斷向量映射到對(duì)應(yīng)的處理函數(shù)上(中斷處理器)。
操作系統(tǒng)到瀏覽器
操作系統(tǒng)通過(guò)相應(yīng)的API函數(shù)獲取到當(dāng)前的活動(dòng)窗口(該瀏覽器)并獲取到當(dāng)前瀏覽器地址欄句柄，操作系統(tǒng)使用sendMessage函數(shù)將消息添加到地址欄句柄的消息隊(duì)列中，sendMessage函數(shù)參數(shù)將帶有按鍵以及按鍵的信息。然后瀏覽器地址欄句柄的消息處理函數(shù)將被調(diào)用，處理消息隊(duì)列中的消息。
瀏覽器到服務(wù)器
處理URL
關(guān)鍵字or地址：瀏覽器搜先分析地址欄的內(nèi)容是關(guān)鍵字還是URL。若地址欄的為關(guān)鍵字，則使用瀏覽器的搜索引擎搜索該關(guān)鍵字。當(dāng)把文字作為關(guān)鍵字傳遞給搜索引擎時(shí)，通常會(huì)在URL后面加上一個(gè)參數(shù)，這個(gè)參數(shù)告訴搜索引擎搜索來(lái)自哪個(gè)瀏覽器。
HSTS列表:?HSTS強(qiáng)制客戶端使用HTTPS與服務(wù)器創(chuàng)建連接。若訪問(wèn)的URL在HSTS列表里，則瀏覽器會(huì)把HTTP協(xié)議變?yōu)镠TTPS。
編碼：?對(duì)URL進(jìn)行Unicode編碼
DNS查詢
瀏覽器處理完URL后，將獲取要訪問(wèn)的URL所在服務(wù)器的地址。這時(shí)需要進(jìn)行DNS查詢。
DNS查詢過(guò)程：
1.查詢本地DNS緩存
2.查看本地host表
3.查詢DNS服務(wù)器在DNS服務(wù)器上進(jìn)行查詢時(shí)，首先查詢本地DNS服務(wù)器。若本地DNS 服務(wù)器上有域名的緩存，則本地DNS服務(wù)器將對(duì)應(yīng)IP發(fā)送給查詢方。若本地DNS服務(wù)器上沒(méi)有域名的緩存，則向根域名服務(wù)器發(fā)起查詢(遞歸)。根域名服務(wù)器收到請(qǐng)求后，會(huì)返回下一級(jí)域名信息的DNS服務(wù)器地址。本地DNS服務(wù)器收到地址后繼續(xù)進(jìn)行查詢(迭代)，最后獲取到目標(biāo)域名的IP并發(fā)送給查詢方。
TCP連接
此時(shí)獲取到URL中域名的IP地址，通過(guò)協(xié)議可以獲取到端口(HTTP:80、HTTPS:443)，下一步該進(jìn)行瀏覽器與服務(wù)器之間的連接。
瀏覽器使用socket函數(shù)來(lái)進(jìn)行TCP連接，初始化socket時(shí)參數(shù)為 AF_INET和SOCK_STREAM。
TCP建立連接過(guò)程（三次握手）：
1.客戶端發(fā)送一個(gè)TCP包。設(shè)置SYN=1(請(qǐng)求建立連接)、Seq=X(隨機(jī)產(chǎn)生的序列號(hào))
2.服務(wù)器發(fā)回確認(rèn)包(ACK)應(yīng)答。SYN=1、ACK=1、ACK number = X+1、Seq = Y(隨機(jī)產(chǎn)生)
3.客戶端再次發(fā)送確認(rèn)包(ACK) 。SYN=0、ACK=1、ACK number= Y+1、Seq = X+1
TCP斷開(kāi)連接過(guò)程（四次揮手）：
1.客戶機(jī)給服務(wù)器一個(gè)FIN為1的TCP報(bào)文
2.服務(wù)器返回給客戶端一個(gè)確認(rèn)ACK報(bào)文
3.服務(wù)器給客戶端發(fā)送一個(gè)FIN報(bào)文
4.客戶機(jī)回復(fù)ACK報(bào)文
服務(wù)器動(dòng)作
從瀏覽器發(fā)起請(qǐng)求到請(qǐng)求到頁(yè)面數(shù)據(jù)的過(guò)程中，可能會(huì)經(jīng)過(guò)負(fù)載均衡等中間部分
負(fù)載均衡
| 方式 | 說(shuō)明 | 特點(diǎn) |
|---|---|---|
| HTTP重定向 | 瀏覽器向web服務(wù)器請(qǐng)求某個(gè)URL后，web服務(wù)器可以通過(guò)http響應(yīng)頭信息中的Location標(biāo)記來(lái)返回一個(gè)新的URL | 主站點(diǎn)服務(wù)器的吞吐率平均分配到了被轉(zhuǎn)移的服務(wù)器;重定向的服務(wù)器工作量不同，實(shí)際的負(fù)載量不可估計(jì) |
| DNS負(fù)載均衡 | 在DNS服務(wù)器中配置多個(gè)A記錄，將這些A記錄對(duì)應(yīng)的服務(wù)器構(gòu)造成集群,，例如CDN | 可以根據(jù)用戶IP選擇最近的服務(wù)器，無(wú)法記錄HTTP請(qǐng)求上下文 |
| 反向代理 | 轉(zhuǎn)發(fā)http請(qǐng)求(應(yīng)用層)，常用nginx | 所有HTTP請(qǐng)求都必須經(jīng)過(guò)代理，可以為不同的實(shí)際服務(wù)器設(shè)置不同的權(quán)重，要求并發(fā)處理能力要求高，可以可以監(jiān)控后端服務(wù)器 |
| IP負(fù)載均衡 | 網(wǎng)絡(luò)層通過(guò)修改請(qǐng)求目標(biāo)地址進(jìn)行負(fù)載均衡(網(wǎng)絡(luò)層) | 吞吐率高，要求網(wǎng)絡(luò)帶寬大 |
請(qǐng)求處理
1.服務(wù)器收到請(qǐng)求后將請(qǐng)求解析為：請(qǐng)求方法、域名、請(qǐng)求路徑
2.服務(wù)器找到該域名對(duì)應(yīng)的虛擬主機(jī)，并驗(yàn)證該虛擬主機(jī)是否可以使用該請(qǐng)求方法
3.服務(wù)器獲取請(qǐng)求路徑對(duì)應(yīng)的內(nèi)容，并根據(jù)內(nèi)容使用指定的程序來(lái)處理(e.g.使用不同的程序解析PHP、JSP等文件)，將輸出的結(jié)果發(fā)送給瀏覽器
PLUS - 請(qǐng)求方法
| 方法 | 描述 |
|---|---|
| GET | 請(qǐng)求指定的頁(yè)面信息，并返回實(shí)體主體。 |
| POST | 向指定資源提交數(shù)據(jù)進(jìn)行處理請(qǐng)求(例如提交表單或者上傳文件) |
| PUT | 從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容 |
| HEAD | 與get類似，不過(guò)返回的響應(yīng)中沒(méi)有具體的內(nèi)容，用于獲取報(bào)頭 |
| DELETE | 請(qǐng)求服務(wù)器刪除指定的頁(yè)面 |
| OPTIONS | 返回服務(wù)器針對(duì)特定資源所支持的HTTP請(qǐng)求方法 |
| TRACE | 回顯服務(wù)器收到的請(qǐng)求，主要用于測(cè)試或診斷 |
| CONNECT | HTTP/1.1協(xié)議中預(yù)留給能夠?qū)⑦B接改為管道方式的代理服務(wù)器 |
瀏覽器頁(yè)面渲染
瀏覽器收到服務(wù)器返回的頁(yè)面數(shù)據(jù)后，開(kāi)始對(duì)頁(yè)面進(jìn)行渲染
瀏覽器進(jìn)程與線程
瀏覽器是多進(jìn)程的，用于頁(yè)面顯示的有Browser進(jìn)程、第三方插件進(jìn)程、GPU進(jìn)程(3D繪制等)、瀏覽器渲染進(jìn)程(瀏覽器內(nèi)核，每個(gè)Tab頁(yè)面都有一個(gè)渲染進(jìn)程)。
瀏覽器渲染進(jìn)程包含的線程：
GUI渲染線程
JS引擎線程
事件觸發(fā)線程
定時(shí)器觸發(fā)器線程
異步http請(qǐng)求線程
注意：?JavaScript可以操作DOM，如果修改元素的時(shí)候同時(shí)渲染頁(yè)面，就可能出現(xiàn)不可預(yù)料的結(jié)果，所以GUI渲染線程與JS引擎線程是互斥的
瀏覽器渲染頁(yè)面過(guò)程
1.解析HTML建立dom樹(shù)
2.解析css構(gòu)建render樹(shù)（將CSS代碼解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)，然后結(jié)合DOM合并成render樹(shù)）
3.布局render樹(shù)（確定每個(gè)節(jié)點(diǎn)在屏幕上的位置）
4.繪制render樹(shù)（遍歷render樹(shù)，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)）
CSS加載是否會(huì)阻塞dom樹(shù)渲染？
css加載不會(huì)阻塞DOM樹(shù)解析
css加載會(huì)阻塞render樹(shù)渲染
回流和重繪
回流：瀏覽器重新渲染部分或全部文檔的過(guò)程
重繪：元素改變的樣式不影響元素位置時(shí)，瀏覽器將新樣式賦予給元素并重新繪制它的過(guò)程
如果你覺(jué)得文章不錯(cuò)，歡迎點(diǎn)贊分享到朋友圈
推薦閱讀：
《架構(gòu)師離職后，成為自由開(kāi)發(fā)者的第 100 天》
點(diǎn)擊“閱讀原文”，領(lǐng)取 2020 年最新免費(fèi)技術(shù)資料大全