# [IM018] How browser works (5) - Create DOM tree

> **前言**
> 2020 秋天，我將用 30 天的時間，來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識，有些問題可能對有些讀者來說相對簡單，不過期待這趟旅程，能幫助自己、也幫助讀者打開不同的知識大門。有興趣的話，跟著我一起探索吧！


## Render process

昨天我們看完了 HTTP request 和 response 的內容，接下來，就要來看看瀏覽器是怎麼將 HTTP response body 當中的內容，轉換成我們看到的網頁畫面！

在 Chrome browser process 當中的 network thread 完成連線，並收到 HTTP response 之後，若確認內容為 HTTP 文件，接下來，就會將任務交給 Chrome 當中的 render process 來處理畫面的呈現，render process 也會開始下載相關資源。

## Create DOM tree

第一步，會將 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 的功能及差異？](https://medium.com/schaoss-blog/02-html-script-tag-%E5%8A%A0%E4%B8%8A-async-defer-%E7%9A%84%E5%8A%9F%E8%83%BD%E5%8F%8A%E5%B7%AE%E7%95%B0-8205fddbbafc) 這篇文章的說明。

## Computing style

把 HTML 轉換成 DOM tree 之後，接下來，就要加入 CSS style 讓畫面不只有內容，而是更加美觀。我們會在 CSS 文件當中，透過許多的 "selectors" 來選擇並定義 HTML/DOM 當中元素的樣式，所以要能夠在最後準確呈現我們想要的內容，瀏覽器就需要去 根據 CSS 文件上的內容，"計算" 這些樣式，並放到對應的 DOM 元素上。

在這個過程中，瀏覽器會產生出一個另外一個資料結構，叫做 CSSOM (CSS Object Model)


接下來，瀏覽器會將 DOM tree 和 CSSOM tree 整合在一起，變成 Render tree。如果在載入 CSS 文件時遇到問題或是延緩，就會影響到後續畫面的呈現，因為瀏覽器不會在完成 Render tree 之前，就呈現畫面。

## End

完成 Render tree 後，事情還沒有結束，這時候我們只是先把材料準備好而已。之後，瀏覽器才要正式的在畫面上畫出東西。這裡就讓我們在下一篇文章中來看看。

如果想要看到網頁開啟時載入了哪些資源，可以打開 Chrome DevTool 當中的 `Source` 標籤，看到載入的文件；可以在 `Network` 標籤當中，看到不同時間點資源的載入。另外，也可以在 `Elments` 標籤當中的 `Computed` (在 `Styles` 右邊) ，看到某個元素最後計算出來的 CSS 樣式的完整內容。

今天就先到這邊，我們明天見啦！

## Ref
* [前端三十｜30. [WEB] 從輸入網址列到渲染畫面，過程經歷了什麼事情？](https://medium.com/schaoss-blog/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%8D%81-30-web-%E5%BE%9E%E8%BC%B8%E5%85%A5%E7%B6%B2%E5%9D%80%E5%88%97%E5%88%B0%E6%B8%B2%E6%9F%93%E7%95%AB%E9%9D%A2-%E9%81%8E%E7%A8%8B%E7%B6%93%E6%AD%B7%E4%BA%86%E4%BB%80%E9%BA%BC%E4%BA%8B%E6%83%85-49341bcf6aff)
* [前端三十｜05. [CSS] 元素選取器是如何運作的？](https://medium.com/schaoss-blog/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%8D%81-05-css-%E5%85%83%E7%B4%A0%E9%81%B8%E5%8F%96%E5%99%A8%E6%98%AF%E5%A6%82%E4%BD%95%E9%81%8B%E4%BD%9C%E7%9A%84-4fe719c26be)
* [前端三十｜02. [HTML] script tag 加上 async & defer 的功能及差異？](https://medium.com/schaoss-blog/02-html-script-tag-%E5%8A%A0%E4%B8%8A-async-defer-%E7%9A%84%E5%8A%9F%E8%83%BD%E5%8F%8A%E5%B7%AE%E7%95%B0-8205fddbbafc)
* [Inside look at modern web browser (part 3)](https://developers.google.com/web/updates/2018/09/inside-browser-part3)
* [Render-tree Construction, Layout, and Paint](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)

***
> **TD**
> Be curious as astronomer, think as physicist, hack as engineer, fight as baseball player
>
> [More about me](https://tsungtingdu.github.io/profile/)
>
> *"Life is like riding a bicycle. To keep your balance, you must keep moving."*

***

###### tags: `ironman` `javascript`