瀏覽器訪問網站程序
- 用戶在瀏覽器地址欄中輸入網址
- 瀏覽器決議網址構建HTTP請求
HTTP請求報文包括：請求行、請求頭和請求體 - 瀏覽器發起DNS決議請求，將域名轉化為IP地址
網址映射到服務器IP地址，指定了訪問的服務器 - 瀏覽器發送請求報文給到服務器
- 服務器接收并決議報文
- 服務器處理請求，并封裝成HTTP回應報文
- 服務器將回應報文發送給瀏覽器
- 瀏覽器決議回應報文，重新渲染，在遇到新的需求時再次發送HTTP請求
- 最終生成頁面
瀏覽器渲染程序
Google Chrome Blink 引擎
- 決議HTML構建DOM樹
- 決議CSS構建CSS規則樹
- 從DOM樹中篩選出需要渲染出的結點，剔除掉不用渲染的結點（如：、display: none的結點），構建render樹
- 將CSS規則樹與render樹相結合，定位坐標和大小，確定是否換行、position、overflow、z-index等等……此程序稱為reflow或layout
- 呼叫作業系統底層API進行繪圖
Firefox Gecko 引擎
- 決議HTML構建內容槽（Content Sink）
- 決議內容槽構成內容模型（Content Model），一個類似DOM樹的東西
- 決議CSS構建CSS規則樹
- 將CSS規則樹與DOM樹相結合，生成幀樹（Frame Tree），一種類似render樹的東西
- reflow
- 呼叫作業系統底層API進行繪圖
IE Trident 引擎 不開源不可知
Reflow / Layout
瀏覽器reflow或layout操作可以在Google Chrome開發者工具中點擊右上角的三個點 -> More tools -> Rendering 中勾選Painting flashing，重繪網頁后觀看整個程序，由此可見，渲染的操作是非常復雜的，因此DOM樹的操作次數務必要盡量地少，在一次重新渲染中執行多個DOM結點的更新會比頻繁進行DOM結點的更新性能高出許多，
HTTP Request & Response
Web程式中的HTTP通訊一般分請求報文和回應報文，兩種報文各有三個部分：
- 請求（回應）報文行
請求行中一般包含請求方法（GET || POST）和通訊協議（HTTP / 版本號）
回應行中一般包含HTTP狀態碼（200、302、404等）和通訊協議（HTTP / 版本號） - 請求（回應）報文頭
請求頭中一般有：主機IP及埠號、Content-Type、瀏覽器版本等等
回應頭中一般有：服務器型別、Content-Type、時間、Cookies等等 - 請求（回應）報文體
GET方法由于內容被包含在URL中，一般沒有報文體
POST方法一般都需要有報文體
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/14745.html
標籤：HTML5
上一篇：Electron – 基礎學習(3): 專案打包成exe桌面應用 之electron-builder
下一篇：java.lang.IllegalStateException: getOutputStream() has already been called for this response