從輸入URL到頁面加載發生了什么?

從輸入URL到頁面加載發生了什么?

最近在進行前端性能優化方面的一些工作,發現前端性能方面太廣,不知道如何下手。參考了許多文章,發現最終都會歸咎于一個非常經典的問題:從輸入URL到頁面加載發生了什么?通過連接這個過程,然后針對性地對每個過程進行優化,最終實現的就是我們的前端性能優化。本篇文章主要介紹一些基礎性的概念,很少涉及真正的性能優化。

具體過程?

打開瀏覽器,輸入URL,到頁面展示出來,這個中間大致經歷了這些過程:

  1. 輸入URL
  2. DNS解析
  3. TCP握手
  4. HTTP請求
  5. HTTP響應返回數據
  6. 瀏覽器解析并渲染頁面

URL過程.png

上面粗劣的介紹了輸入URL到頁面加載的大致過程,但是缺少更加詳細的過程,事實上w3c給我們提供了一個接口performance.timing更加詳細地介紹了每個過程,并且可以通過這個過程獲取頁面性能數據。如下圖所示:

timing-overview.png

上圖的過程大致可以分為三個大的階段:

  1. 緩存相關:主要包括Prompt for unload,redirect和App cache3個過程
  2. 網絡相關:主要包括DNS,TCP和HTTP(Request,Response)3個過程
  3. 瀏覽器相關:主要包括Processing和onload兩個過程

通過將整個過程細分為3個大的階段,然后再每個階段每個階段介紹,這樣方便我們記憶和理解。

緩存相關

1、卸載已有的頁面(Prompt for unload)

我們在頁面中輸入URL時,首先會卸載掉原來的頁面。這是為了釋放頁面占據的內存,否則沒請求一次URL都占據一份內存,會導致瀏覽器占據內存越來越大。

2、重定向(redirect)

所謂的重定向實際上就是先從本地緩存中去查找請求的內容,如果本地緩存中有則直接使用,如果沒有則向服務器進行請求(這只是簡單的理解,實際上如何獲取數據是存在緩存策略的)。事實上,每次從服務器獲取到文件,文件會被暫時存放到一個指定區域,當我們下次再次請求這個文件時,瀏覽器會首先從這個區域查看是否已經存在過這個文件,如果已經存在,則不需要再次進行請求數據。

3、App cache

網絡相關

4、DNS

DNS(Domain Name System)域名系統,顧名思義是用來解析域名系統的。在網絡中,我們人適合于記憶文本,因此我們輸入的都是www.baidu.com這種字符串,但是計算機適合于處理數字,每一臺計算機對應的是一個IP地址。因此,如果我們要訪問一個指定的資源,必須先找到對應的服務器,而找到服務器需要先將域名轉換為對應的IP地址。而DNS就是幫助我們實現這個過程。

域名級別

域名的級別是指一個域名由多少級組成,域名的各個級別被"."分開,總而言之,有多少個點就是幾級域名。
頂級域名在開頭有一個點(.com .cn .net)
一級域名就是在"com cn net"前加一級 (baidu.com)
二級域名就是在一級域名前再加一級(www.baidu.com)
二級域名及以上級別的域名,統稱為子域名,不在注冊域名的范疇中

域名資源記錄

記錄類型 含義
SOA(StartOf Authority,起始授權記錄) 一個區域解析庫中有且只能有一個SOA記錄,而且必須放在第一條
A記錄(主機記錄,針對IPV4的記錄) 用于名稱解析的重要記錄,將特定的主機名映射到對應主機的IP地址上
CNAME記錄(別名記錄) 用于返回另外一個域名,即當前查詢的域名是另一個域名的跳轉,主要用于域名的內部跳轉,為服務器配置提供靈活性
NS記錄(域名服務器記錄) 用于返回保存下一級域名信息的服務器地址。該記錄只能設置為域名,不能設置為IP地址
MX(郵件記錄) 用戶返回接收電子郵件的服務器地址
C記錄(IPV6記錄) 用于將特定的主機名映射到一個主機的IPV6地址

域名服務器

DNS.png

域名的解析需要用到一系列的服務器,而不是簡單的一個服務器。比如:用戶想要解析www.google.com:

  1. 在本機上輸入www.google.com
  2. 2號服務器是用戶在自己電腦上填寫的DNS地址,由于域名和ip地址的對照表非常龐大,因此2號服務器會進行分層管理。2號服務器進行域名解析是會先從緩存中進行查找,如果一個域名被頻繁訪問,通?;岜槐4嫻交捍嬤?。如果DNS這沒有對應的域名-IP緩存,那么就需要向根服務器(Root Server)發起請求。
  3. 根服務器負責維護全球的域名-IP地址解析。根服務器會檢查域名后綴(比如.com),根據不同的后綴,交給不同的TLD服務器處理?;袢〉膠笞漢?,返回對應的TLD服務器的ip地址(com = 1.1.1.1)。
  4. DNS拿到TLD服務器的IP地址后,繼續向TLD服務器進行詢問。TLD服務器只返回頂級域名對應的IP(google.com = 2222),交給頂級域名對應的Name Server處理。
  5. DNS服務器獲取到頂級域名的IP后,繼續向Name Server進行詢問。Name Server返回具體的域名對應的IP地址。
  6. DNS服務器獲取到具體的域名對應的IP后,會先進行緩存,避免下次請求時繼續多次詢問。

5、TCP

TCP是HTTP的下層協議,我們想要通過HTTP進行請求,必須先通過TCP進行連接,也就是說HTTP是依賴于TCP的。TCP的作用就是連接指定IP地址的服務器(通過DNS已經獲取到對應的服務器IP地址)。

每次連接的時候,TCP都會經歷三次握手,每次斷開連接時TCP都會經歷四次揮手。這些過程就是可以優化的地方,這里不做闡釋。

6、HTTP請求(Request)和響應(Response)

在 HTTP/1.x 中,如果客戶端要想發起多個并行請求以提升性能,則必須使用多個 TCP 連接。 這是 HTTP/1.x 交付模型的直接結果,該模型可以保證每個連接每次只交付一個響應(響應排隊)。 更糟糕的是,這種模型也會導致隊首阻塞,從而造成底層 TCP 連接的效率低下。 也就是說在目前的HTTP1.X的協議下,瀏覽器對資源的并發請求個數是有限制的。 等到HTTP2到來的時候,通過二進制分幀層進行優化。 HTTP/2 中新的二進制分幀層突破了這些限制,實現了完整的請求和響應復用:客戶端和服務器可以將 HTTP 消息分解為互不依賴的幀,然后交錯發送,最后再在另一端把它們重新組裝起來。

瀏覽器相關

7、文檔解析和DOM的加載(Processing)

HTTP請求后返回的是一個文本,我們需要將文本轉換成DOM樹,然后加載DOM

8、觸發Onload事件(onload)

DOM加載完成之后,觸發onload事件。

posted @ 2019-12-04 17:00  海因斯坦  閱讀(...)  評論(...編輯  收藏