輸入url按回車后發(fā)生的一系列不可描述的事情

　　瀏覽器輸入url后發(fā)生的過程

　　1、輸入一個(gè)url地址

　　url遵守一定的語法規(guī)則：scheme://host.domain:port/path/filename

　　scheme：定義因特網(wǎng)服務(wù)的類型(協(xié)議)，常見的有http，https，file，ftp等

　　host：定義域主機(jī)(http一般默認(rèn)的是www)

　　demain：定義因特網(wǎng)域名，如baidu.com

　　post：端口號(hào)(http一般是80，https一般是443)

　　2、瀏覽器會(huì)先查看瀏覽器緩存--系統(tǒng)緩存--路由緩存，如有存在緩存，就直接顯示。如果沒有，接著第三步

　　3、瀏覽器查找域名的ip地址(DNS,域名和ip的映射分布式數(shù)據(jù)庫)

　　大致可以分為幾部：

　　瀏覽器緩存

　　瀏覽器會(huì)緩存DNS記錄一段時(shí)間，且不同的瀏覽器的緩存時(shí)間不同

　　系統(tǒng)緩存

　　如果在瀏覽器緩存里沒有找到需要的記錄，瀏覽器會(huì)做一個(gè)系統(tǒng)調(diào)用(windows里是gethostbyname)。這樣便可獲得系統(tǒng)緩存(host)中的記錄。

　　路由器緩存

　　查詢請求發(fā)向路由器，它一般會(huì)有自己的DNS緩存。

　　ISP DNS 緩存

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

　　根服務(wù)器(遞歸搜索)

　　ISP的DNS服務(wù)器還找不到的話，它就會(huì)向根服務(wù)器發(fā)出請求，進(jìn)行遞歸查詢(DNS服務(wù)器先問根域名服務(wù)器其的IP地址，然后再問.com域名服務(wù)器，依次類推)

　　CDN(Content Delivery Network)就是利用DNS的重定向技術(shù)，DNS服務(wù)器會(huì)返回一個(gè)跟用戶最接近的點(diǎn)的IP地址給用戶，CDN節(jié)點(diǎn)的服務(wù)器負(fù)責(zé)響應(yīng)用戶的請求，提供所需的內(nèi)容。

　　針對DNS的優(yōu)化大致方向是減少DNS解析的時(shí)間，即盡量通過瀏覽器對dns的緩存機(jī)制來減少對ip的查詢，即減少需要解析的域名的個(gè)數(shù)

　　4、瀏覽器給web服務(wù)器發(fā)送一個(gè)HTTP(HTTPS)請求

　　TCP三次握手

　　瀏覽器獲得 IP 地址后，就會(huì)對目標(biāo)服務(wù)器發(fā)起建立 TCP 連接的請求，建立連接主要有三個(gè)步驟，一般稱為客戶端與服務(wù)器端的三次握手：

　　第一次握手： 建立連接時(shí)，客戶端發(fā)送syn包(syn=j)到服務(wù)器，并進(jìn)入SYN_SENT狀態(tài)，等待服務(wù)器確認(rèn);

　　第二次握手： 服務(wù)器收到syn包，必須確認(rèn)客戶的SYN(ack=j+1)，同時(shí)自己也發(fā)送一個(gè)SYN包(syn=k)，即SYN+ACK包，此時(shí)服務(wù)器進(jìn)入SYN_RECV狀態(tài);

　　第三次握手： 客戶端收到服務(wù)器的SYN+ACK包，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=k+1)，此包發(fā)送完畢，客戶端和服務(wù)器進(jìn)入ESTABLISHED(TCP連接成功)狀態(tài)，完成三次握手。

　　TCP四次揮手

　　客戶端或服務(wù)器均可主動(dòng)發(fā)起揮手動(dòng)作

　　第一次揮手: 主動(dòng)關(guān)閉方，將FIN置為1，Seq設(shè)置為Z為上一次對方傳送過來的Ack值，Ack設(shè)置為X為Seq值+1。設(shè)置好以上值后，將數(shù)據(jù)發(fā)送至被動(dòng)關(guān)閉方(這里標(biāo)記為：B)。然后A進(jìn)入FIN_WAIT_1狀態(tài)。

　　第二次揮手：B收到了A發(fā)送的FIN報(bào)文段，向A回復(fù)，Ack設(shè)置為第一次揮手中的Seq值+1，Seq設(shè)置為Y第一次揮手中的Ack值。然后B進(jìn)入CLOSE_WAIT狀態(tài)，A收到B的回復(fù)后，進(jìn)入FIN_WAIT_2狀態(tài)。

　　第三次揮手：B再次向A發(fā)送報(bào)文，將FIN置為1，Ack設(shè)置為X，Seq設(shè)置為Y。然后B進(jìn)入LAST_ACK狀態(tài)，A收到B的報(bào)文后，進(jìn)入TIME_WAIT狀態(tài)。

　　第四次揮手：A收到B發(fā)送的FIN報(bào)文段，Ack設(shè)置為Y，Seq設(shè)置為X。然后A進(jìn)入TIME_WAIT狀態(tài)，B在收到報(bào)文后進(jìn)入CLOSED狀態(tài)，A在發(fā)送完報(bào)文等待了2MSL時(shí)間后進(jìn)入CLOSED狀態(tài)。

　　HTTPS(http+ssl)的非對稱加密和對稱加密

　　非對稱加密

　　握手過程中，服務(wù)器會(huì)發(fā)出一張證書(帶著公鑰)，客戶端用公鑰加密了一段較短的數(shù)據(jù)S，并返回給服務(wù)器。服務(wù)器用私鑰解開，拿到S。此時(shí)，握手步驟完成，S成為了一個(gè)被安全傳輸?shù)綄Ψ绞种械膶ΨQ加密密鑰。此后，服務(wù)器與請求響應(yīng)，只需要用S作為密鑰進(jìn)行一次對稱的加密就好。

　　證書包含公鑰，所以拿到證書意味著就拿到了對方的公鑰

　　對稱加密

　　約定加密密鑰，請求的數(shù)據(jù)用密鑰加密，服務(wù)器用密鑰解密

　　一次完整的https請求：

　　1、客戶端向服務(wù)器發(fā)送https請求(443端口)

　　2、tcp三次握手建立tcp連接

　　2、服務(wù)器端返回一個(gè)安全證書(公鑰)

　　3、客戶端收到，并進(jìn)行驗(yàn)證，如果沒有問題，就用安全證書(公鑰)加密一個(gè)隨機(jī)值。并發(fā)送給服務(wù)端

　　4、服務(wù)端用私鑰解密，拿到該隨機(jī)值

　　5、后面的通信就可以通過隨機(jī)值用對稱加密的方式進(jìn)行了

　　http默認(rèn)自帶cookie

　　在http請求中，cookie是默認(rèn)自帶的，可以通過設(shè)置cookie的HttpOnly和Secure屬性來進(jìn)行控制，詳情請移步

　　請求頭自帶的與tcp相關(guān)的屬性

　　Connection

　　Connection 頭(header) 決定當(dāng)前的事務(wù)完成后，是否會(huì)關(guān)閉網(wǎng)絡(luò)連接。如果該值是“keep-alive”，網(wǎng)絡(luò)連接就是持久的，不會(huì)關(guān)閉，使得對同一個(gè)服務(wù)器的請求可以繼續(xù)在該連接上完成。

　　在http1.0的時(shí)候Connection的值默認(rèn)為close

　　在http1.1的時(shí)候Connection的值默認(rèn)為Keep-Alive

　　瀏覽器會(huì)自發(fā)做的事

　　瀏覽器能安全的添加斜杠,如www.baidu.com ->www.baidu.com/ ,而www.baidu.com/222 ->www.baidu.com/222不會(huì)，因?yàn)闉g覽器…

　　優(yōu)化 ：

　　通過部署cdn來減緩數(shù)據(jù)返回的事件

　　優(yōu)化握手次數(shù)

　　在頭部設(shè)置Accept-Encoding類型，通過返回gzip來減少數(shù)據(jù)體積

　　通過設(shè)置http緩存來優(yōu)化性能，請移步

　　5、永久重定向響應(yīng)

　　為了優(yōu)化搜索引擎，把多個(gè)域名進(jìn)行歸類，如把baidu.com,www.baidu.com,www.baidu.com歸類

　　返回301，通知瀏覽器跳轉(zhuǎn),有利于SEO

　　6、瀏覽器跟蹤重定向地址，請求頭不變

　　7、服務(wù)器“處理”請求

　　8、服務(wù)器發(fā)回一個(gè)HTML響應(yīng)

　　9、瀏覽器開始顯示HTML

　　處理HTML標(biāo)記，構(gòu)建DOM樹。

　　處理CSS標(biāo)記，構(gòu)建CSSOM樹。

　　將DOM樹和CSSOM樹融合成渲染樹(會(huì)忽略不需要渲染的dom)。

　　根據(jù)渲染樹來布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息。

　　在屏幕上繪制各個(gè)節(jié)點(diǎn)。

　　中間遇到各種資源時(shí)，會(huì)進(jìn)行資源的下載

　　可能存在問題：

　　資源下載

　　css下載時(shí)會(huì)阻塞渲染(帶有media屬性除外，不會(huì)阻塞瀏覽器解析)。

　　遇到 script 標(biāo)簽時(shí)，DOM構(gòu)建停止，此時(shí)控制權(quán)移交至js，直到腳本(下載)執(zhí)行完畢，此時(shí)瀏覽器有優(yōu)化一般會(huì)下載其他資源，但是不會(huì)解析。如果js中有對CSSOM的操作，還會(huì)先確保CSSOM已經(jīng)被下載并構(gòu)建。

　　圖片資源下載不會(huì)產(chǎn)生阻塞。

　　重繪重排導(dǎo)致重新進(jìn)行渲染樹的生成

　　重排(回流)

　　會(huì)重新計(jì)算布局，通常由元素的結(jié)構(gòu)、增刪、位置、尺寸變化引起，如：img下載成功后，替換填充頁面img元素，引起尺寸變化;也會(huì)由js的屬性值讀取引起，如讀取offset、scroll、cilent、getComputedStyle等信息。

　　重繪

　　簡單外觀的改變會(huì)引起重繪，如顏色變化等。

　　重排一定重繪。

　　優(yōu)化：

　　dom

　　簡化dom結(jié)構(gòu)，減少DOM樹和渲染樹構(gòu)建成本，減少頁面元素個(gè)數(shù)

　　如使用列表表格數(shù)據(jù)分頁，簡單表格不要使用復(fù)雜第三方組件等方式。

　　js

　　將js腳本標(biāo)簽放在頁面body底部，減少對其他過程的阻塞。

　　延遲執(zhí)行：對不修改頁面的外鏈script使用defer屬性，使腳本并行下載不阻塞，下載后不立刻執(zhí)行，而在所有元素解析之后執(zhí)行。

　　這里簡單的介紹下defer和async的區(qū)別：

　　相同點(diǎn)：

　　加載文件時(shí)不阻塞頁面渲染

　　對于inline的script(內(nèi)聯(lián)腳本)無效

　　使用這兩個(gè)屬性的腳本中不能調(diào)用document.write方法

　　有腳本的onload的事件回調(diào)

　　不同點(diǎn)：

　　html的版本html4.0中定義了defer;html5.0中定義了async

　　每一個(gè)async屬性的腳本都在它下載結(jié)束之后立刻執(zhí)行，可能會(huì)打亂原有的順序

　　每一個(gè)defer屬性的腳本都是在頁面解析完畢之后，按照原本的順序執(zhí)行

　　減少和合并不必要的dom相關(guān)操作，如使用DocumentFragment、修改classname而不是各項(xiàng)style等，減少對重繪和重排的觸發(fā)。

　　css

　　將css放入head中，提前加載，并防止html渲染后重新結(jié)合css引起頁面閃爍。

　　減少css層級和css選擇器復(fù)雜度，提高解析速度，雖然瀏覽器有優(yōu)化。

　　使用更高性能的css樣式，如flex代替float。

　　開啟復(fù)合層，如使用3d變換、opacity等，使該元素及其子元素不導(dǎo)致外部的重排，但是也有坑。

　　合理使用脫離文檔流的樣式，減少對外部重排的影響，如absolute。

　　文件數(shù)量

　　減少首次下載的文件數(shù)量大小.

　　使用圖片懶加載，js的按需加載等方式，使用storage存儲(chǔ)進(jìn)行js、css文件的緩存(PWA)。

　　拆分頁面資源，首屏數(shù)據(jù)優(yōu)先加載等。

　　動(dòng)態(tài)路由、懶加載

　　10、瀏覽器發(fā)送獲取嵌入在HTML中的靜態(tài)資源

　　11、瀏覽器發(fā)送異步(AJAX)請求

　　簡單的介紹下fetch相對于ajax的優(yōu)缺點(diǎn)

　　優(yōu)點(diǎn)

　　內(nèi)置promise，鏈?zhǔn)秸{(diào)用，也可以使用async await來解決回調(diào)地獄

　　res提供了多種轉(zhuǎn)換格式的方法，json(),blob()

　　缺點(diǎn)

　　默認(rèn)不帶cookie，帶cookie需要指定credentials = include

　　需要底層支持，或者使用第三方兼容包

　　不能做超時(shí)處理，沒有abort方法

　　遇到常見的錯(cuò)誤碼不會(huì)報(bào)錯(cuò)，需要手動(dòng)去封裝

作者：傳智播客前端與移動(dòng)開發(fā)培訓(xùn)學(xué)院

首發(fā)： http://web.itcast.cn