web前端中涉及的回流和重绘详解！

今天我们为大家介绍一下web前端中涉及到的回流和重绘的概念，先来看一下官方给出的定义：

回流（reflow）：对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow ;

重绘（repaint）：当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了，这个过程称之为repaint。

其实简单的说：

回流（reflow）就是元素的位置发生了改变（不管是添加、删除元素，还是元素尺寸改变），会触发回流。比如，这里有2个p标签，我们想在两个p标签之间插入另外一个p标签

这个时候老大还是老大，插入一个新老二之后，原来的老二变成了老三，位置发生了改变会触发回流。

那么重绘（repaint）简单的说，元素位置不会发生改变，视觉效果会有所改变。

元素的位置没有发生改变，只有文字颜色做了修改，这个时候就发生了重绘。知道了回流和重绘，我们在做项目的过程中，要尽量避免，这样可以使我们写出高性能的DOM。例如：我们在给元素添加样式修饰时，避免一条条更改

可以将修饰放入一个class名中，做一次class名插入

还有我们要循环插入很多DOM元素时，可以使用documentFragment

希望本文的分享能帮到学习web前端的小伙伴们。

本文来自千锋教育，转载请注明出处。

更多相关文章