網頁的重排 reflow 與重繪 repaint

2021-07-10 00:21:55 字數 477 閱讀 2466

當頁面布局和幾何屬性改變時就會發生」重排「。下述情況中會傳送重排:

由於每次重排都會產生計算消耗,大多數瀏覽器通過佇列化修改並批量執行來優化重排過程。獲取布局資訊的操作會導致佇列重新整理:

offsettop offsetleft offsetwidth offsetheight

scrolltop scrollleft scrollwidth scrollheight

clienttop clientleft clientwidth clientheight

getcomputedstytle (currentstylke in ie)

以上屬性和方法需要返回最新的布局資訊,因此瀏覽器不得不執行渲染佇列中的」待處理變化「並觸發重排以返回正確值。

在修改樣式的過程中,最好避免使用以上列出的屬性。因為它們都會重新整理渲染佇列,即使你是在獲取最近未發生改變的或者與最新改變無關的布局資訊。

重排(reflow) 重繪(repaint)

重排 重構 回流 reflow 當渲染樹中的一部分 或全部 因為元素的規模尺寸,布局,隱藏顯示等改變而需要重新構建,這就稱為回流 reflow 每個頁面至少需要一次回流,就是在頁面第一次載入的時候。重繪 repaint 當盒子的位置 大小以及其他屬性,例如顏色 字型大小等都確定下來之後,瀏覽器便把這...

重排 reflow 和重繪 repaint

什麼是重排 引起dom樹重新計算的行為。什麼時候會發生重排 新增或刪除可見的dom元素 元素的位置改變 元素的尺寸大小改變 元素的內容改變 頁面渲染初始化 瀏覽器視窗尺寸改變 什麼是重繪 元素可見的外觀被改變,但並沒有影響到布局 什麼時候會發生重繪 dom元素的字型顏色 改變visibility o...

重繪與重排

重繪就是重新繪製 repaint 重排就是重新排列 reflow dom發生改變的時候觸發重排,使dom重新排列,重繪不一定會重排,但是重排一定發生重繪,重繪和重排都會耗費瀏覽器的效能,盡量避免解析html繪製dom樹 解析css繪製css樹 生成render tree 渲染樹 flow排列,將渲染...