輸入一個url發生什麼

輸入一個url發生了什麼

1. DNS解析
2. TCP鏈接
3. 發送http請求
4. 服務器處理請求
5. 瀏覽器解析渲染頁面
6. 鏈接結束

DNS解析

什麼是DNS?

DNS是一種組織成域層次結構的計算機和網絡服務命名系統，他用於TCP/IP網絡，它所提供的服務是用來將主機名和域名轉換成IP地址的工做。DNS就是這樣的一位"翻譯官"，它的基本工做原理能夠用下圖來表示。

DNS解析過程

1. 檢查瀏覽器緩存中是否緩存過該域名對應的ip地址
2. 若是在瀏覽器緩存中沒有找到ip，那麼將繼續查找本機系統是否緩存過ip
3. 向本地域名解析服務發起域名解析的請求
4. 向根域名解析服務器發起域名解析請求
5. 根域名服務器返回gTLD(通用頂級域)域名解析服務器地址
6. 向gTLD服務器發起解析請求
7. gTLD服務器接收請求病返回Name Server服務器
8. Name Server 服務器返回ip地址給本地服務器
9. 本地域名服務器緩存解析結果
10. 返回解析結果給用戶

DNS負載均衡

DNS負載均衡技術的實現原理是在DNS服務器中爲同一個主機名配置多個IP地址，在應答NDS查詢時，DNS服務器對每一個查詢將以DNS文件中主機記錄的IP地址按順序返回不一樣的解析結果，將客戶端的訪問引導到不一樣的機器上去，使得不一樣的客戶端訪問不一樣的服務器，從而達到負載均衡的目的。

TCP鏈接

三次握手的目的

目的是爲了防止已經失效的鏈接請求報文段忽然有傳送到了服務端，於是產生錯誤

三次握手的過程

1. 客戶端發送一個帶SYN=1，Seq=X 的數據包到服務器端(第一次握手，由瀏覽器發起，告訴服務器我要發送請求了)
2. 服務器發揮一個帶SUN=1,ACK=Y的響應包以示傳達確認信息(第二次握手，由服務器發起，告訴瀏覽器我準備接收了，能夠發送了)
3. 客戶端再傳回一個帶ACK=Y+1,Seq=Z的數據報，表明握手結束(第三次握手，由瀏覽器發送，告訴服務器，我準備發送了)

(°ー°〃)咱們用大白話解釋下三次握手

快遞小哥：你好，你的快遞到了，你在家沒？
小明：在家呢，送過來吧。
快遞小哥：好的，立刻送到。

發送HTTP請求

請求報文由請求行，請求頭，空行，請求體四個部分組成。

請求行包含請求方法，URL，協議版本

• 請求方法包括：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。
• URL即請求地址
• 協議版本即http版本號

GET /js/count.js HTTP/1.1

上面代碼中GET表明請求方法，/js/count.js表示URL，HTTP/1.1表明http版本

請求行包含請求的附加信息，由關鍵字/值對組成，每行一堆，關鍵字和值用英文冒號":"分隔。

請求頭部通知服務器關於客戶端請求的信息。它包含許多有關的客戶端環境和請求正文的有用信息。好比：

• Host:主機名，虛擬主機
• Connection：HTTP/1.1增長的，使用keeoalive,即持久鏈接，一個鏈接能夠發多個請求
• User-Agent:客戶端程序的信息，就是我發送請求的瀏覽器信息
• Accept:瀏覽器能夠接收的媒體數據類型
• Accept-Encoding：是瀏覽器用來告知服務器它可以支持的內容編碼及內容編碼的優先級順序，可一次性指定多種內容編碼
• Accept-Language:高hi服務器瀏覽器可以處理的天然語言集
• Cookie：瀏覽器記錄的用戶相關信息

請求體:能夠承載多個請求參數的數據，包含回車符、換行符和請求數據，並非全部請求都具備請求數據。

服務器處理請求返回HTTP報文

響應報文由相響應行、響應頭、響應主體三個部分組成，以下圖

響應行包含協議版本、狀態碼、狀態碼描述

HTTP/1.1 200 OK

• 協議版本：HTTP/1.1

• 狀態碼：200

  • 200：請求成功
  • 201：以建立，成功請求並建立了新的資源
  • 203：非受權信息。請求成功，但返回的meta信息不在原始的服務器，而是一個副本
  • 204：無內容。服務器處理成功，但未返回內容。在未更新網頁的狀況下，可確保瀏覽器繼續顯示當前文檔
  • 301：永久重定向
  • 302：臨時重定向
  • 307：臨時重定向。與302相似。使用GET請求重定向
  • 400：客戶端請求的語法錯誤，服務器沒法理解(給服務端傳的參數和服務端指定接受的字段不一樣)
  • 404：服務器沒法根據客戶端的請求找到資源
  • 405：客戶端請求中的方法被禁止(請求方法不對，好比服務端設置GET請求，客戶端使用POST請求)
  • 500：服務端內部錯誤
• 狀態碼描述：ok

響應頭

響應頭爲客戶端提供了額外的信息，使得客戶端能夠作出更好的響應。

• Server：服務器告訴客戶端當前服務器上安裝得HTTP服務應用程序的信息，可能包含服務器上的軟件應用名稱，版本號
• Content-Type：代表了服務器返回給瀏覽器的實體內容的類型
• Transfer-Encoding: chunked 表示輸出的長度不能肯定，普通的靜態頁面、圖片之類的基本上都用不到這個。動態頁面可能會用到。
• Cache-Control：緩存控制，默認值爲private,表示內容只緩存到私有緩存中(僅客戶端能夠緩存，代理服務器不可緩存)
• Expires：告知客戶端資源失效日期

響應主體

服務端給客戶端返回的文本信息

瀏覽器解析渲染頁面

關鍵渲染路徑

關鍵渲染路徑是指瀏覽器從最初接收請求來的HTML、CSS、JS等資源，而後解析，構建樹、渲染布局、繪製，最後呈現給客戶能看到的界面的整個過程

主要包括如下幾步

1. 解析HTML生成DOM樹
2. 解析CSS生成CSSOM規則樹
3. 將DOM樹與CSSOM規則樹合併在一塊兒生成渲染樹
4. 遍歷渲染樹開始佈局，計算每一個節點的位置大小信息
5. 將渲染樹每一個節點繪製到屏幕

構建DOM樹

當瀏覽器接收到服務器響應來的HTML文檔後，會遍歷文檔節點，生成DOM樹。須要注意的是，DOM樹生成過程當中可能會被CSS和JS的加載執行阻塞。

構建CSSOM規則書

瀏覽器解析CSS文件並生成CSS規則樹，每一個CSS文件都被解析成一個StyleSheet對象，每一個對象都包含CSS規則。CSS規則對象包含對應於CSS語法的選擇器和聲明對象以及其餘對象

渲染阻塞

當瀏覽器遇到一個script標記時，DOM構建將暫停，直至腳本完成執行，而後繼續構建DOM。每次去執行Js腳本都會嚴重阻塞DOM樹的構建，若是js腳本還操做的CSSOM,而正好這個CSSOM尚未下載和構建，瀏覽器甚至會延遲腳本執行和構建DOM，直至完成其CSSOM的下載和構建。

因此script標籤的位置很重要。實際使用時，能夠遵循下面兩個原則：

1. CSS優先：引入順序上，CSS資源先於JS資源。
2. JS置後：一般咱們把JS代碼放到頁面底部，且JS應儘可能少影響DOM構建

構建渲染樹

經過DOM樹和CSS規則樹咱們即可以構建渲染樹。瀏覽器會先從DOM樹的根節點開始遍歷每一個可見節點。對每一個可見節點，找到其適配的CSS樣式規則並應用。

渲染樹構建完成後，每一個節點都是可見節點而且都含有其內容和對應的規則的樣式。這也是渲染樹與DOM樹最大的區別。渲染樹是用於顯示，那些不可見的元素固然就不會在這棵樹中出現了，除此以外，display等於none的也不會被顯示在這棵樹裏頭，可是visibility等於hidden的元素是會顯示在這棵樹裏頭的。

渲染樹佈局

佈局階段會從渲染樹的根節點開始遍歷，而後肯定每一個接待你對象在頁面上的確切大小與位置，佈局階段的輸出是一個盒子模型，他會精確的捕獲每一個元素在屏幕內的確切位置與大小。

渲染樹繪製

在繪製階段，遍歷渲染樹，調用渲染器的paint()方法在屏幕上顯示其內容。渲染樹的繪製工做是由瀏覽器的UI後端組件完成

迴流與重繪

根據選安然樹佈局，計算CSS樣式，即每一個節點在頁面中的帶線啊哦和位置等幾何信息。HTML默認是流式佈局的，CSS和JS會打破這種佈局，改變DOM的外觀樣式以及大小和位置。這時就會觸發迴流和重繪

重繪

屏幕的一部分重繪，不影響總體佈局，好比某個CSS的背景色變了，但元素的幾何尺寸和位置不變。

常見引發重回的屬性

• color
• border-style
• box-shadow
• background
• background-size
• border-radius
• background-position

迴流

當元素的大小位置改變，須要從新驗證並計算渲染樹。是渲染樹的一部分或所有發生了變化。

常見引發迴流的屬性和方法

• 添加或者刪除可見的DOM元素
• 元素尺寸改變--邊距、填充、邊框、寬度和高度
• 內容變化，好比用戶在input中輸入文字
• 瀏覽器窗口尺寸改變
• 計算offsetWidth和offsetHeight

從上面能夠看出：迴流必將引發重繪，而重繪不必定會引發迴流。

瀏覽器的渲染隊列

思考下面代碼會觸發幾回渲染？

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';

這段代碼理論上會觸發4次重繪和迴流，由於每次都改變了元素的集合屬性，實際上最後支出法了一次迴流，這都得益於

瀏覽器的渲染隊列機制

當瀏覽器發現某一行代碼是改變元素樣式時，瀏覽器不會當即進行渲染，而是緩那麼一哆嗦，看你下一行代碼是否是在改樣式，若是下一行仍是改樣式，在緩一哆嗦，若是連續發現幾行代碼都是在改樣式，瀏覽器會等待這幾行代碼所有執行完，纔會進行渲染，這就是瀏覽器的渲染隊列機制

動畫效果應用position屬性爲absolute或fixed元素上(脫離文檔流)

這種方法也會引起迴流，可是會對其餘元素沒有影響，能夠提高性能

css3硬件加速(GPU加速)

硬件加速會自動規避迴流和重繪
css中又一下幾個屬性能觸發硬件加速

1. transform
2. opacity
3. filter
4. will-change

若是有一些元素不須要用到上述屬性，可是須要觸發硬件加速效果，可使用一些小技巧來誘導瀏覽器開啓硬件加速。

-webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); 
    /**或者**/
    transform: rotateZ(360deg);
    transform: translate3d(0, 0, 0);

要注意的問題

• 過多的開啓硬件加速可能會耗費較多的內存。
• GPU 渲染會影響字體的抗鋸齒效果。這是由於 GPU 和 CPU 具備不一樣的渲染機制，即便最終硬件加速中止了，文本仍是會在動畫期間顯示得很模糊。

斷開鏈接

如今的頁面爲了優化請求的耗時，默認都會開啓持久鏈接（keep-alive），那麼一個TCP鏈接確切關閉的時機，是這個tab標籤頁關閉的時候。這個關閉的過程就是四次揮手.因爲TCP鏈接時全雙工的，所以，每一個方向都必需要單獨進行關閉，這一原則是當一方完成數據發送任務後，發送一個FIN來終止這一方向的鏈接，收到一個FIN只是意味着這一方向上沒有數據流動了，即不會再收到數據了，可是在這個TCP鏈接上仍然可以發送數據，直到這一方向也發送了FIN。首先進行關閉的一方將執行主動關閉，而另外一方則執行被動關閉

1. client發送一個FIN，用來關閉client到server的數據傳送，cliient進入FIN_WAIT_1狀態
2. server收到FIN後，發送一個ack給client，確認序列號爲收到序列號+1（與SYN相同，一個FIN佔用一個序號），server進入CLOSE_WAIT狀態
3. server發送一個FIN，用來關閉server到client的數據傳送，server進入LAST_ACK狀態
4. client收到FIN後，client進入TIME_WAIT狀態，接着發送一個ack給server，確認序列號爲收到序列號+1，server進入CLOSED狀態，完成四次揮手