當在瀏覽器輸入一個網址時的流程
這個小節主要是在說明當我們輸入一個網址到瀏覽器中，它會經過 資料傳輸的步驟之後，再接著執行網頁解析的步驟。
以下就是這兩個步驟的詳細經過過程。
資料傳輸
以下會說明，當你輸入一個網址時，瀏覽器會和伺服器之間，先做什麼協定，並在什麼時機點傳輸資料。
舉例:
你輸入 https://ithelp.ithome.com.tw/users/20083608/ironman/3780?page=2 這個網址後，你點開發者模式，點 Network 選項，然後選擇Doc 選項，代表你只要看 documet 的內容，
然後，你的選單裡面只會剩下一個 documet 的內容，你點他，然後，點他的 Timing 選項，你就可以依序看到
DNS Lookup -> initial connection -> SSL -> Requert sent -> Waiting -> Content Download
DNS Lookup
代表瀏覽器在解析你的網址 IP
initial connection
建立交握
SSL
建立 SSL 交握
Requert sent
發送請求
Wating
等待資源下載
Content Download
資源下載完畢
接著，會回傳 200 狀態碼給瀏覽器，代表資料傳輸成功。
最後，瀏覽器才會去接析這些下載完成的檔案。
所以，綜合以上的步驟，我們就用下方幾個步驟來描述當你輸入網址時，中間會發生什麼事
瀏覽器進行網址 DNS 的解析，並獲得網址對應 IP -> 進行 TCP 交握 -> 進行 SSL 交握 -> 發出網路請求 -> 獲得 html respone ，並顯示回傳碼 200 -> 解析 HTML 並顯示在瀏覽器上
記得!!網頁一定會先下載該網頁的 HTML 文本。不然，瀏覽器根本沒有內容可以解析。也就不知道你的網頁要長什麼樣子了。
網頁解析
經過上面的介紹之後，我們可以知道，最終我們會先取得目標網站的 HTML 文本，接著，這邊的步驟就是介紹，瀏覽器會如何解析獲得的 HTML 文本。
首先瀏覽器會由上到下去解析 HTML 文本的內容，接著，若在解析的過程碰到像是請求 CSS 檔案的話，就會發出 CSS 檔案的請求，等到 CSS 檔案下載完畢之後，就會去解析這個 CSS 檔案，CSS 檔案解析完成之後，瀏覽器會先做 layout 的動作，這個動作就是先將網頁上的各個 DOM 元素的尺寸 或 布局先放到網頁上。等到 layout 這個步驟完成之後，才會將這些 DOM 元素的內容畫上去，最後，會將各層元素都合併在一起，完成網頁內容的渲染。
開發者模式 performance
那以上這些網頁解析的順序你可以透過網頁開發者模式的一個 Performance 的選項看到解析 HTML 文本和 發出各種檔案請求的順序。
首先，你先到一個網頁中，點它的網頁開發者模式的一個 Performance 的選項。
第二，按下開發者使用介面中，左上角的圓形圖案，將它按成紅色的，代表開始紀錄網頁請求過程，接著，重新整理一次你的頁面，如此，你應該就可以看到這個 performance 選項中出現網頁傳輸和解析的過程囉。
瀏覽器是一個區塊一個區塊在解析 HTML 文本的
由上面的開發者頁面中 performance 中，我們可以看到 parse HTML 的部分，瀏覽器會一區塊、一區塊的解析 HTML 文本，它不是直接從第 1 行直接一路解析到文本的最底部。
看出誰拖慢網頁效能
我們可以由上面這個 performance 的內容，看出各種資源的下載總共花了多少時間，藉此得知那些資源的下載有可能拖慢整體的網頁速度 或者 也可以知道是載入 js 檔案中，哪一個函式導致網頁效能變慢的。