前言
2020 秋天，我將用 30 天的時間，來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識，有些問題可能對有些讀者來說相對簡單，不過期待這趟旅程，能幫助自己、也幫助讀者打開不同的知識大門。有興趣的話，跟著我一起探索吧！
昨天我們看完了 HTTP request 和 response 的內容，接下來，就要來看看瀏覽器是怎麼將 HTTP response body 當中的內容，轉換成我們看到的網頁畫面！
在 Chrome browser process 當中的 network thread 完成連線，並收到 HTTP response 之後，若確認內容為 HTTP 文件，接下來，就會將任務交給 Chrome 當中的 render process 來處理畫面的呈現，render process 也會開始下載相關資源。
第一步，會將 HTML 轉換成 DOM (Document Object Model)。DOM 是瀏覽器所產生出來的資料結構，一方面表現出 HTML 的內容與架構，另一方面讓開發者有機會使用 JavaScript 透過 DOM 來操作頁面。
除了 HTML 文件本身之外，通常 HTML 文件也會同時載入其他資源，像是 CSS 或是 JavaScript。為了加速載入的時間，瀏覽器在載入 HTML 的時候，同步執行 "preload runner"，如果有看到 <img> 或是 <link> 等需要載入資源，就會提早送出請求並開始載入。
不過 <script> 的狀況就不太一樣。在載入 HTML 的過程中，如果看到 <script> 的話，會先暫停 HTML 的載入，然後開始下載並執行 <script> 當中的內容，原因是 <script> 裡面的內容可能會影響到 DOM tree 的內容，所以如果「載入 HTML」和 「執行 script (JavaScript)」同時發生的話，就有可能產生錯誤。
也因此，<script> 在 HTML 文件中出現的位置，就相當的重要。除了可以透過調整 <script> 的位置來控制載入和執行的時間點之外，也可以透過 defer 和 async 屬性來調整其載入和執行的時間點。關於 defer 和 async 的細節，可以參考 前端三十｜02. [HTML] script tag 加上 async & defer 的功能及差異？ 這篇文章的說明。
把 HTML 轉換成 DOM tree 之後，接下來，就要加入 CSS style 讓畫面不只有內容，而是更加美觀。我們會在 CSS 文件當中，透過許多的 "selectors" 來選擇並定義 HTML/DOM 當中元素的樣式，所以要能夠在最後準確呈現我們想要的內容，瀏覽器就需要去 根據 CSS 文件上的內容，"計算" 這些樣式，並放到對應的 DOM 元素上。
在這個過程中，瀏覽器會產生出一個另外一個資料結構，叫做 CSSOM (CSS Object Model)
接下來，瀏覽器會將 DOM tree 和 CSSOM tree 整合在一起，變成 Render tree。如果在載入 CSS 文件時遇到問題或是延緩，就會影響到後續畫面的呈現，因為瀏覽器不會在完成 Render tree 之前，就呈現畫面。
完成 Render tree 後，事情還沒有結束，這時候我們只是先把材料準備好而已。之後，瀏覽器才要正式的在畫面上畫出東西。這裡就讓我們在下一篇文章中來看看。
如果想要看到網頁開啟時載入了哪些資源，可以打開 Chrome DevTool 當中的 Source 標籤，看到載入的文件；可以在 Network 標籤當中，看到不同時間點資源的載入。另外，也可以在 Elments 標籤當中的 Computed (在 Styles 右邊) ，看到某個元素最後計算出來的 CSS 樣式的完整內容。
今天就先到這邊，我們明天見啦！
TD
Be curious as astronomer, think as physicist, hack as engineer, fight as baseball player"Life is like riding a bicycle. To keep your balance, you must keep moving."
iThome鐵人賽
看影片追技術