web前端网页的渲染你需要知道的东西_前端渲染过程注意事项-CSDN博客

本文链接：https://blog.csdn.net/conquer_galaxy/article/details/129977393

总的来说，最重要的是这一点：我们应该避免频繁地在js中添加重排的代码，

如：

可以一次性通过设置css代码进行重排那就用这样的办法而不是像以下这样写！

代码示例

<!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>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* display: none; */
        }

        .box2 {
            background-color: tomato;
        }

        .box3 {
            display: block;
            width: 300px;
            height: 300px;
            background-color: black;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <button id="btn">点我一下</button>
    <hr />
    <div class="box1"></div>

    <script>
        const box1 = document.querySelector(".box1")
        const btn = document.querySelector("#btn")
        btn.addEventListener("click", () => {
            // box1.classList.add("box2")
            // box1.style.width = "300px"
            // box1.style.height = "400px"
            // box1.fontSize = "20px"
            div.style.display = "block"
            box1.classList.add("box3")
        })


    </script>
</body>

</html>

简而言之：就是我们可以通过

            box1.classList.add("box3")

的方式直接通过某个css代码来进行重绘可以减少重绘的次数！！尽量减少在框架中直接操作DOM

之前讲过的Vue例子中对于通过v-show和v-if来控制组件的显示时，其实两者都是重绘，区别不在重绘，而在于以下事实：

对于v-show，其实不管v-show的值是true还是false 这两种组件都会渲染，只是false的组件的style属性的display属性被改成了none而已，所以，一开始要加载的css和html代码就相当于更多了，所以既然都已经渲染了不会再重复去渲染了所以切换速度就快了；

而对于v-if 如果是false的话，我们就不会去渲染里面的组件了，所以v-if不适合用在需要经常切换的场景，而首次加载的速度就比v-show快！

v-if 有个特性：“懒加载：用到的时候才加载”

至于什么场景用哪个更好跟重绘重排什么的是没关系的