前言

本篇會將瀏覽器輸入 URL 後做的事情流程拆解成一步步較容易理解的步驟， 雖然是經典前端考古題但一次都沒被問過，還發現自己對於每個步驟的細項都忘得差不多了， 所以整理了一個自己的版本，能更快複習理解，也練習下寫文章的能力，

近期對於刷題還有做筆記開始有了不少動力，剛好把一些學習資源拿來練手， 雖然自己看了看也還有很多進步的空間，但有開始總比不開始要來的好， 也算是紀錄下自己的成長過程和生活軌跡。

解析流程

  1. 瀏覽器將輸入文字解析成 URL： 建構 http / https 請求的前置作業，查詢前瀏覽器會從 URL 獲得下列資訊在發請請求。

    • Protocol (協議，如 http、https)
    • Host (主機名稱，通常為域名，如 www.hean.tw)
    • Port (端口，有指定端口會解析)
    • Path (路徑，同 window.location.pathname，如 www.hean.tw/files 的 /files)
    • Query Parameters (查詢參數，如 www.hean.tw/files?id=123)
    • Fragment Identifier (片段標示符，如 www.hean.tw/files#page2，用於指定頁面的特定部分，即頁內超連結)

  2. 檢查本地 hosts 文件：(通常測試或開發目的)

    • 查看是否有與請求目標域名對應的 IP 地址。。

  3. DNS 查詢：瀏覽器向 DNS server 查詢域名的 IP 地址。

    • (3-1) 檢查是否有 DNS cache 可使用。
    • (3-2) 沒有 DNS cache 則向 ISP (Internet Service Provider，Hinet, TFN 等網路供應商) 提供的 。
    • (3-3) 本地 DNS server 若無法解析該域名，。
    • (3-4) 。 (ex: 返回像是 ns1.verisign.com 這樣的域名，此域名提供本地 DNS server 找到負責管理.com 域等頂級域名服務器的 IP 地址。 簡單來說就是返回管理 .com 等 TLD 伺服器的域名，， )。
    • (3-5) ，如果成功該授權域名伺服器則會返回該域名的 dns 紀錄，即 ip 位置等等資訊，即算是成功取得目標 domain 的 ip 位置了。
    • P.S. Wikipedia 的指針名稱參考

  4. 建立 TCP 連結 (瀏覽器通過 TCP 協議與目標伺服器建立連接)

    • TCP 的連結透過報文傳輸數據，。
      • SYN：。
      • ACK：
      • RST：重置連接
      • FIN：
      • URG：標示當前報文中包含的數據具有緊急性，需要優先處理
      • PSH：表示接收方應該盡快將數據交給應用層處理，不需要等到緩衝區滿再交付。通常用於實時傳輸，降低傳輸延遲。
    • 三次握手 => 建立連結 (Three-way Handshake)
      • (1) client 發送 (SYN) => server
      • (2) client <= server 發送 (SYN + ACK)
      • (3) client 發送 (ACK) => server
    • 四次揮手 => 關閉已經建立的連結 (Four-Way Wavehand)
      • (1) client 發送 (FIN) => server
      • (2) client <= server 發送 (ACK)
      • (3) client <= server 發送 (FIN)
      • (4) client 發送 (ACK) => server
      • Ｑ：
      • Ａ：。
    • 總結：三次握手只要表示伺服器同意連接，但四次揮手是要確認伺服器正確關閉，。
    • 補充：2MSL ，三次握手跟四次揮手的最後一步都是由 client 發送 ACK 確認報文，通常發送該報文後會等待一段時間，這段時間被稱為「最長報文段壽命」（Maximum Segment Lifetime，MSL）。MSL 是指資料報文在網路中最長的存活時間。
      • ，從而避免上述問題的發生。

  5. http 請求進行數據傳輸 (TCP 成功連結後才開始)

  6. 伺服器處理請求：目標伺服器接收到請求並處理它，可能會返回 HTML、CSS、JavaScript 等資源。(可延伸 status code, cache)

  7. 接收和解析響應：瀏覽器接收伺服器的響應，並解析 HTML、CSS 和 JavaScript 資源。(可延伸 AST, Critical rendering path（CRP）, async & defer)

  8. 渲染網頁：瀏覽器根據 HTML 和 CSS 資源渲染網頁。 Reflow repaint (https://medium.com/coding-hot-pot/%E8%AA%8D%E8%AD%98reflow%E5%92%8Crepaint-1155e4fb5b8f)

    • reflow 改尺寸 新增移除節點
    • repaint 單純改變外觀顏色，不影響佈局，

  9. 執行 JavaScript：如果響應包含 JavaScript 代碼，則瀏覽器將執行該代碼。

  10. 顯示網頁：瀏覽器將渲染後的網頁顯示給用戶。