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

/

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

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

文章中說有資歷的前端在面試時會遇到三個問題,能回答的話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
文章中說有資歷的前端在面試時會遇到三個問題,能回答的話offer大概也到手了:1、用戶輸入URL回車之後,瀏覽器到底做了啥?2、頁面渲染的完整流程是怎樣的?3、前端性能優化有哪些經驗?坦白說,因為這三題我完全答不出來,覺得是很勸世的一篇文章啊,就認真的來看。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:下篇 – 三大步驟

Front-End

MacBook 用隨身碟執行 Windows 10:Windows To Go、WinToUSB

Analytics Google

Google Analytics 加上 AI

API

Instagram Embedding 抓 iframe 高度及 3 種大小圖片

Front-End

JavaScript 載入方式 defer、async

Google Others

用 reCAPTCHA v3 來做非機器人驗證

Bot LINE

用 LINE Push Messaging API 推播每日氣象預報

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

Forms Google

Google 表單,提交後系統自動寄送回覆通知 email

API

接氣象局 API、跨網域 AJAX 資料

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.