組成
瀏覽器
渲染引擎:
Trident, Gecko, Presto, Webkit, Blink
流程
- **DNS解析(迭代查詢）
優(yōu)化：
- 減少dns請求
- dns預(yù)解析
- httpdns防劫持
- dns負(fù)載均衡**
DNS
- 瀏覽器以一個隨機(jī)端口進(jìn)入到網(wǎng)卡，進(jìn)入TCP／IP協(xié)議棧，然后可能經(jīng)過防火墻過濾，
- **建立TCP鏈接：
優(yōu)化：
用https／http2**
tcp
- 第一次握手：客戶端A將標(biāo)志位SYN置為1,隨機(jī)產(chǎn)生一個值為seq=J（J的取值范圍為=1234567）的數(shù)據(jù)包到服務(wù)器，客戶端A進(jìn)入SYN_SENT狀態(tài)，等待服務(wù)端B確認(rèn)；
- 第二次握手：服務(wù)端B收到數(shù)據(jù)包后由標(biāo)志位SYN=1知道客戶端A請求建立連接，服務(wù)端B將標(biāo)志位SYN和ACK都置為1，ack=J+1，隨機(jī)產(chǎn)生一個值seq=K，并將該數(shù)據(jù)包發(fā)送給客戶端A以確認(rèn)連接請求，服務(wù)端B進(jìn)入SYN_RCVD狀態(tài)。
-
第三次握手：客戶端A收到確認(rèn)后，檢查ack是否為J+1，ACK是否為1，如果正確則將標(biāo)志位ACK置為1，ack=K+1，并將該數(shù)據(jù)包發(fā)送給服務(wù)端B，服務(wù)端B檢查ack是否為K+1，ACK是否為1，如果正確則連接建立成功，客戶端A和服務(wù)端B進(jìn)入ESTABLISHED狀態(tài)，完成三次握手，隨后客戶端A與服務(wù)端B之間可以開始傳輸數(shù)據(jù)了
tcp
- 發(fā)送HTTP請求（****GET 或者 POST 等，不常用的還有 PUT 和 DELETE 、****HEAD****、****OPTION****以及 TRACE ）：靜態(tài)資源緩存，can，服務(wù)器負(fù)載均衡，服務(wù)器緩存，
- 服務(wù)器給瀏覽器響應(yīng)一個****301****永久重定向響應(yīng)
- 瀏覽器跟蹤重定向地址
- 服務(wù)器處理請求：nginx->應(yīng)用服務(wù)器
- 服務(wù)器返回一個http響應(yīng)
- 客戶端渲染：jscss位置，減少體積，
渲染流程
- 加載HTML內(nèi)容，處理HTML標(biāo)記，構(gòu)建DOM樹
- 加載css，處理css標(biāo)記，構(gòu)建CSSOM樹
- 將DOM和CSSOM合并成一個渲染樹
- Layout：CPU根據(jù)渲染樹來布局，計算及節(jié)點(diǎn)幾何信息
- Paint：GPU根據(jù)每個Layer位置繪制點(diǎn)，以渲染層緩存
- Composition：處理多層渲染層Layers之間的關(guān)系，合成一個頁面
其中： - CSS 被視為阻塞渲染的資源，這意味著瀏覽器將不會渲染任何已處理的內(nèi)容，直至 CSSOM 構(gòu)建完畢。存在阻塞的 CSS 資源時，瀏覽器會延遲 JavaScript 的執(zhí)行和 DOM 構(gòu)建。
- 當(dāng)瀏覽器遇到一個 script 標(biāo)記時，DOM 構(gòu)建將暫停，直至腳本完成執(zhí)行
css優(yōu)化：
- <link href="print.css" rel="stylesheet" media="print">設(shè)置了媒體類型，會加載但不會阻塞
js優(yōu)化：
- async 與 defer 屬性對于 inline-script 都是無效的
- defer 屬性：載入 JavaScript 文件時不阻塞 HTML 的解析，執(zhí)行階段被放到 HTML 標(biāo)簽解析完成之后。
- async屬性：表示異步執(zhí)行引入的 JavaScript，如果已經(jīng)加載好，就會開始執(zhí)行，加載的 JavaScript 依然會阻塞 load 事件。多個 async-script 的執(zhí)行順序是不確定的
- 使用 document.createElement 創(chuàng)建的 script 默認(rèn)是異步async的
dns優(yōu)化
- 減少 DNS 請求
- 縮短 DNS 解析路徑
- dns預(yù)解析 dns－prefetch
- localDns：緩存挾持，轉(zhuǎn)發(fā)
- HttpDns：
客戶端直接訪問HttpDNS接口，獲取業(yè)務(wù)在域名配置管理系統(tǒng)上配置的訪問延遲最優(yōu)的IP?？蛻舳讼颢@取到的IP后就向直接往此IP發(fā)送業(yè)務(wù)協(xié)議請求。
CDN功能：
- 調(diào)度分配主機(jī)；負(fù)載均衡，根據(jù) IP，網(wǎng)絡(luò)流量情況分配最靠近，網(wǎng)絡(luò)最通暢的 CDN 節(jié)點(diǎn)實現(xiàn)加速
- 反向代理
- 靜態(tài)緩存；緩存靜態(tài)資源（html，圖片，音樂，視頻等）
- 防止 DDOS 攻擊
