前言

此篇為先前記錄自己的學習旅程，也謝謝洧杰校長的課程，也謝謝諸多願意分享知識的文章
我們來聊聊，輸入網址的過程

在網路的世界上，一個碩大複雜的網站來是由多方面的技術集結而成，一個網站的組成還可以分為前端或後端( 如前端 UI/UX 前端框架 後端框架 後端語言 資料庫交互等等)

在我學了一陣子之後，偶然發現洧杰的計算機網路課程，當時課堂開始的第一個問題，就是

「當你輸入一個網址的時候，會發生什麼事?」

我一直都有想過這問題，但每次都沒有認真去剖析流程的脈絡，在拼命努力學習吸收各語言框架的時候，容易會忽略最基本且基礎的問題

你覺得先後執行順序為何?

網址範例： https://www.xx.com.tw/inDdex.html

  1. 進行 TCP 三項交握
  2. 進行 SSL 握手
  3. 瀏覽器進行網址 DNS 解析，並獲得網址對應 IP
  4. 解析 HTML，並顯示於瀏覽器上。
  5. 發出網路請求 (request)
  6. 獲得 HTML response，並顯示狀態碼 200

還記得那時候聊天室的同學每個都不一樣，想當然我的答案也跟別人不一樣

答案:3>1>2>5>6>4

很糗得把 1 跟 2 搞混，在講解之餘，校長還很佛心的將每個步驟都拆開剖析讓你看真正網路運作是什麼樣子

這幾張圖就可以依序說明瀏覽器的執行順序

網路範例

六角學院官網範例

  1. 輸入網址，而瀏覽器進行網址 DNS 解析，並獲得網址對應 IP，好讓我們去索取資料
  2. Intial connection : 建立 TCP 三項交握連線
  3. SSL : 同時建立加密連線(https)
  4. 發出 Request sent 請求網站資料
  5. 請求完成，伺服器 response 200
  6. 解析 HTML，並顯示於瀏覽器上。

而為了要實際觀看網站效能的運作方式，簡易建造一個網站，並有 js css 以圖片路徑

範例
範例

可以看到網站依序先載入 html >> all.css >> user_logo.jpg >> all.js

也可以透過 Waterfall 查看個檔案效能所花費的毫秒時間

以這段紅框處來說，就是發出了四個 request

瀏覽器解析的渲染過程(使用 Performance 查詢)可以粗略分為以下順序

  1. Parse HTML
  2. 發出 all.css all.js img 圖片檔的請求
  3. 載入 all.js
  4. 載入並 Parse Stylesheet
  5. 載入 jpg 檔
  6. Recalculate Style 合併 HTMLCSS
  7. Layout 布局網頁(預留空間的概念)
  8. Paint(渲染網頁)
  9. Composite Layers 合併圖層

渲染流程

以上為這次學習的紀錄，下次有機會來談談 TCP/IP