一文讲解回流和重绘

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

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

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

一文讲解回流和重绘

      其实简单的说:

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

一文讲解回流和重绘

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

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

一文讲解回流和重绘

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

一文讲解回流和重绘

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

一文讲解回流和重绘

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

一文讲解回流和重绘

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


上一篇:web前端中涉及的回流和重绘详解!


下一篇:【前端词典】几个有益的 CSS 小知识