大部分參考來自從輸入 URL 到頁面載入完成的過程中都發生了什麼事情？

總過程：

輸入網址URL

快取機制

DNS解析

TCP連線

傳送http請求

接受響應，判斷狀態碼選擇處理方式

判斷快取

解碼

渲染

連線結束

1.輸入網址Url

埠預設為80，一共有6要素：協議，域名，路徑，查詢引數，錨點，埠

URI：

統一資源識別符號

（英語：Uniform Resource Identifier）

URL：

統一資源定位符(

英語：Uniform Resource Locator）

URN：

統一資源名稱

（英語：Uniform Resource Name）

URI可被視為定位符（URL），名稱（URN）或兩者兼備。

URL代表一個人的住址，如網址

http：//www。

wikipedia。org/

URN如同一個人的名稱，如書號ISBN 0-395-36341-1

換言之，URN定義某事物的身份，而URL提供查詢該事物的方法

2.經過快取機制

將URL與快取進行比對如果請求的頁面在快取中且未過期，則直接進行

第7步

2.1 徹底快取的機制（http首部欄位）：cache-control，Expires

——Expires是一個絕對時間，即伺服器時間。瀏覽器檢查當前時間，如果還沒到失效時間就直接使用快取檔案。但是該方法存在一個問題：伺服器時間與客戶端時間可能不一致。因此該欄位已經很少使用，現在基本用cache-control進行判斷。

——cache-control中的max-age儲存一個相對時間。例如Cache-Control： max-age = 484200，表示瀏覽器收到檔案後，快取在484200s內均有效。 如果同時存在cache-control和Expires，瀏覽器總是優先使用cache-control。

2.2 當快取過期時，瀏覽器會向伺服器發起請求詢問資源是否真正過期，這就是快取協商。對應http首部欄位：last-modified，Etag

——last-modified是第一次請求資源時，伺服器返回的欄位，表示最後一次更新的時間。下一次瀏覽器請求資源時就傳送if-modified-since欄位。伺服器用本地Last-modified時間與if-modified-since時間比較，如果不一致則認為快取已過期並返回新資源給瀏覽器；如果時間一致則傳送304狀態碼，讓瀏覽器繼續使用快取。當然，用該方法也存在問題，比如修改時間有變化但實際內容沒有變化，而伺服器卻再次將資源傳送給瀏覽器。所以，使用Etag進行判斷更好。

——Etag：資源的實體標識（

雜湊字串

），當資源內容更新時，Etag會改變。伺服器會判斷Etag是否發生變化，如果變化則返回新資源，否則返回304。

快取協商的過程需要發起一起HTTP請求，如果返回304則繼續使用快取。對於移動端一次請求還是有代價的，所以我們需要避免304。

對於很少進行更改的靜態檔案，可以在檔名中加入版本號，如

get。v1。js

，並且把Cache-Control的max-age設定成一年半載，這樣就不會發送請求。

需要注意的是，當這些檔案更新的時候，我們需要更新其版本號，這樣瀏覽器才會到伺服器下載新資源。

3.DNS解析得到ip：

由於ip比較難記，所以一般輸入域名，透過dns解析得到ip。

網域名稱系統

（英文：Domain Name System，縮寫：

DNS

）是網際網路的一項服務。它作為將域名和IP地址相互對映的一個分散式資料庫，能夠使人更方便地訪問網際網路。

DNS查詢快取順序：瀏覽器快取——>hosts檔案——>路由器快取——>網路服務商快取——>根域名伺服器快取

4.建立連線--三次握手

得到 ip 地址後，知道了伺服器的 IP 地址，下面便開始與伺服器建立連線了。

TCP是網際網路中的

傳輸層協議

，提供可靠的連結服務，採用三次握手確認一個連線：

1。 瀏覽器向伺服器傳送建立連線的請求。

2。 伺服器接收到瀏覽器傳送的請求後，想瀏覽器傳送統一連線的訊號。

3。 瀏覽器接受到伺服器發出的同意連線的訊號後，再次向伺服器發出確認連線的訊號。

當三次握手返程，TCP客戶端和服務端成功的建立連線，就可以開始傳輸資料了。

第三次是防止了伺服器端的一直等待而浪費資源

三次握手的過程：

主機向伺服器傳送一個建立連線的請求（您好，我想認識您）；

伺服器接到請求後傳送同意連線的訊號（好的，很高興認識您）；

主機接到同意連線的訊號後，再次向伺服器傳送了確認訊號（我也很高興認識您），自此，主機與伺服器兩者建立了連線。

TCP/IP

協議層次

模型共分為四層，分別是：應用層、傳輸層、網路層、資料鏈路層

應用層 http、ftp、DNS 比如瀏覽器登入介面

傳輸層tcp/udp 傳的快慢

網路層ip 路由器，指導傳送路徑

資料鏈路層 交換機，處理幀資料

tcp協議

：傳送資訊以後，可以確認資訊是否到達，也就是有應答的方式。先確認有沒有人，傳到之後也會告訴你成功了。可以比喻成很慢的打電話，可以有效確認。但是速度上是比udp慢的。

UDP協議：傳送以後就不管了，不去確認資訊是否到達。說什麼就傳什麼的機制。可以比喻成飛快的寫信，發了不知道有沒有收到，速度上比tcp快。

TCP 和 UDP 的區別是什麼

TCP 可靠、面向連線、相對 UDP 較慢；

UDP 不可靠，不面向連線、相對 TCP 較快。搞定。

osi模型

5.網頁請求

瀏覽器會開始構造一個

應用層

的 http 請求，把

傳輸層

tcp 包被封到

網路層

的 ip 包裡面，ip 包再被封裝到

資料鏈路層

的資料幀結構中，再透過

物理層

的

位元流

送出去。

http規定如何請求響應的書寫。應用層

tcp規定如何傳輸。傳輸層

ip規定如何連線以及對應位置。網路層

port對應ip不同服務

一個典型的 http 請求的 header 一般需要包括請求的方法，例如 GET 或者 POST 等。

瀏覽器向 web 伺服器傳送一個 HTTP 請求，請求中包含請求檔案的位置、請求檔案的方式等等

6.瀏覽器接受 HTTP 響應，檢查 HTTP header 裡的狀態碼，並做出不同的處理方式

比如404顯示錯誤頁面，304使用快取，200下一步解碼和渲染， 204頁面不會發生更新。

常見狀態碼：200 ok， 204 no content， 206 partial content

301 moved permanently（資源已分配新的uri），302 found（本次使用新uri訪問），303 see other（以get定向到另一個uri），304 not modified， 307 temporary redirect（不會從post改為get）

400 bad request，402 unauthorized，403 forbidden， 404 not found

500 internal server error，503 service unavailable

7.如果是可以快取的，這個響應則會被儲存起來

根據首部欄位判斷是否進行快取。例如，Cache-Control， no-cache（每次使用快取前和伺服器確認），no-store 絕對禁止快取

8.解碼

9。1 瀏覽器拿到

index。html

檔案後，就開始解析其中的html程式碼，遇到js/css/image等靜態資源時，就向伺服器端去請求下載

9。2 解析成對應的樹形資料結構DOM樹、CSS規則樹，Javascript指令碼透過DOM API和CSSOM API來操作DOM樹、CSS規則樹。

9

.渲染

10。1 計算CSS樣式（JS可動態修改dom或css，進一步改變渲染樹和分佈）

10。2 構建渲染樹（Repaint：螢幕的一部分要重畫，比如某個CSS的背景色變了，元素的幾何尺寸沒有變。Reflow：幾何尺寸變了，我們需要重新驗證並計算Render Tree。）

10。3 確認佈局（定位

座標

和大小，是否換行，各種position， overflow， z-index屬性 ……）

10。4 繪製（呼叫作業系統Native GUI的API繪製，將每個節點轉化為實際畫素繪製到視口上）

10.斷開連線--四次揮手

四次揮手的過程：

主機向伺服器傳送一個斷開連線的請求（不早了，我該走了）；

伺服器接到請求後傳送確認收到請求的訊號（知道了）；

伺服器向主機發送斷開通知（我也該走了）；

主機接到斷開通知後斷開連線並反饋一個確認訊號（嗯，好的），伺服器收到確認訊號後斷開連線；