重绘重排重绘重排重排: reflow 修改元素大小或位置会引起reflow reflow的本质是重新构建布局树 ref

graph TD
dom树 --> 样式树
cssos树 --> 样式树
样式树 --> 布局树
重排在这里发生 --> 布局树
布局树 --> 分层
分层 --> 绘制
重绘在这里发生 --> 绘制

重排: reflow

修改元素大小或位置会引起reflow
reflow的本质是重新构建布局树
reflow 一定会导致 repaint

重绘: repaint

改变了字体颜色
改变了背景颜色

为什么transform效率高

transform 的处理不在 渲染主线程上
transform 的处理在 合成线程上
transform 不会引起重绘重排
就算js卡死,也不会影响到 transform
因为js的执行在渲染主线程上, transform 的执行在 合成线程上互不影响

<!DOCTYPE html>
<html>
    <style>
        .ball {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
        }
        .b1 {
            animation: b1 1s alternate infinite;
        }
        .b2 {
            animation: b2 1s alternate infinite;
            position: fixed;
            left: 0;
        }
        @keyframes b1 {
            to {
                transform: translate(100px)
            }
        }
        @keyframes b2 {
            to {
                left: 100px
            }
        }
    </style>


    <body>
        <button onclick="sleep()" >卡死</butto>
        <p class="ball b1"></p>
        <p class="ball b2"></p>
    </body>
</html>

<script>
function sleep(time=3000) {
    const start = getTime()
    while(getTime() - start < time) {}
    console.log('week up!!!')
}

function getTime() {
	return new Date().getTime()
}
</script>