瀏覽器的回流和重繪

2022-07-24 07:33:10 字數 533 閱讀 7875

1、瀏覽器把獲取到的html**會解析成乙個dom樹,html中的每乙個元素都是dom樹的乙個節點,根節點也就是我們長用的document物件

2、當渲染樹中的一部分或者全部因為元素的尺寸、布局、隱藏等改變而需要重新構建的時候,這時候就會發生回流。每個頁面都至少發生一次回流,也就是頁面第一次載入的時候。在回流的時候,瀏覽器會使渲染樹中受到影響的元素部分失效,並重新繪製這個部分的渲染樹,完成回流以後,瀏覽器會重新繪製受到影響的部分元素到螢幕中,這個過程就是重繪

3、當渲染樹中的一些元素需要一些更新屬性的時候,而這些屬性只會影響外觀、風格、而不影響布局的就成為重繪

從以上的概念中可以得知:回流必定發生重繪。但是重繪不一定引起回流

簡單的說回流會導致頁面的重排,這樣會嚴重影響效能

什麼時候會發生回流?

1、新增或者刪除可見的dom元素的時候

2、元素的位置發生改變

3、元素尺寸改變

4、內容改變

5、頁面第一次渲染的時候

單例模式:保證系統中,使用該模式的類只有乙個例項

瀏覽器的重繪和回流

重繪 當元素樣式的改變不影響布局時,瀏覽器會使用重繪的方式來更新元素的變化,這種改變只會在ui層的重新畫素繪製,這種方式的對瀏覽器開銷比較小。常見的重繪操作有 改變元素顏色 改變元素背景色 more 回流 又名 重排 當元素的尺寸 結構或者觸發了某個屬性的改變,會導致瀏覽器重新渲染,這種操作會造成回...

瀏覽器的回流和重繪

重繪 比如 background color font size 等,這些屬性的改變不會影響頁面的結構布局,只會影響內容的變化,即這些屬性的改變將會引起瀏覽器的重繪 回流 比如 padding margin height 等,改變這些屬性會影響頁面的結構布局,即改變這些屬性會引起瀏覽器的回流 為什麼...

瀏覽器的重繪和回流

我的部落格 這是我在之前面試中遇到的乙個問題,今天回想起來正好做乙個總結 這其實也是我遇到的一道面試題,與重繪和回流息息相關 使用者輸入 瀏覽器嘗試與伺服器建立連線 伺服器傳送永久重定向 瀏覽器跟蹤重定向位址 伺服器處理請求 伺服器傳送html響應 瀏覽器接收響應,開始解析 解析html檔案,處理並...