今天我們?yōu)榇蠹医榻B一下web前端中涉及到的回流和重繪的概念，先來(lái)看一下官方給出的定義：

       回流（reflow）：對(duì)于DOM結(jié)構(gòu)中的各個(gè)元素都有自己的盒子模型,這些都需要瀏覽器根據(jù)各種樣式(瀏覽器的、開(kāi)發(fā)人員定義的等)來(lái)計(jì)算并根據(jù)計(jì)算結(jié)果將元素放到它該出現(xiàn)的位置，這個(gè)過(guò)程稱之為reflow ;

       重繪（repaint）：當(dāng)各種盒子的位置、大小以及其他屬性,例如顏色、字體大小等都確定下來(lái)后,瀏覽器于是便把這些元素都按照各自的特性繪制了一遍,于是頁(yè)面的內(nèi)容出現(xiàn)了，這個(gè)過(guò)程稱之為repaint。

       這是什么？我是誰(shuí)？我在哪兒？其實(shí)簡(jiǎn)單的說(shuō)：回流（reflow）就是元素的位置發(fā)生了改變（不管是添加、刪除元素，還是元素尺寸改變），會(huì)觸發(fā)回流。比如，這里有2個(gè)p標(biāo)簽，我們想在兩個(gè)p標(biāo)簽之間插入另外一個(gè)p標(biāo)簽這個(gè)時(shí)候老大還是老大，插入一個(gè)新老二之后，原來(lái)的老二變成了老三，位置發(fā)生了改變會(huì)觸發(fā)回流。那么重繪（repaint）簡(jiǎn)單的說(shuō)，元素位置不會(huì)發(fā)生改變，視覺(jué)效果會(huì)有所改變。

       元素的位置沒(méi)有發(fā)生改變，只有文字顏色做了修改，這個(gè)時(shí)候就發(fā)生了重繪。知道了回流和重繪，我們?cè)谧鲰?xiàng)目的過(guò)程中，要盡量避免，這樣可以使我們寫(xiě)出高性能的DOM。例如：我們?cè)诮o元素添加樣式修飾時(shí)，避免一條條更改

<div id="person">我是一個(gè)工具人</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>

可以將修飾放入一個(gè)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>

還有我們要循環(huán)插入很多DOM元素時(shí)，可以使用documentFragment

<script>

//創(chuàng)建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插入到頁(yè)面

document.body.appendChild(fragment)

</script>

上一篇

千鋒長(zhǎng)沙前端培訓(xùn)分享之3種Javascript圖片預(yù)加載的方法詳解

下一篇

千鋒長(zhǎng)沙前端培訓(xùn)分享之JavaScript面向?qū)ο缶幊趟枷朐斀?/span>