web前端技巧|一文讲解回流和重绘

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

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

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

      其实简单的说：

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

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

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

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

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

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

      最后想学习web前端的同学，可以参考千锋web前端培训班提供的web前端学习路线，该学习路线对从零基础小白到web前端初级开发工程师，web前端高级开发工程师，后面的web前端大神级开发工程师都有一个明确清晰的指导，根据千锋web前端培训机构提供的web前端学习路线图可以让你对学习web前端开发需要掌握的知识有个清晰的了解，并快速入门web前端开发。想要获取前端完整学习路线和免费的学习资料可以添加我们的web前端技术分享交流qq群：857920838  加群找群管理领取即可，等你来哦~~