>[danger]問題一：輸入 URL 到頁面渲染的整個流程 1. DNS解析 2. TCP握手 3. TLS握手 4. 瀏覽器開始解析文件 5. 構建 DOM 樹、構建 CSSOM 樹、解析JS 6. 生成 Render 樹 7. 調用 GPU 繪制，合成圖層，將內容顯示在屏幕上了 當來這一過程遠遠不止這些內容，你如果想了解更加詳細的過程，可以閱讀這篇[文章](https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Falex%2Fwhat-happens-when)。 >[info] DNS解析 DNS 的作用就是通過域名查詢到具體的 IP。 因為 IP 存在數字和英文的組合（IPv6），很不利于人類記憶，所以就出現了域名。你可以把域名看成是某個 IP 的別名，DNS 就是去查詢這個別名的真正名稱是什么。 在 TCP 握手之前就已經進行了 DNS 查詢，這個查詢是操作系統自己做的。當你在瀏覽器中想訪問`www.google.com`時，會進行一下操作： 1. 操作系統會首先在本地緩存中查詢 IP 2. 沒有的話會去系統配置的 DNS 服務器中查詢 3. 如果這時候還沒得話，會直接去 DNS 根服務器查詢，這一步查詢會找出負責`com`這個一級域名的服務器 4. 然后去該服務器查詢`google`這個二級域名 5. 接下來三級域名的查詢其實是我們配置的，你可以給`www`這個域名配置一個 IP，然后還可以給別的三級域名配置一個 IP 以上介紹的是 DNS 迭代查詢，還有種是遞歸查詢，區別就是前者是由客戶端去做請求，后者是由系統配置的 DNS 服務器做請求，得到結果后將數據返回給客戶端。 >[info]TCP握手 接下來是 TCP 握手，應用層會下發數據給傳輸層，這里 TCP 協議會指明兩端的端口號，然后下發給網絡層。網絡層中的 IP 協議會確定 IP 地址，并且指示了數據傳輸中如何跳轉路由器。然后包會再被封裝到數據鏈路層的數據幀結構中，最后就是物理層面的傳輸了。 在這一部分中，可以詳細說下 TCP 的握手情況以及 TCP 的一些特性。 當 TCP 握手結束后就會進行 TLS 握手，然后就開始正式的傳輸數據。 >[info]TLS握手 數據在進入服務端之前，可能還會先經過負責負載均衡的服務器，它的作用就是將請求合理的分發到多臺服務器上，這時假設服務端會響應一個 HTML 文件。 首先瀏覽器會判斷狀態碼是什么，如果是 200 那就繼續解析，如果 400 或 500 的話就會報錯，如果 300 的話會進行重定向，這里會有個重定向計數器，避免過多次的重定向，超過次數也會報錯。 >[info]瀏覽器開始解析文件 瀏覽器開始解析文件，如果是 gzip 格式的話會先解壓一下，然后通過文件的編碼格式知道該如何去解碼文件。 >[info]構建 DOM 樹、構建 CSSOM 樹、解析JS 文件解碼成功后會正式開始渲染流程，先會根據 HTML 構建 DOM 樹，有 CSS 的話會去構建 CSSOM 樹。如果遇到 script 標簽的話，會判斷是否存在 async 或者 defer ，前者會并行進行下載并執行 JS，后者會先下載文件，然后等待 HTML 解析完成后順序執行。 如果以上都沒有，就會阻塞住渲染流程直到 JS 執行完畢。遇到文件下載的會去下載文件，這里如果使用 HTTP/2 協議的話會極大的提高多圖的下載效率。 >[info]生成 Render 樹 CSSOM 樹和 DOM 樹構建完成后會開始生成 Render 樹，這一步就是確定頁面元素的布局、樣式等等諸多方面的東西 >[info]調用 GPU 繪制，合成圖層，將內容顯示在屏幕上了 在生成 Render 樹的過程中，瀏覽器就開始調用 GPU 繪制，合成圖層，將內容顯示在屏幕上了。 這一部分就是渲染原理中講解到的內容，可以詳細的說明下這一過程。并且在下載文件時，也可以說下通過 HTTP/2 協議可以解決隊頭阻塞的問題。