在瀏覽器中輸入 URL 到頁面顯示出來，這中間經歷了一系列複雜的過程，可以概括為以下幾個主要步驟：
-
URL 解析: 瀏覽器首先會解析你輸入的 URL，檢查其語法是否正確，並提取出協議（如 HTTP 或 HTTPS）、域名、埠、路徑、查詢引數和片段識別符號等資訊。
-
DNS 查詢: 瀏覽器會向 DNS 伺服器查詢域名對應的 IP 地址。 首先會在瀏覽器快取中查詢，然後是系統快取，接著是路由器快取，最後才會向 DNS 伺服器發起請求。 DNS 伺服器會返回該域名對應的 IP 地址。
-
TCP 連線: 瀏覽器使用獲取到的 IP 地址與伺服器建立 TCP 連線。這是一個三次握手的過程，確保客戶端和伺服器之間建立可靠的連線。
-
傳送 HTTP 請求: TCP 連線建立後，瀏覽器會向伺服器傳送 HTTP 請求。請求中包含請求方法（GET、POST 等）、請求頭（包含一些附加資訊，例如瀏覽器型別、接受的語言等）和請求體（對於 POST 請求，包含要提交的資料）。
-
伺服器處理請求: 伺服器接收到請求後，會根據請求的內容進行處理。這可能涉及到資料庫查詢、檔案讀取、動態內容生成等操作。
-
伺服器返回 HTTP 響應: 伺服器處理完成後，會返回 HTTP 響應。響應包含狀態碼（例如 200 OK、404 Not Found 等）、響應頭（包含一些附加資訊，例如內容型別、快取控制等）和響應體（包含要返回的資料，例如 HTML、JSON 等）。
-
瀏覽器接收響應: 瀏覽器接收到伺服器返回的響應後，會根據響應頭中的內容型別來解析響應體。
-
瀏覽器渲染頁面: 如果響應體是 HTML，瀏覽器會解析 HTML 程式碼，構建 DOM 樹。同時，瀏覽器也會解析 CSS 程式碼，構建 CSSOM 樹。然後，瀏覽器將 DOM 樹和 CSSOM 樹合併成渲染樹。最後，瀏覽器根據渲染樹計算佈局，並將內容繪製到螢幕上。
-
載入資源: HTML 頁面中可能包含其他資源，例如圖片、指令碼、樣式表等。瀏覽器會並行下載這些資源，並在下載完成後進行解析和執行。 JavaScript 指令碼的執行可能會修改 DOM 樹和 CSSOM 樹，從而觸發重新渲染。
-
頁面互動: 頁面載入完成後，使用者可以與頁面進行互動。例如點選連結、提交表單、滾動頁面等。這些互動會觸發 JavaScript 事件，並可能導致頁面內容的更新。
更詳細的解釋一些關鍵步驟:
-
渲染引擎: 瀏覽器使用渲染引擎來渲染頁面。不同的瀏覽器使用不同的渲染引擎，例如 Chrome 使用 Blink，Firefox 使用 Gecko。渲染引擎負責解析 HTML、CSS 和 JavaScript，並將其轉換為視覺化的頁面。
-
DOM 樹: DOM（Document Object Model）樹是 HTML 文件的樹形表示。每個 HTML 元素都是 DOM 樹中的一個節點。
-
CSSOM 樹: CSSOM（CSS Object Model）樹是 CSS 樣式的樹形表示。每個 CSS 規則都是 CSSOM 樹中的一個節點。
-
渲染樹: 渲染樹是 DOM 樹和 CSSOM 樹的組合。它包含了頁面中所有可見元素的樣式資訊。
-
重繪 (Repaint) 和迴流 (Reflow): 當頁面元素的樣式發生改變時，瀏覽器需要重新計算佈局並重新繪製頁面。這被稱為迴流。如果只是元素的樣式發生改變，而沒有影響佈局，則瀏覽器只需要重新繪製頁面，這被稱為重繪。迴流的成本比重繪高得多，因此應該儘量避免觸發迴流。
這整個過程是一個複雜的協作，涉及到網路、伺服器和瀏覽器等多個方面。理解這個過程對於前端開發者來說至關重要，可以幫助他們最佳化網站效能，提升使用者體驗。