從輸入URL到頁面展現，中間發生了哪些事情

時間 2019-11-07

原文原文鏈接

用戶輸入URL，瀏覽器會根據用戶輸入的信息判斷是搜索仍是網址，若是是搜索內容，就將搜索內容+默認搜索引擎合成新的URL；若是用戶輸入的內容符合URL規則，瀏覽器就會根據URL協議，在這段內容上加上協議合成合法的URL
用戶輸入完內容，按下回車鍵，瀏覽器導航欄顯示loading狀態，可是頁面仍是呈現前一個頁面，這是由於新頁面的響應數據尚未得到
瀏覽器進程瀏覽器構建請求行信息，會經過進程間通訊（IPC協議(進程通訊協議)）將URL請求發送給網絡進程
網絡進程獲取到URL，先去本地緩存中查找是否有緩存文件，若是有，攔截請求，直接返回200(from cache) ；不然，進入網絡請求過程
網絡進程請求DNS返回域名對應的IP和端口號，若是以前DNS數據緩存服務緩存過當前域名信息，就會直接返回緩存信息；不然，發起請求獲取根據域名解析出來的IP和端口號，若是沒有端口號，http默認80，https默認443。若是是https請求，還須要創建TLS鏈接。
Chrome 有個機制，同一個域名同時最多隻能創建 6 個TCP 鏈接，若是在同一個域名下同時有 10 個請求發生，那麼其中 4 個請求會進入排隊等待狀態，（優化這個問題的辦法在這裏[www.sojson.com/blog/98.htm…]），直至進行中的請求完成。若是當前請求數量少於6個，會直接創建TCP鏈接。
TCP三次握手創建鏈接，http請求加上TCP頭部——包括源端口號、目的程序端口號和用於校驗數據完整性的序號，向下傳輸
網絡層在數據包上加上IP頭部——包括源IP地址和目的IP地址，繼續向下傳輸到底層
底層經過物理網絡傳輸給目的服務器主機
目的服務器主機網絡層接收到數據包，解析出IP頭部，識別出數據部分，將解開的數據包向上傳輸到傳輸層
目的服務器主機傳輸層獲取到數據包，解析出TCP頭部，識別端口，將解開的數據包向上傳輸到應用層
應用層HTTP解析請求頭和請求體，若是須要重定向，HTTP直接返回HTTP響應數據的狀態code301或者302，同時在請求頭的Location字段中附上重定向地址，瀏覽器會根據Location進行重定向操做；若是不是重定向，首先服務器會根據請求頭中的If-None-Match 的值來判斷請求的資源是否被更新，若是沒有更新，就返回304狀態碼，協商緩存，至關於告訴瀏覽器以前的緩存還可使用，就不返回新數據了；不然，返回新數據，200的狀態碼，而且若是想要瀏覽器緩存數據的話，就在相應頭中加入字段：Cache-Control:Max-age=？，響應數據返回到網絡進程。
數據傳輸完成，TCP四次揮手斷開鏈接。若是，瀏覽器或者服務器在HTTP頭部加上以下信息（Connection:Keep-Alive ），TCP就一直保持鏈接。保持TCP鏈接能夠省下下次須要創建鏈接的時間，提示資源加載速度
網絡進程將獲取到的數據包進行解析，根據響應頭中的Content-type來判斷響應數據的類型，若是是字節流類型，就將該請求交給下載管理器（屬於瀏覽器進程），該導航流程結束，再也不進行；若是是text/html類型或者其餘類型，就通知瀏覽器進程獲取到文檔準備渲染
瀏覽器進程獲取到通知，根據當前頁面B是不是從頁面A打開，而且和頁面A是不是同一個站點（根域名和協議同樣就被認爲是同一個站點），若是知足上述條件，就複用以前網頁的進程，不然，新建立一個單獨的渲染進程

16. 瀏覽器會發出「提交文檔」的消息給渲染進程，渲染進程收到消息後，會和網絡進程創建傳輸數據的「管道」，文檔數據傳輸完成後，渲染進程會返回「確認提交」的消息給瀏覽器進程 17. 瀏覽器收到「確認提交」的消息後，會更新瀏覽器的頁面狀態，包括了安全狀態、地址欄的 URL、前進後退的歷史狀態，並更新web頁面，此時的web頁面仍是空白頁,接下來就到了渲染進程來工做了。

瀏覽器渲染進程主要流程

渲染進程對文檔進行頁面解析和子資源加載， 1.渲染進程將HTML內容轉換爲可以讀懂的DOM樹結構 2.渲染引擎將CSS樣式錶轉化爲瀏覽器能夠理解的styleSheets,計算出DOM節點的樣式。 3.建立佈局樹，並計算元素的佈局信息 4.對佈局樹進行分層，並計算元素的佈局信息 5.爲每一個圖層生成繪製列表、並將其提交到合成線程 6.合成線程將圖層分紅圖塊，並在光柵線程池中將圖塊轉成位圖 7.合成線程發送繪製圖塊命令DrawQuad給瀏覽器進程 8.瀏覽器進程根據DrawQuad消息生成頁面，並顯示到顯示器上

HTML解析

HTML Parser的任務是將HTML標記解析成DOM Tree，舉個例子html

舉個例子：一段HTML
<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>
複製代碼

通過解析以後的DOM Tree差很少就是 web

將文本的HTML文檔，提煉出關鍵信息，嵌套層級的樹形結構，便於計算拓展。這就是HTML Parser的做用。

CSS解析

CSS Parser將CSS解析成Style Rules，Style Rules也叫CSSOM（CSS Object Model）。 StyleRules也是一個樹形結構，根據CSS文件整理出來的相似DOM Tree的樹形結構： json

與HTML Parser類似，CSS Parser做用就是將不少個CSS文件中的樣式合併解析出具備樹形結構Style Rules。

JavaScript解析

瀏覽器解析文檔，當遇到script標籤的時候，會當即解析腳本，中止解析文檔（由於JS可能會改動DOM和CSS，因此繼續解析會形成浪費）。若是腳本是外部的，會等待腳本下載完畢，再繼續解析文檔。如今能夠在script標籤上增長屬性 defer或者async。腳本解析會將腳本中改變DOM和CSS的地方分別解析出來，追加到DOM Tree和Style Rules上。segmentfault

呈現樹（Render Tree）

Render Tree的構建其實就是DOM Tree和CSSOM Attach的過程。呈現器是和 DOM 元素相對應的，但並不是一一對應。Render Tree實際上就是一個計算好樣式，與HTML對應的（包括哪些顯示，那些不顯示）的Tree。瀏覽器

佈局Layout

建立渲染樹後，下一步就是佈局（Layout）,或者叫回流（reflow,relayout），這個過程就是經過渲染樹中渲染對象的信息，計算出每個渲染對象的位置和尺寸，將其安置在瀏覽器窗口的正確位置，而有些時候咱們會在文檔佈局完成後對DOM進行修改，這時候可能須要從新進行佈局，也可稱其爲迴流，本質上仍是一個佈局的過程，每個渲染對象都有一個佈局或者回流方法，實現其佈局或迴流。緩存

對渲染樹的佈局能夠分爲全局和局部的，全局即對整個渲染樹進行從新佈局，如當咱們改變了窗口尺寸或方向或者是修改了根元素的尺寸或者字體大小等；而局部佈局能夠是對渲染樹的某部分或某一個渲染對象進行從新佈局。安全