摘要：服務(wù)器處理請求返回報(bào)文響應(yīng)報(bào)文由相響應(yīng)行響應(yīng)頭響應(yīng)主體三個(gè)部分組成，如下圖響應(yīng)行包含協(xié)議版本狀態(tài)碼狀態(tài)碼描述協(xié)議版本狀態(tài)碼請求成功以創(chuàng)建，成功請求并創(chuàng)建了新的資源非授權(quán)信息。

DNS解析

TCP連接

發(fā)送http請求

服務(wù)器處理請求

瀏覽器解析渲染頁面

連接結(jié)束

什么是DNS?

DNS是一種組織成域?qū)哟谓Y(jié)構(gòu)的計(jì)算機(jī)和網(wǎng)絡(luò)服務(wù)命名系統(tǒng)，他用于TCP/IP網(wǎng)絡(luò)，它所提供的服務(wù)是用來將主機(jī)名和域名轉(zhuǎn)換成IP地址的工作。DNS就是這樣的一位"翻譯官"，它的基本工作原理可以用下圖來表示。

DNS解析過程

檢查瀏覽器緩存中是否緩存過該域名對應(yīng)的ip地址

如果在瀏覽器緩存中沒有找到ip，那么將繼續(xù)查找本機(jī)系統(tǒng)是否緩存過ip

向本地域名解析服務(wù)發(fā)起域名解析的請求

向根域名解析服務(wù)器發(fā)起域名解析請求

根域名服務(wù)器返回gTLD(通用頂級(jí)域)域名解析服務(wù)器地址

向gTLD服務(wù)器發(fā)起解析請求

gTLD服務(wù)器接收請求病返回Name Server服務(wù)器

Name Server 服務(wù)器返回ip地址給本地服務(wù)器

本地域名服務(wù)器緩存解析結(jié)果

返回解析結(jié)果給用戶

DNS負(fù)載均衡

DNS負(fù)載均衡技術(shù)的實(shí)現(xiàn)原理是在DNS服務(wù)器中為同一個(gè)主機(jī)名配置多個(gè)IP地址，在應(yīng)答NDS查詢時(shí)，DNS服務(wù)器對每個(gè)查詢將以DNS文件中主機(jī)記錄的IP地址按順序返回不同的解析結(jié)果，將客戶端的訪問引導(dǎo)到不同的機(jī)器上去，使得不同的客戶端訪問不同的服務(wù)器，從而達(dá)到負(fù)載均衡的目的。

三次握手的目的

目的是為了防止已經(jīng)失效的連接請求報(bào)文段突然有傳送到了服務(wù)端，因而產(chǎn)生錯(cuò)誤

三次握手的過程

客戶端發(fā)送一個(gè)帶SYN=1，Seq=X 的數(shù)據(jù)包到服務(wù)器端(第一次握手，由瀏覽器發(fā)起，告訴服務(wù)器我要發(fā)送請求了)

服務(wù)器發(fā)揮一個(gè)帶SUN=1,ACK=Y的響應(yīng)包以示傳達(dá)確認(rèn)信息(第二次握手，由服務(wù)器發(fā)起，告訴瀏覽器我準(zhǔn)備接收了，可以發(fā)送了)

客戶端再傳回一個(gè)帶ACK=Y+1,Seq=Z的數(shù)據(jù)報(bào)，代表握手結(jié)束(第三次握手，由瀏覽器發(fā)送，告訴服務(wù)器，我準(zhǔn)備發(fā)送了)

(°ー°〃)我們用大白話解釋下三次握手

快遞小哥：你好，你的快遞到了，你在家沒？
小明：在家呢，送過來吧。
快遞小哥：好的，馬上送到。

請求報(bào)文由請求行，請求頭，空行，請求體四個(gè)部分組成。

請求方法包括：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。

URL即請求地址

協(xié)議版本即http版本號(hào)

GET /js/count.js HTTP/1.1

上面代碼中GET代表請求方法，/js/count.js表示URL，HTTP/1.1代表http版本

請求頭部通知服務(wù)器關(guān)于客戶端請求的信息。它包含許多有關(guān)的客戶端環(huán)境和請求正文的有用信息。比如：

Host:主機(jī)名，虛擬主機(jī)

Connection：HTTP/1.1增加的，使用keeoalive,即持久連接，一個(gè)連接可以發(fā)多個(gè)請求

User-Agent:客戶端程序的信息，就是我發(fā)送請求的瀏覽器信息

Accept:瀏覽器可以接收的媒體數(shù)據(jù)類型

Accept-Encoding：是瀏覽器用來告知服務(wù)器它能夠支持的內(nèi)容編碼及內(nèi)容編碼的優(yōu)先級(jí)順序，可一次性指定多種內(nèi)容編碼

Accept-Language:高h(yuǎn)i服務(wù)器瀏覽器能夠處理的自然語言集

Cookie：瀏覽器記錄的用戶相關(guān)信息

響應(yīng)報(bào)文由相響應(yīng)行、響應(yīng)頭、響應(yīng)主體三個(gè)部分組成，如下圖

HTTP/1.1 200 OK

協(xié)議版本：HTTP/1.1

狀態(tài)碼：200

200：請求成功

201：以創(chuàng)建，成功請求并創(chuàng)建了新的資源

203：非授權(quán)信息。請求成功，但返回的meta信息不在原始的服務(wù)器，而是一個(gè)副本

204：無內(nèi)容。服務(wù)器處理成功，但未返回內(nèi)容。在未更新網(wǎng)頁的情況下，可確保瀏覽器繼續(xù)顯示當(dāng)前文檔

301：永久重定向

302：臨時(shí)重定向

307：臨時(shí)重定向。與302類似。使用GET請求重定向

400：客戶端請求的語法錯(cuò)誤，服務(wù)器無法理解(給服務(wù)端傳的參數(shù)和服務(wù)端指定接受的字段不同)

404：服務(wù)器無法根據(jù)客戶端的請求找到資源

405：客戶端請求中的方法被禁止(請求方法不對，比如服務(wù)端設(shè)置GET請求，客戶端使用POST請求)

500：服務(wù)端內(nèi)部錯(cuò)誤

狀態(tài)碼描述：ok

響應(yīng)頭為客戶端提供了額外的信息，使得客戶端可以做出更好的響應(yīng)。

Server：服務(wù)器告訴客戶端當(dāng)前服務(wù)器上安裝得HTTP服務(wù)應(yīng)用程序的信息，可能包含服務(wù)器上的軟件應(yīng)用名稱，版本號(hào)

Content-Type：表明了服務(wù)器返回給瀏覽器的實(shí)體內(nèi)容的類型

Transfer-Encoding: chunked 表示輸出的長度不能確定，普通的靜態(tài)頁面、圖片之類的基本上都用不到這個(gè)。動(dòng)態(tài)頁面可能會(huì)用到。

Cache-Control：緩存控制，默認(rèn)值為private,表示內(nèi)容只緩存到私有緩存中(僅客戶端可以緩存，代理服務(wù)器不可緩存)

Expires：告知客戶端資源失效日期

服務(wù)端給客戶端返回的文本信息

關(guān)鍵渲染路徑是指瀏覽器從最初接收請求來的HTML、CSS、JS等資源，然后解析，構(gòu)建樹、渲染布局、繪制，最后呈現(xiàn)給客戶能看到的界面的整個(gè)過程

主要包括以下幾步

解析HTML生成DOM樹

解析CSS生成CSSOM規(guī)則樹

將DOM樹與CSSOM規(guī)則樹合并在一起生成渲染樹

遍歷渲染樹開始布局，計(jì)算每個(gè)節(jié)點(diǎn)的位置大小信息

將渲染樹每個(gè)節(jié)點(diǎn)繪制到屏幕

構(gòu)建DOM樹

當(dāng)瀏覽器接收到服務(wù)器響應(yīng)來的HTML文檔后，會(huì)遍歷文檔節(jié)點(diǎn)，生成DOM樹。需要注意的是，DOM樹生成過程中可能會(huì)被CSS和JS的加載執(zhí)行阻塞。

構(gòu)建CSSOM規(guī)則書

瀏覽器解析CSS文件并生成CSS規(guī)則樹，每個(gè)CSS文件都被解析成一個(gè)StyleSheet對象，每個(gè)對象都包含CSS規(guī)則。CSS規(guī)則對象包含對應(yīng)于CSS語法的選擇器和聲明對象以及其他對象

渲染阻塞

當(dāng)瀏覽器遇到一個(gè)script標(biāo)記時(shí)，DOM構(gòu)建將暫停，直至腳本完成執(zhí)行，然后繼續(xù)構(gòu)建DOM。每次去執(zhí)行Js腳本都會(huì)嚴(yán)重阻塞DOM樹的構(gòu)建，如果js腳本還操作的CSSOM,而正好這個(gè)CSSOM還沒有下載和構(gòu)建，瀏覽器甚至?xí)舆t腳本執(zhí)行和構(gòu)建DOM，直至完成其CSSOM的下載和構(gòu)建。

所以script標(biāo)簽的位置很重要。實(shí)際使用時(shí)，可以遵循下面兩個(gè)原則：

CSS優(yōu)先：引入順序上，CSS資源先于JS資源。

JS置后：通常我們把JS代碼放到頁面底部，且JS應(yīng)盡量少影響DOM構(gòu)建

構(gòu)建渲染樹

通過DOM樹和CSS規(guī)則樹我們便可以構(gòu)建渲染樹。瀏覽器會(huì)先從DOM樹的根節(jié)點(diǎn)開始遍歷每個(gè)可見節(jié)點(diǎn)。對每個(gè)可見節(jié)點(diǎn)，找到其適配的CSS樣式規(guī)則并應(yīng)用。

渲染樹構(gòu)建完成后，每個(gè)節(jié)點(diǎn)都是可見節(jié)點(diǎn)并且都含有其內(nèi)容和對應(yīng)的規(guī)則的樣式。這也是渲染樹與DOM樹最大的區(qū)別。渲染樹是用于顯示，那些不可見的元素當(dāng)然就不會(huì)在這棵樹中出現(xiàn)了，除此之外，display等于none的也不會(huì)被顯示在這棵樹里頭，但是visibility等于hidden的元素是會(huì)顯示在這棵樹里頭的。

渲染樹布局

布局階段會(huì)從渲染樹的根節(jié)點(diǎn)開始遍歷，然后確定每個(gè)接待你對象在頁面上的確切大小與位置，布局階段的輸出是一個(gè)盒子模型，他會(huì)精確的捕獲每個(gè)元素在屏幕內(nèi)的確切位置與大小。

渲染樹繪制

在繪制階段，遍歷渲染樹，調(diào)用渲染器的paint()方法在屏幕上顯示其內(nèi)容。渲染樹的繪制工作是由瀏覽器的UI后端組件完成

回流與重繪

根據(jù)選安然樹布局，計(jì)算CSS樣式，即每個(gè)節(jié)點(diǎn)在頁面中的帶線啊哦和位置等幾何信息。HTML默認(rèn)是流式布局的，CSS和JS會(huì)打破這種布局，改變DOM的外觀樣式以及大小和位置。這時(shí)就會(huì)觸發(fā)回流和重繪

重繪

屏幕的一部分重繪，不影響整體布局，比如某個(gè)CSS的背景色變了，但元素的幾何尺寸和位置不變。

常見引起重回的屬性

color

border-style

box-shadow

background

background-size

border-radius

background-position

回流

當(dāng)元素的大小位置改變，需要重新驗(yàn)證并計(jì)算渲染樹。是渲染樹的一部分或全部發(fā)生了變化。

常見引起回流的屬性和方法

添加或者刪除可見的DOM元素

元素尺寸改變--邊距、填充、邊框、寬度和高度

內(nèi)容變化，比如用戶在input中輸入文字

瀏覽器窗口尺寸改變

計(jì)算offsetWidth和offsetHeight

從上面可以看出：回流必將引起重繪，而重繪不一定會(huì)引起回流。

思考下面代碼會(huì)觸發(fā)幾次渲染？

div.style.left = "10px";
div.style.top = "10px";
div.style.width = "20px";
div.style.height = "20px";

這段代碼理論上會(huì)觸發(fā)4次重繪和回流，因?yàn)槊看味几淖兞嗽氐募蠈傩?，?shí)際上最后支出法了一次回流，這都得益于

當(dāng)瀏覽器發(fā)現(xiàn)某一行代碼是改變元素樣式時(shí)，瀏覽器不會(huì)立即進(jìn)行渲染，而是緩那么一哆嗦，看你下一行代碼是不是在改樣式，如果下一行還是改樣式，在緩一哆嗦，如果連續(xù)發(fā)現(xiàn)幾行代碼都是在改樣式，瀏覽器會(huì)等待這幾行代碼全部執(zhí)行完，才會(huì)進(jìn)行渲染，這就是瀏覽器的渲染隊(duì)列機(jī)制

動(dòng)畫效果應(yīng)用position屬性為absolute或fixed元素上(脫離文檔流)

這種方法也會(huì)引發(fā)回流，但是會(huì)對其他元素沒有影響，可以提升性能

硬件加速會(huì)自動(dòng)規(guī)避回流和重繪
css中又一下幾個(gè)屬性能觸發(fā)硬件加速

transform

opacity

filter

will-change

如果有一些元素不需要用到上述屬性，但是需要觸發(fā)硬件加速效果，可以使用一些小技巧來誘導(dǎo)瀏覽器開啟硬件加速。

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); 
    /**或者**/
    transform: rotateZ(360deg);
    transform: translate3d(0, 0, 0);

要注意的問題

過多的開啟硬件加速可能會(huì)耗費(fèi)較多的內(nèi)存。

GPU 渲染會(huì)影響字體的抗鋸齒效果。這是因?yàn)?GPU 和 CPU 具有不同的渲染機(jī)制，即使最終硬件加速停止了，文本還是會(huì)在動(dòng)畫期間顯示得很模糊。

現(xiàn)在的頁面為了優(yōu)化請求的耗時(shí)，默認(rèn)都會(huì)開啟持久連接（keep-alive），那么一個(gè)TCP連接確切關(guān)閉的時(shí)機(jī)，是這個(gè)tab標(biāo)簽頁關(guān)閉的時(shí)候。這個(gè)關(guān)閉的過程就是四次揮手.由于TCP連接時(shí)全雙工的，因此，每個(gè)方向都必須要多帶帶進(jìn)行關(guān)閉，這一原則是當(dāng)一方完成數(shù)據(jù)發(fā)送任務(wù)后，發(fā)送一個(gè)FIN來終止這一方向的連接，收到一個(gè)FIN只是意味著這一方向上沒有數(shù)據(jù)流動(dòng)了，即不會(huì)再收到數(shù)據(jù)了，但是在這個(gè)TCP連接上仍然能夠發(fā)送數(shù)據(jù)，直到這一方向也發(fā)送了FIN。首先進(jìn)行關(guān)閉的一方將執(zhí)行主動(dòng)關(guān)閉，而另一方則執(zhí)行被動(dòng)關(guān)閉

client發(fā)送一個(gè)FIN，用來關(guān)閉client到server的數(shù)據(jù)傳送，cliient進(jìn)入FIN_WAIT_1狀態(tài)

server收到FIN后，發(fā)送一個(gè)ack給client，確認(rèn)序列號(hào)為收到序列號(hào)+1（與SYN相同，一個(gè)FIN占用一個(gè)序號(hào)），server進(jìn)入CLOSE_WAIT狀態(tài)

server發(fā)送一個(gè)FIN，用來關(guān)閉server到client的數(shù)據(jù)傳送，server進(jìn)入LAST_ACK狀態(tài)

client收到FIN后，client進(jìn)入TIME_WAIT狀態(tài)，接著發(fā)送一個(gè)ack給server，確認(rèn)序列號(hào)為收到序列號(hào)+1，server進(jìn)入CLOSED狀態(tài)，完成四次揮手