瀏覽器渲染的流程
瀏覽器渲染的流程
Sep 4, 2021
- 瀏覽器載入 HTML、CSS 後，會先將 HTML 轉換成 DOM (文件物件模型);會將 CSS 轉換成 CSSOM，也就是意味著這時候的瀏覽器會開放給程式語言操作的介面，
- 載入到 JavaScript 程式碼，方可利用 JavaScript 去修改 DOM，
- 修改後 DOM 和 CSSOM 合併為 Render Tree
- 經過計算產生 layout
- 最終把 layout 繪製成像素。
Q：在 HTML 檔案中使用 <script> 標籤載入 JavaScript 檔案時，把 <script> 標籤放在 <body> 的最底部 (也就是 </body> 前)會在什麼時機點載入到 JavaScript 程式碼？為什麼需要這樣做？
載入 JavaScript 的時機點會在於產生 HTML、CSS解析產生 DOM 之後、合併成 Render Tree 之前。
把<script> 標籤放在 <body> 的最底部的好處就在於可以提升瀏覽器的效能，瀏覽器載入 JavaScript 是利用 <script> 標籤，當瀏覽器在解析 DOM 的過程中遇到 <script> 標籤時，瀏覽器會先放下解析 HTML 的工作暫停頁面渲染，先執行 <script> 裡面的 JavaScript，執行完再回頭解析 DOM 繼續畫面渲染，如此一來會造成載入的時間過長且可能因 DOM還沒完全生成，造成不佳的使用體驗。
因此把<script> 標籤放在 <body> ，就是確保讓 DOM 全部解析完成後，再載入 JavaScript 去調整畫面，以解決頁面載入阻塞的問題。
