iT邦幫忙

2023 iThome 鐵人賽

DAY 30
0
Software Development

從餐飲業轉職成小白工程師的所見所學系列 第 30

瀏覽器輸入網址會發生什麼事情? Day30

  • 分享至 

  • xImage
  •  

經典的面試題之一,讓我們來分析一下。
會有以下步驟 :
域名解析、TCP連接、發起HTTP請求、伺服器返回請求、瀏覽器渲染頁面

域名解析

瀏覽器會向 DNS 找到網域對應的IP。在發出DNS請求之前,瀏覽器會先檢查 cache。檢查的目的是查看是否解析過此網站,如果解析過系統會使用之前儲存的 IP位址。

建立TCP連接

建立過程如下

  1. Client 發送 SYN packet to server
  2. Server open port 就可以接受連線,並回傳 SYN/ACK packet
  3. Client 收到 SYN/ACK packet 之後向 server 發送 ACKpacket
  4. 瀏覽器發起 HTTP 請求 裡面會包含方法 (GET)、網址、其他需要資訊

伺服器處理請求並返回

伺服器處理之後,會將資料以 HTTP response 回應,其中包含了 HTTP status code、 Content-ENcoding、Cache-control、Cookie

瀏覽器渲染畫面

瀏覽器會解析 HTML 內容並繪製到畫面上

解析HTML 結果是 DOM tree,就是把HTML 文件用一個樹狀資料結構來描述。
取得外部資源 CSS 檔案下載並解析之後,會建造 CSSOM tree ,是一種查詢樣式規則的樹狀資料結構。
DOM tree、CSSOM tree 組合成 render tree,裡面包含了渲染頁面所需的節點。

不知不覺已經到第三十天了,恭喜賀喜完賽了!
之後還是會在個人部落格上更新文章,各位可以去看看喔~傳送門


上一篇
資料結構 - Tree Day29
系列文
從餐飲業轉職成小白工程師的所見所學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言