瀏覽器渲染頁面流程

2022-08-01 09:30:15 字數 590 閱讀 8447

解析html文字,構建dom tree, 同時進行第3步。

歇息css樣式表,構建cssom tree

根據dom tree和 cssom tree 構建render tree

根據render tree來進行布局處理(layout)

將頁面元素進行繪製(painting)

如果將css檔案放在底部,render tree在之前就已經構建完了,因此使用者可能會看到無樣式的頁面,或者閃屏。

css: css被視為阻塞渲染的資源,也很好理解,要不然怎麼構建render tree, 怎麼進行布局處理呀~~ 因此瀏覽器會等待cssom tree構建完畢,當瀏覽器遇到標籤時候,會有限處理這些css資源。直至cssom構建完畢。

js: script標籤會阻塞html解析,因為js可能會改變dom和css,因此瀏覽器會先解析script,避免浪費。 要想避免阻塞的話,可使用defer 和 async。

repaint: 發生在螢幕的一部分要重新畫,比如背景顏色,布局沒有改變!,瀏覽器只需要走第五步。

reflow: 布局發生了改變!瀏覽器需要重新從layout這一步開始,因為render tree已經變了。多走一步,顯然更加耗費效能啦~~

瀏覽器頁面渲染流程

渲染流水線中css和js的載入 相關概念 html css js資料通過渲染模組的處理最終輸出為螢幕上的畫素 渲染模組被劃分為很多子階段,輸入的資料通過這些子階段最後輸出畫素,這樣的乙個處理流程叫做渲染流水線 注意 每個子階段都有其輸入內容 處理過程和輸出內容 因為瀏覽器無法直接理解和使用html,...

瀏覽器渲染頁面的流程

瀏覽器渲染頁面的流程 1 根據html檔案構建dom樹和cssom樹。構建dom樹期間,如果遇到js,阻塞dom樹及cssom樹的構建,優先載入js檔案,載入完畢,再繼續構建dom樹及cssom樹。2 構建渲染樹 render tree 3 頁面的重繪 repaint 與重排 reflow,也有稱回...

瀏覽器渲染頁面的流程

不同瀏覽器有不同的渲染引擎,比如firefox使用gecko,而safari和chrome使用webkit 解析html生成dom樹 在生成dom樹的過程中會被css和js的載入執行阻塞,也就是渲染阻塞解析css生成cssom規則樹 對於外部css檔案,每個css檔案都會被解析成stylesheet...