其他分享
首页 > 其他分享> > 一文讲解回流和重绘

一文讲解回流和重绘

作者:互联网

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

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

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

1

      其实简单的说:

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

2

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

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

4

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

5

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

6

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

7

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


标签:repaint,一文,DOM,元素,讲解,回流,重绘,reflow
来源: https://blog.51cto.com/15128693/2678947