從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?
從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

這篇是一個整理,把最近看到的一篇文章整理成一個流程圖。

來源文章是這篇:一篇文章搞定前端面試

文章中說有資歷的前端在面試時會遇到三個問題,能回答的話 Offer 大概也到手了:

  1. 用戶輸入 URL 回車之後,瀏覽器到底做了啥?
  2. 頁面渲染的完整流程是怎樣的?
  3. 前端性能優化有哪些經驗?

坦白說,因為這三題我完全答不出來,覺得是很勸世的一篇文章啊,就認真的來看。

其實之前在寫「用 performance api 檢測檔案讀取時間」這篇時,就有域名解析時間、TCP 連結時間等的項目,那時只知道那是為了開啟網頁,在背後執行的動作,不甚了了。

一直到看到這篇文章後才知道原來從使用者輸入了網址後,背後還執行了很多 lilicoco 的事,才能讓頁面完整呈現。


一邊看一邊整理,畢竟很多資訊不整理起來,以後忘記了又要重頭看找很耗時間。加上自己整理過的,會比較有記憶,下次再回頭來看時也比較好理解,整理的流程圖如下:

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?
從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

PDF可於此下載:
https://drive.google.com/file/d/1Uz63wz1jUos-J3OcDW-N15Rc7AgjBD56/view?usp=sharing


Summary
從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?
Article Name
從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?
Description
深入探討從使用者輸入網址到瀏覽器呈現網頁的整個過程。本文將帶領讀者了解背後的技術細節,包括域名解析、TCP 連接等,幫助前端開發者備戰面試和提升專業技能。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

1 Comment
最舊
最新
Inline Feedbacks
看所有留言
trackback
使用 Workbox 打造自訂 PWA 快取策略 - 基礎 Progressive Web App 教學 - PWA - Let's Write
5 月 之前

[…] 詳細可以看這一篇:從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程? […]