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

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

　　1、輸入一個url地址

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

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

　　host：定義域主機(http一般默認的是www)

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

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

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

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

　　大致可以分為幾部：

　　瀏覽器緩存

　　瀏覽器會緩存DNS記錄一段時間，且不同的瀏覽器的緩存時間不同

　　系統(tǒng)緩存

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

　　路由器緩存

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

　　ISP DNS 緩存

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

　　根服務器(遞歸搜索)

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

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

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

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

　　TCP三次握手

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

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

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

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

　　TCP四次揮手

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

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

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

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

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

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

　　非對稱加密

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

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

　　對稱加密

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

　　一次完整的https請求：

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

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

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

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

　　4、服務端用私鑰解密，拿到該隨機值

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

　　http默認自帶cookie

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

　　請求頭自帶的與tcp相關的屬性

　　Connection

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

　　在http1.0的時候Connection的值默認為close

　　在http1.1的時候Connection的值默認為Keep-Alive

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

　　瀏覽器能安全的添加斜杠,如www.baidu.com ->www.baidu.com/ ,而www.baidu.com/222 ->www.baidu.com/222不會，因為瀏覽器…

　　優(yōu)化 ：

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

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

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

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

　　5、永久重定向響應

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

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

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

　　7、服務器“處理”請求

　　8、服務器發(fā)回一個HTML響應

　　9、瀏覽器開始顯示HTML

　　處理HTML標記，構建DOM樹。

　　處理CSS標記，構建CSSOM樹。

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

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

　　在屏幕上繪制各個節(jié)點。

　　中間遇到各種資源時，會進行資源的下載

　　可能存在問題：

　　資源下載

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

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

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

　　重繪重排導致重新進行渲染樹的生成

　　重排(回流)

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

　　重繪

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

　　重排一定重繪。

　　優(yōu)化：

　　dom

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

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

　　js

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

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

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

　　相同點：

　　加載文件時不阻塞頁面渲染

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

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

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

　　不同點：

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

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

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

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

　　css

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

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

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

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

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

　　文件數(shù)量

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

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

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

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

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

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

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

　　優(yōu)點

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

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

　　缺點

　　默認不帶cookie，帶cookie需要指定credentials = include

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

　　不能做超時處理，沒有abort方法

　　遇到常見的錯誤碼不會報錯，需要手動去封裝

作者：傳智播客前端與移動開發(fā)培訓學院

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