重繪:當元素樣式的改變不影響布局時,瀏覽器會使用重繪的方式來更新元素的變化,這種改變只會在ui層的重新畫素繪製,這種方式的對瀏覽器開銷比較小。
常見的重繪操作有:
改變元素顏色
改變元素背景色
more …
回流:又名「重排」,當元素的尺寸、結構或者觸發了某個屬性的改變,會導致瀏覽器重新渲染,這種操作會造成回流。由於回流會導致瀏覽器重新計算,然後在重新渲染布局,這種操作對瀏覽器的開銷很大。
常見的回流操作有:
頁面初次渲染
瀏覽器視窗大小改變
元素尺寸/位置/內容發生改變
元素字型大小變化
新增或者刪除可見的 dom 元素
啟用 css 偽類(:hover……)
more ……
瀏覽器的回流和重繪
重繪 比如 background color font size 等,這些屬性的改變不會影響頁面的結構布局,只會影響內容的變化,即這些屬性的改變將會引起瀏覽器的重繪 回流 比如 padding margin height 等,改變這些屬性會影響頁面的結構布局,即改變這些屬性會引起瀏覽器的回流 為什麼...
瀏覽器的重繪和回流
我的部落格 這是我在之前面試中遇到的乙個問題,今天回想起來正好做乙個總結 這其實也是我遇到的一道面試題,與重繪和回流息息相關 使用者輸入 瀏覽器嘗試與伺服器建立連線 伺服器傳送永久重定向 瀏覽器跟蹤重定向位址 伺服器處理請求 伺服器傳送html響應 瀏覽器接收響應,開始解析 解析html檔案,處理並...
瀏覽器的回流和重繪
1 瀏覽器把獲取到的html 會解析成乙個dom樹,html中的每乙個元素都是dom樹的乙個節點,根節點也就是我們長用的document物件 2 當渲染樹中的一部分或者全部因為元素的尺寸 布局 隱藏等改變而需要重新構建的時候,這時候就會發生回流。每個頁面都至少發生一次回流,也就是頁面第一次載入的時候...