從輸入URL到頁面加載發生了什么？
最近在進行前端性能優化方面的一些作業，發現前端性能方面太廣，不知道如何下手，參考了許多文章，發現最終都會歸咎于一個非常經典的問題：從輸入URL到頁面加載發生了什么？通過連接這個程序，然后針對性地對每個程序進行優化，最終實作的就是我們的前端性能優化，本篇文章主要介紹一些基礎性的概念，很少涉及真正的性能優化，
具體程序？
打開瀏覽器，輸入URL，到頁面展示出來，這個中間大致經歷了這些程序：
- 輸入URL
- DNS決議
- TCP握手
- HTTP請求
- HTTP回應回傳資料
- 瀏覽器決議并渲染頁面
上面粗劣的介紹了輸入URL到頁面加載的大致程序，但是缺少更加詳細的程序，事實上w3c給我們提供了一個介面performance.timing更加詳細地介紹了每個程序，并且可以通過這個程序獲取頁面性能資料，如下圖所示：
上圖的程序大致可以分為三個大的階段：
- 快取相關：主要包括Prompt for unload,redirect和App cache3個程序
- 網路相關：主要包括DNS,TCP和HTTP(Request,Response)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地址 |
域名服務器
域名的決議需要用到一系列的服務器，而不是簡單的一個服務器，比如：用戶想要決議www.google.com:
- 在本機上輸入www.google.com
- 2號服務器是用戶在自己電腦上填寫的DNS地址，由于域名和ip地址的對照表非常龐大，因此2號服務器會進行分層管理，2號服務器進行域名決議是會先從快取中進行查找，如果一個域名被頻繁訪問，通常會被保存到快取中，如果DNS這沒有對應的域名-IP快取，那么就需要向根服務器(Root Server)發起請求，
- 根服務器負責維護全球的域名-IP地址決議，根服務器會檢查域名后綴(比如.com)，根據不同的后綴，交給不同的TLD服務器處理，獲取到后綴后，回傳對應的TLD服務器的ip地址(com = 1.1.1.1)，
- DNS拿到TLD服務器的IP地址后，繼續向TLD服務器進行詢問，TLD服務器只回傳頂級域名對應的IP(google.com = 2222)，交給頂級域名對應的Name Server處理，
- DNS服務器獲取到頂級域名的IP后，繼續向Name Server進行詢問，Name Server回傳具體的域名對應的IP地址，
- 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事件，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165959.html
標籤：JavaScript