枫祺玥的小客栈

content-visibility

作用

为元素设置 CSS 属性content-visibility: auto;，可以跳过屏幕外内容的渲染，减少页面渲染时间。
它允许我们推迟我们选择的HTML元素渲染

.box{
    content-visibility: auto;
}

风险

content-visibility会将分配给它的元素的高度（height）视为0，此时浏览器无法正确计算页面高度，滚动将是一场噩梦。
如果你的元素没有显式的设置高度，可以使用contain-intrinsic-size来确保元素的正确渲染,同时也保留延迟渲染的好处。

.box{
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

will-change

除了使用transform这样的Hack手段来开启GPU加速;will-change也是一个好的优化手段