浏覽器頁面渲染實作

【目标：頁面内容快速加載 + 互動流暢】

1.導航：

使用者通過在位址欄輸入一個URL、點選一個連結、送出表單或者是其他的行為

2.DNS查找：

對于一個web頁面來說導航的第一步是要去尋找頁面資源的位置。如果導航到https://example.com, HTML頁面 被定為到IP位址為 192.168.0.1 的伺服器。如果以前沒有通路過這個網站，就需要進行DNS查找。

3.‘三次握手’建立連接配接 （tsl建立安全連接配接）

4.響應：

浏覽器向伺服器發送http請求，伺服器響應傳回資料。

5.解析：

解析是浏覽器将通過網絡接收的資料轉換為DOM和CSSOM的步驟，通過渲染器把DOM和CSSOM在螢幕上繪制成頁面。在渲染到螢幕上面之前，HTML、CSS、JavaScript必須被解析完成。

6.渲染：參考連結

• 建構DOM樹（第一步是處理HTML标記并構造 DOM 樹）。
• 建構SCCOM（第二步是處理 CSS 标記并建構 CSSOM(Style Rules) 樹）。
• 生成Render樹（将 CSSOM 樹和 DOM 樹組合成一個Render樹，從DOM樹的根開始建構，周遊每個可見節點）。
• 布局（根據渲染樹(Layout)來布局，以計算每個節點的幾何資訊。是确定呈現樹中所有節點的寬度、高度、大小和位置的過程）。
• 繪制（将各個節點繪制(Painting)到螢幕上）。