3次握手:
(1)首先客戶端向服務器端發送一段TCP報文
(2)服務器端接收到來自客戶端的TCP報文之後,結束LISTEN階段。並返回一段TCP報文
(3)客戶端接收到來自服務器端的確認收到數據的TCP報文之後,明確了從客戶端到服務器的數據傳輸是正常的,結束SYN-SENT階段。並返回最後一段TCP報文。
4次揮手:
(1)首先客戶端想要釋放連接,向服務器端發送一段TCP報文
(2)服務器端接收到從客戶端發出的TCP報文之後,確認了客戶端想要釋放連接,隨後服務器端結束ESTABLISHED階段,進入CLOSE-WAIT階段(半關閉狀態)並返回一段TCP報文
(3)服務器端自從發出ACK確認報文之後,經過CLOSED-WAIT階段,做好了釋放服務器端到客戶端方向上的連接準備,再次向客戶端發出一段TCP報文
(4)客戶端收到從服務器端發出的TCP報文,確認了服務器端已做好釋放連接的準備,結束FIN-WAIT-2階段,進入TIME-WAIT階段,並向服務器端發送一段報文
服務器端收到從客戶端發出的TCP報文之後結束LAST-ACK階段,進入CLOSED階段。由此正式確認關閉服務器端到客戶端方向上的連接。
輸入URL發生什麼?
- DNS 域名解析(域名解析成ip地址,走UTP協議,因此不會有握手過程):瀏覽器將 URL 解析出相對應的服務器的 IP 地址(1. 本地瀏覽器的 DNS 緩存中查找 2. 再向系統DNS緩存發送查詢請求 3. 再向路由器DNS緩存 4. 網絡運營商DNS緩存 5. 遞歸搜索),並從 url 中解析出端口號
- 瀏覽器與目標服務器建立一條 TCP 連接(三次握手)
- 瀏覽器向服務器發送一條 HTTP 請求報文
- 服務器返回給瀏覽器一條 HTTP 響應報文
- 瀏覽器進行渲染
- 關閉 TCP 連接(四次揮手)
瀏覽器渲染的步驟
- HTML 解析出 DOM Tree
- CSS 解析出 Style Rules
- 兩者關聯生成 Render Tree
- Layout(佈局)根據 Render Tree 計算每個節點的信息
- Painting 根據計算好的信息進行渲染整個頁面
頁面渲染優化
- HTML 文檔結構層次儘量少,最好不深於 6 層
- 腳本儘量放後邊,避免組織頁面加載
- 樣式結構層次儘量簡單
- 腳本減少 DOM 操作,減少迴流,儘量緩存訪問 DOM 的樣式信息
- 儘量減少 JS 修改樣式,可以通過修改 class 名的方式解決
強制緩存和協商緩存
-
強制緩存是我們在第一次請求資源時在 http 響應頭設置一個過期時間,在時效內都將直接從瀏覽器進行獲取,常見的 http 響應頭字段如 Cache-Control 和 Expires
-
協商緩存是我們通過 http 響應頭字段 etag 或者 Last-Modified 等判斷服務器上資源是否修改,如果修改則從服務器重新獲取,如果未修改則 304 指向瀏覽器緩存中進行獲取