回流与重绘

最新推荐文章于 2025-06-11 08:40:28 发布

picoasis

最新推荐文章于 2025-06-11 08:40:28 发布

阅读量591

点赞数 1

分类专栏：前端

前端专栏收录该内容

33 篇文章

订阅专栏

 
 转载地址：高性能WEB开发-页面呈现、重绘、回流

 
 参考文献：记一次网易前端实习面试
  
 页面呈现流程：

(HTMLSource->DOMTree)+(CSSSource->样式结构体)==>renderTree（呈现树）==>绘制页面

 
 回流： 

 
 render tree中的一部分因元素的属性（尺寸，布局，隐藏等）改变而需要重新构建布局。每个页面至少需要一次回流，在页面第一次加载的时候。

 
 重绘： 

 
 render tree中的一些元素需要跟新属性，这些属性只影响外观、风格，不影响布局的（如color，backgroundcolor）。

 
 即回流一定会重绘，但重绘不一定回流。

 
 如何触发 
 引起回流与重绘的操作： 

 style变动造成repaint和reflow。不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。

 1.隐藏元素：display：none（回流+重绘）display：hidden(只重绘)

 2.添加/删除元素（回流+重绘）。

 3.移动元素。

 4.对style操作。

 5.用户的操作，如改变浏览器大小，字体大小。

 
 触发repaint：

 
 1
  
 color
 的修改，如
 color
 =#ddd；

 
 2
  
 text
 -
 align
 的修改，如
 text
 -
 align
 =center；

 
 3
  a:hover也会造成重绘。

 
 4
  :hover引起的颜色等不导致页面回流的style变动。

 
 触发reflow：

 
 1
  width/height/border/margin/padding的修改，如width=
 778
 px；

 
 2
  动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；

 
 3
  appendChild等DOM元素操作；

 
 4
  font类style的修改；

 
 5
  background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；

 
 6
  scroll页面，这个不可避免；

 
 7
  resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。

 
 8
  读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/
 Left
 /Width/Height、clientTop/
 Left
 /Width/Height、getComputedStyle()、currentStyle(
 in
  IE))；

 
 如何避免： 
  
 浏览器优化策略

 
 针对多次回流与重绘，浏览器会维护一个flush队列，所有引起回流与重绘的操作放在其中。当队列中的操作数到达一定数量/一定间隔，浏览器将此队列进行批处理，让多次回流流与重绘变成一次回流重绘。

 
 减少回流与重绘 
 即减少对renderTree的操作，减少对style信息的请求，多利用浏览器优化策略。

 具体例子：

 
  尽可能在DOM末梢通过改变class来修改元素的style属性：尽可能的减少受影响的DOM元素。
避免设置多项内联样式：使用常用的class的方式进行设置样式，以避免设置样式时访问DOM的低效率。
设置动画元素position属性为fixed或者absolute：由于当前元素从DOM流中独立出来，因此受影响的只有当前元素，元素repaint。
牺牲平滑度满足性能：动画精度太强，会造成更多次的repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。
避免使用table进行布局：table的每个元素的大小以及内容的改动，都会导致整个table进行重新计算，造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow。
避免在CSS中使用运算式：学习CSS的时候就知道，这个应该避免，不应该加深到这一层再去了解，因为这个的后果确实非常严重，一旦存在动画性的repaint/reflow，那么每一帧动画都会进行计算，性能消耗不容小觑。
 
总结：

 
 1.不一个一个改变元素的样式属性，最好直接改变className，但className是预先定义好的样式，不是动态的。当需要动态改变一些样式，使用cssText。

// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top  = top  + "px";

// 比较好的写法 
el.className += " className1";

// 比较好的写法 
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

-------------------------------------------

tips:

 
 转载地址：CSSText（整体网站性能）
 

 
 转载地址：CSSTEXT的用法（具体使用）
 

cssText 本质是什么？cssText 的本质就是设置 HTML 元素的 style 属性值。

cssText 怎么用？

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

cssText 返回值是什么？

在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号，比如：

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";
alert(document.getElementById("d1").style.cssText);//IE 中值为：FONT-SIZE: 13px; COLOR: red

cssText的使用优势：

一般情况下我们用js设置元素对象的样式会使用这样的形式：

var element= document.getElementById(“id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;

样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。

js中有一个cssText的方法：

语法为：

obj.style.cssText=”样式”;
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;

这样就可以尽量避免页面reflow，提高页面性能。

但是，这样会有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
为了解决这个问题，可以采用cssText累加的方法：

Element.style.cssText += ‘width:100px;height:100px;top:100px;left:100px;’

因此，上面cssText累加的方法在IE中是无效的。

最后，可以在前面添加一个分号来解决这个问题：

Element.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’

再进一步，如果前面有样式表文件写着 div { text-decoration:underline; }，这个会被覆盖吗？不会！因为它不是直接作用于 HTML 元素的 style 属性。

-----------------------------------

2. 让要操作的元素进行"离线处理"，处理完后一起更新，这里所谓的"离线处理"即让元素不存在于render tree中，比如：

a) 使用documentFragment或div等元素进行缓存操作，这个主要用于添加元素的时候，大家应该都用过，就是先把所有要添加到元素添加到1个div(这个div也是新加的)，最后才把这个div append到body中。

b) 先display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。所以只要操作只会有2次回流。

3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，就先读取到变量中进行缓存，以后用的时候直接读取变量就可以了，见下面代码：

// 别这样写，大哥
for(循环) {
    el.style.left = el.offsetLeft + 5 + "px";
    el.style.top  = el.offsetTop  + 5 + "px";
}

// 这样写好点
var left = el.offsetLeft,top  = el.offsetTop,s = el.style;
for(循环) {
    left += 10;
    top  += 10;
    s.left = left + "px";
    s.top  = top  + "px";
}

4. 考虑你的操作会影响到render tree中的多少节点以及影响的方式，影响越多，花费肯定就越多。比如现在很多人使用jquery的animate方法移动元素来展示一些动画效果，想想下面2种移动的方法：

// block1是position:absolute 定位的元素，它移动会影响到它父元素下的所有子元素。
// 因为在它移动过程中，所有子元素需要判断block1的z-index是否在自己的上面，
// 如果是在自己的上面,则需要重绘,这里不会引起回流
$("#block1").animate({left:50});
// block2是相对定位的元素,这个影响的元素与block1一样，但是因为block2非绝对定位
// 而且改变的是marginLeft属性，所以这里每次改变不但会影响重绘，
// 还会引起父元素及其下元素的回流
$("#block2").animate({marginLeft:50});