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

Augustus
Augustus
Nov 4, 2018 · 2 min read

本篇同步發表於:Let’s Write - 從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

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

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

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

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

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

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

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


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

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

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

如果覺得有幫助,請不吝拍個手。

Augustus Front-End study notes

Augustus,前端工程師的學習筆記

Augustus

Written by

Augustus

努力學習中的前端工程師。目前心得:前端是條不歸路啊孩子……https://letswrite.tw/

Augustus Front-End  study notes

Augustus,前端工程師的學習筆記

More From Medium

More on Front End Development from Augustus Front-End study notes

More on Front End Development from Augustus Front-End study notes

用原生JS做一個簡單的抽獎功能頁面

More on SEO from Augustus Front-End study notes

More on SEO from Augustus Front-End study notes

wordpress SEO 有幫助的2個外掛

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade