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

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

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

       这是什么？我是谁？我在哪儿？其实简单的说：回流（reflow）就是元素的位置发生了改变（不管是添加、删除元素，还是元素尺寸改变），会触发回流。比如，这里有2个p标签，我们想在两个p标签之间插入另外一个p标签这个时候老大还是老大，插入一个新老二之后，原来的老二变成了老三，位置发生了改变会触发回流。那么重绘（repaint）简单的说，元素位置不会发生改变，视觉效果会有所改变。

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

<div id="person">我是一个工具人</div>

<script>

var person = document.getElementById('person');

//不要逐条更改

person.style.width = 300 + 'px';

person.style.height = 200 + 'px';

person.style.backgroundColor = 'red';

person.style.fontSize = 20 + 'px';

person.style.color = 'green';

</script>

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

<style>

.person_style{

width: 300px;

height: 200px;

background-color: red;

font-size: 20px;

color: green;

}

</style>

<script>

var person = document.getElementById('person');

person.classList.add('person_style')

</script>

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

<script>

//创建DocumentFragment

var fragment = document.createDocumentFragment();

//把DOM元素添加到fragment

var oDiv = document.createElement('div');

for(let i = 0; i < 10; i++){

oDiv.innerHTML += "number:" + i + '<br>';

fragment.appendChild(oDiv)

}

//最后把fragment插入到页面

document.body.appendChild(fragment)

</script>

上一篇

千锋长沙前端培训分享之3种Javascript图片预加载的方法详解

下一篇

千锋长沙前端培训分享之JavaScript面向对象编程思想详解