瀏覽器的渲染流程

接下來會依照AC的期末考逐題來寫文章(中間可能會插播一些有的沒的XD)，也當作給自己一個複習。

廢話不多說，上圖先。

瀏覽器的渲染流程

輸入網址按下enter之後，瀏覽器會開始解讀HTML跟CSS的檔案，隨後生成HTML跟CSS的物件模型DOM跟CSSOM，而JavaScript就是在這個時候可以介入操作物件模型。最後DOM跟CSSOM會合併變成Render Tree，再來去計算每個元素該擺放的位置也就是Layout，最後畫出畫面呈現網頁給我們看。

以上就是瀏覽器渲染的流程，接下來來一些名詞解釋～

甚麼是DOM(文件物件模型)？
瀏覽器百花齊放，如果沒有一套統一的規則去編譯網頁，會讓開發人員光是寫個要適應各瀏覽器的HTML就會很QQ，所以W3C訂定了一個可以處理標示語言(ex.HTML)的一個標準介面，就叫做DOM。

瀏覽器開始編譯HTML時會把每個標籤都定義成物件，產生一個樹狀結構(如下圖)，就可以讓JavaScript來操作物件了！而JavaScript只會去操作DOM去動態產生網頁的內容，並不會動到CSSOM，因為網頁的樣式一開始就已經是固定的了，我們不會需要透過JavaScript再去修改CSS的規則。

圖片來源：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-tw

講完了流程，接下來還有一件重要的事情，就是順序！

要在HTML裡面載入JavaScript檔案時，通常會用<script>標籤載入，並放在body的最底部也就是body結束標籤</body>的前面，這是為甚麼呢？

因為必須先等瀏覽器解析完HTML檔案並生成DOM tree之後才能載入JavaScript，這樣JavaScript才會有物件模型可以操作。

如果要提高載入效能，可以對script標籤再額外多做一些其他處理，這待到下一篇文章再多做說明～今天就先到這邊，謝謝各位的觀看，如有錯誤的地方請不吝指教，謝謝！:)