回流(重排)和重绘

描述：

重绘：页面中元素发生可见性变化(比如颜色等)，导致页面重新渲染的现象称为重绘。

回流(重排)：页面中元素发生位置和尺寸的变化，导致部分页面回整个页面重新加载的现象称为回流(重排)。
说明：

(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>

回流(重排)和重绘

猜你喜欢