html - css 属性“会改变”会降低性能吗？

问题描述

在 MDN 中它说：
will-change 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>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        * {
            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;
            will-change: transform;
        }

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

        .innerBlock {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            pointer-events: none;
            will-change: top, left;
        }

        @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>
标签： htmlcss
html - css 属性“会改变”会降低性能吗？

问题描述

解决方案

推荐阅读
