-
描述:
重绘:页面中元素发生可见性变化(比如颜色等),导致页面重新渲染的现象称为重绘。
回流(重排):页面中元素发生位置和尺寸的变化,导致部分页面回整个页面重新加载的现象称为回流(重排)。
-
说明:
(1) 回流(重排)必将引起重绘,但重绘不一定会引起回流(重排)。
(2) 这两个现象都是浏览器加载页面是可能导致加载变慢的问题,就要尽可能避免。
-
减少回流和重绘的途径
描述:因为页面中各种操作基本都会引发回流和重绘,因此完全避免是不可能的。所以为了提高浏览器的性能,我们要尽可能的减少引发回流和重绘的状况。
途径:
-
不要一项一项的去改变样式,尽可能一次性写完(可以写在一起,不要被打断就行),最好使用.style、.style.cssText、className或者classList
-
读写dom尽量放在一起
-
当大量读写操作无法避免的时候,可以使用文档碎片节点documentFragment来解决
-
使用fixed和absoluted能够减少回流和重绘
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<span>123</span>
</body>
<script>
let div = document.querySelector('div');
let span = document.querySelector('span');
div.onclick = function () {
//创建一个文档碎片,充当这些创建元素的临时容器。
let suipian = document.createDocumentFragment();
let h2_1 = document.createElement('h2');
h2_1.innerHTML = '第1个h2';
suipian.appendChild(h2_1);
let h2_2 = document.createElement('h2');
h2_2.innerHTML = '第2个h2';
suipian.appendChild(h2_2);
let h2_3 = document.createElement('h2');
h2_3.innerHTML = '第3个h2';
suipian.appendChild(h2_3);
let h2_4 = document.createElement('h2');
h2_4.innerHTML = '第4个h2';
suipian.appendChild(h2_4);
//一次性将碎片中的内容添加到页面上,只引发一次回流
document.body.appendChild(suipian);
};
</script>
</html>