- 瀏覽器輸入url，瀏覽器主程序接管，開一個下載執行緒，然後進行 http請求（略去DNS查詢，IP定址等等操作），然後等待響應，獲取內容，隨後將內容通過RendererHost介面轉交給Renderer程序

- 瀏覽器渲染流程開始

瀏覽器器核心拿到內容後，渲染大概可以劃分成以下幾個步驟：

1. 解析html建立dom樹

2. 解析css構建render樹（將CSS程式碼解析成樹形的資料結構，然後結合DOM合併成render樹）

3. 佈局render樹（Layout/reflow），負責各元素尺寸、位置的計算

4. 繪製render樹（paint），繪製頁面畫素資訊

5. 瀏覽器會將各層的資訊傳送給GPU，GPU會將各層合成（composite），顯示在螢幕上。

所有詳細步驟都已經略去，渲染完畢後就是load事件了，之後就是自己的JS邏輯處理了

既然略去了一些詳細的步驟，那麼就提一些可能需要注意的細節把。

這裡重繪參考來源中的一張圖：（參考來源第一篇）

load事件與DOMContentLoaded事件的先後

上面提到，渲染完畢後會觸發load事件，那麼你能分清楚load事件與DOMContentLoaded事件的先後麼？

很簡單，知道它們的定義就可以了：

• 當 DOMContentLoaded 事件觸發時，僅當DOM載入完成，不包括樣式表，圖片。(譬如如果有async載入的指令碼就不一定完成)

• 當 onload 事件觸發時，頁面上所有的DOM，樣式表，指令碼，圖片都已經載入完成了。（渲染完畢了）

所以，順序是：DOMContentLoaded -> load