學(xué)習(xí)瀏覽器工作原理，可以幫助性能優(yōu)化，排查錯(cuò)誤。
瀏覽器工作原理
- 實(shí)際上就是把一個(gè)URL變成屏幕上顯示的網(wǎng)頁
過程
- 瀏覽器首先使用 HTTP 協(xié)議或者 HTTPS 協(xié)議，向服務(wù)端請(qǐng)求頁面
- 把請(qǐng)求回來的HTML經(jīng)過解析，構(gòu)成DOM樹
- 計(jì)算DOM樹上的css屬性
- 最后根據(jù)css屬性對(duì)元素逐個(gè)進(jìn)行渲染，得到內(nèi)存中的位圖
- 一個(gè)可選的步驟是對(duì)位圖進(jìn)行合成，這會(huì)極大地增加后續(xù)繪圖的速度
- 合成之后，再繪制到界面上
HTTP請(qǐng)求過程并非一個(gè)完成之后再進(jìn)行下一步，而是一個(gè)流水線的任務(wù)，這樣我們才能看到是逐步顯示的網(wǎng)頁。
HTTP協(xié)議（超文本傳輸協(xié)議）
- 瀏覽器要做的第一步是利用HTTP(HTTPS)協(xié)議把數(shù)據(jù)取回來
- 基于TCP協(xié)議出現(xiàn)的，HTTP在TCP的雙向的通訊道的基礎(chǔ)上，規(guī)定了Request-Response的模式，必須由瀏覽器端首先發(fā)起。
- 使用 TCP 協(xié)議來傳輸文本格式的一個(gè)應(yīng)用層協(xié)議。
HTTP協(xié)議格式
HTTP協(xié)議格式
HTTP Method（request line）
- GET
- POST
- HEAD
- PUT
- DELETE
- CONNECT
- OPTIONS
- TRACE
瀏覽器通過地址欄訪問頁面都是GET方法，表單提交產(chǎn)生POST方法。
HEAD和get類似，只返回請(qǐng)求頭。
PUT和DELETE分別表示添加資源和刪除資源。
CONNECT多用于HTTPS和WebSocket。
其余兩個(gè)多用于調(diào)試，多數(shù)線上服務(wù)都不支持。
HTTP Status code
- 1**：臨時(shí)回應(yīng)，表示哭護(hù)短請(qǐng)繼續(xù)
1**系列的狀態(tài)碼被瀏覽器http庫直接處理掉，不會(huì)讓上層應(yīng)用知曉。
- 2**：請(qǐng)求成功
200 - 3**：請(qǐng)求目標(biāo)有變化，希望客戶端進(jìn)一步處理
301&302：永久性和臨時(shí)性重定向（當(dāng)前資源已經(jīng)被轉(zhuǎn)移）
304：跟客戶端緩存沒有更新（前端必知必會(huì)）
產(chǎn)生原因：客戶端本地已經(jīng)有緩存的版本，并且在request中告訴了服務(wù)端，當(dāng)服務(wù)端通過時(shí)間或者tag，發(fā)現(xiàn)沒有更新的時(shí)候，就會(huì)一個(gè)不含body的304狀態(tài)。
- 4**：客戶端請(qǐng)求錯(cuò)誤
403：無權(quán)限
404：請(qǐng)求頁面不存在 - 5**：服務(wù)端請(qǐng)求錯(cuò)誤
500：服務(wù)器內(nèi)部錯(cuò)誤
503：服務(wù)器暫時(shí)性錯(cuò)誤，可以一會(huì)再試
HTTP HEAD
請(qǐng)求頭
請(qǐng)求頭.png
響應(yīng)頭
響應(yīng)頭.png
HTTPS有什么作用？
- 確定請(qǐng)求的目標(biāo)服務(wù)端身份
- 保證傳輸?shù)臄?shù)據(jù)不會(huì)被網(wǎng)絡(luò)中間節(jié)點(diǎn)竊聽或者篡改。
HTTPS 是使用加密通道來傳輸 HTTP 的內(nèi)容,但是 HTTPS 首先與服務(wù)端建立一條 TLS 加密通道。
HTTP2.0的優(yōu)點(diǎn)：
- 支持tcp連接復(fù)用
- 支持服務(wù)端推送
解析HTML文件，構(gòu)建DOM樹
詞--->棧---->DOM
重流和重繪
重繪repaint：
改變某個(gè)元素的背景色、文字顏色、邊框顏色等等不影響他的布局屬性。
重流reflow：
當(dāng)屬性變化而影響了某些元素的布局，需要重新渲染界面， 該過程稱為reflow。
reflow一定引起repaint，而repaint不一定要reflow
需要減少重流，提高頁面流暢度。
