什么是回流和重绘

　　今天我们来了解一下什么是回流和重绘，先来看一下官方定义：

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

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

　　其实简单的说：

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

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

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

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

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

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

　　回流和重绘这都是我们经常做的一些操作，快快动手试起来吧！更多关于前端培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。

　　注：本文部分文字和图片来源于网络，如有侵权，请联系删除。版权归原作者所有!