减少回流重绘并提高 css 性能答案

【问题标题】：Reduce reflow repaint and improve css performance减少回流重绘并提高 css 性能
【发布时间】：2021-09-17 15:31:59
【问题描述】：

<!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>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            will-change: contents;
        }

        * {
            box-sizing: border-box;
        }

        .center {
            position: absolute;
            /* margin: auto; */
            width: 300px;
            height: 300px;
            /* top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px; */
            outline: orangered 2px solid;
            pointer-events: none;
        }

        .block {
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            pointer-events: none;
        }

        .innerBlock {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            pointer-events: none;
        }

        @keyframes drawC {
            0% {
                /* left: 0px;
                top: 0px; */
                transform: translateX(0px) translateY(0px);
            }

            25% {
                /* left: calc(100% - 100px);
                top: 0px; */
                transform: translateX(100px) translateY(0px);
            }

            50% {
                /* left: calc(100% - 100px);
                top: calc(100% - 100px); */
                transform: translateX(100px) translateY(calc(100px));
            }

            75% {
                /* left: 0px;
                top: calc(100% - 100px); */
                transform: translateX(0px) translateY(100px);
            }

            100% {
                /* left: 0px;
                top: 0px; */
                transform: translateX(0px) translateY(0px);
            }
        }

        @keyframes drawB {
            0% {
                /* left: 0px;
                top: 0px; */
                transform: translateX(0px) translateY(0px);
            }

            25% {
                /* left: calc(100% - 200px);
                top: 0px; */
                transform: translateX(100px) translateY(0px);
            }

            50% {
                /* left: calc(100% - 200px);
                top: calc(100% - 200px); */
                transform: translateX(100px) translateY(calc(100px));
            }

            75% {
                /* left: 0px;
                top: calc(100% - 200px); */
                transform: translateX(0px) translateY(100px);
            }

            100% {
                /* left: 0px;
                top: 0px; */
                transform: translateX(0px) translateY(0px);
            }
        }

        @keyframes draw {
            0% {
                /* left: 0px;
                top: 0px; */
                transform: translateX(0px) translateY(0px);
            }

            25% {
                /* left: calc(100% - 300px);
                top: 0px; */
                transform: translateX(calc(100vw - 300px)) translateY(0px);
            }

            50% {
                /* left: calc(100% - 300px);
                top: calc(100% - 300px); */
                transform: translateX(calc(100vw - 300px)) translateY(calc(100vh - 300px));
            }

            75% {
                /* left: 0px;
                top: calc(100% - 300px); */
                transform: translateX(0px) translateY(calc(100vh - 300px));
            }

            100% {
                /* left: 0px;
                top: 0px; */
                transform: translateX(0px) translateY(0px);
            }
        }
    </style>
</head>

<body>
</body>

</html>
<script>
    const ele = document.body
    const draw = (time) => {
        const template = document.createElement("template");
        template.innerHTML = `<div class="center" style="animation: draw ${time}s linear infinite">
            <div class="block " style="animation: drawB ${time/5}s linear infinite">
                <div class="innerBlock" style="animation: drawC ${time/10}s linear infinite">contained</div>
            </div>
        </div>`
        return template.content.firstChild;
    }
    let time = 10;
    const fragment = document.createDocumentFragment();
    while (++time < 500) {
        fragment.appendChild(draw(time));
    }
    ele.appendChild(fragment);
</script>

大家好，我在尝试优化以下页面时遇到了一些问题，以下是问题：

为什么 chrome 的油漆闪烁会覆盖所有元素而不是每个元素：一开始

然后变成这样：中间有个洞

2. 任何元素上的鼠标事件都会导致帧率下降（轻微），如何优化；

在这种情况下应该使用 will-change/contain 吗？如果是，如何？因为将它们添加到 div.center 时我找不到任何好处。如果没有，什么时候？
有进一步优化的想法吗？我发现风格回顾在性能监视器中仍然很大

【问题讨论】：

嘿，欢迎来到 Stackoverflow！请尽量避免在同一个帖子中提出多个问题，而是使用最少的可重复示例创建单独的帖子。

标签： html css frontend web-frontend

【解决方案1】：

也许我找到了一些答案：

因为我将 will-change 添加到 body/html
这是由 devTool 引起的
will-change 可能会导致更多的回流/更少的绘画，所以使用它不是一个好主意，但我仍然不知道为什么
只使用transform，没有will-change/contain，性能记录显示绘制和渲染时间为0

【讨论】：