輸入網址到網頁顯示，這一秒內瀏覽器做了什麼事？

Tina

5 min readJul 21, 2021

網頁中必備的三大元素 HTML、CSS、JavaScript，JS 如何影響 HTML結構？

有沒有想過瀏覽器要怎麼接收到你要給他的 HTML 檔呢？讓我們先來說說在瀏覽器讀取HTML 檔前究竟做了什麼事情

解析 URL：

URL 全名是 Uniform Resource Locator，中文是「統一資源定位符」，而他主要會由三部分組成，就以 https://www.google.com.tw/maps 這個網址來說：

通訊協定：https
伺服器主機名稱：www.google.com.tw ，可以放 domain name 或是 IP address 但通常是放 domain name
路徑：maps特定網頁的路徑

解析 DNS ：

每個提供網站服務的伺服器都會有他自己獨一無二的 IP 位址，而當你輸入的是像 https://www.google.com.tw/maps 這種有意義的網址內容時，就需要有人來將英文組成的網址配對到他的 IP 位址。

建立 TCP 連線：

一樣先解釋名詞，TCP 是 Transmission Control Protocol，中文是傳輸控制協定，他的作用簡單來說是確保資料傳送完整的一道關卡，其中會通過三次握手後才建立連線：

Client 端向伺服器發送請求，確認是否可以建立連線
伺服器端收到請求，並回應給 Client 端「收到請求！」
現在換Client 端回應給伺服器端說「收到消息！」

這樣一來一往一共三次後，確認雙方都能收到對方的訊息後，則代表雙方通訊成功，可以往下進行後續動作了！

Client 端發送 HTTP 請求

此時通常瀏覽器Client 端會向伺服器發送 GET 請求，但除了 GET method外，也會遇到如 post / put / delete / patch 等請求形式。

伺服器端回應請求

若順利執行的話並收到正確回應後就能進到下個步驟，但如果此時出了問題，伺服器就會回傳狀態碼 (status code) ，其中可以看開頭的字了解問題方向：

2XX：伺服器有成功回應，例如 200
3XX：重新轉向，例如 301 (永久轉向)、302 (暫時轉向)
4XX：客户端錯誤回應，例如最常見的404 Not Found（目前也最常遇到這個錯誤）
5XX：伺服器的問題，例如 500 Internal Server Error

接下來就是到今天的重點了，前置作業都準備好了，接下來就是針對網頁必備的三項元素的渲染過程介紹了，這部分除了基本執行流程外，還能延伸到 Critical Render Path （關鍵渲染路徑），透過優化讓整個網頁能渲染得更有效率，使用者體驗會更好！

瀏覽器解析渲染頁面

瀏覽器會讀取HTML 並開始解析，開始產生 DOM
當遇到 Header 標籤中的 CSS 時，就會開始解析 CSSDOM
繼續建構 DOM 及CSSDOM
解析完讀到 <body> 上方的 <script> ，此時會透過 JavaScipt 去增修節點內
將 DOM 和 CSSOM 合併為 Render Tree，準備開始運算
接著計算畫面排版比例，最後刻出畫面細節

看似合理的一個流程圖，其實內藏了很多細節啊！讓我們繼續往下看看！

DOM 文件物件模型 (Document Object Model)

有沒有想過，為什麼一大串的 HTML，瀏覽器能在一秒內全部解析並呈現出來呢？

原因是 DOM 背後用的是樹狀結構 (tree) 的資料結構，透過樹狀結構，能夠讓查找階層父子關係的 HTML 能夠更快速，如下圖所示。

CSSOM CSS 物件模型(CSS Object Model)

CSS 物件模型其實和 DOM 的建構方式差不多，一樣是透過樹狀結構來讓網頁中的 CSS code能夠更快速地被建構以及查找，這也就是 CSS 有優先級順序的原因，當你先定義了 span 的樣式，此時他會在第二層就被觸發，而當 CSS 繼續往下查找時，就會覆蓋掉原先的設定，因此在階層上也要很注意層級關係。
可以看看我之前寫的這篇：CSS 優先級實作

介紹了基本的物件模型後，另一個重點來了

為什麼 JavaScript 能夠處理 HTML 和 CSS 呢？

要理解這點前，需要知道 JS 的介入時間點，說的明確一點，就是：

JS 是在建構成 DOM 和 CSSDOM 的時候開始運作

也因此能夠透過 JS 加入及修改一些原本 HTML 沒有的元素，也就是因為如此，所以HTML 中的 <Script> 通常都放在 </body> 的上方，讓瀏覽器先把 DOM Tree建構出來後，再透過 JS 修改，避免 JS 去變動還沒形成的 DOM 元素！

大概說明了一下簡單的流程，更進階的「關鍵渲染路徑」之後也會再出一篇文章來好好介紹他的！