防止使用transladeX重绘,但比使用背景位置的绘制效果差

我认为防止重新上漆是提高性能的好方法。 translateX 为了防止重新喷漆,每秒的帧数甚至比使用 background-position-x

这是为什么?

不重新喷漆(使用 transladeX

https://jsfiddle.net/alvarotrigo//4xafot6p/6/

https://fiddle.jshell.net/alvarotrigo/4xafot6p/6/show/ (全屏测试重新喷漆)

重新喷漆(使用 background-position )

https://jsfiddle.net/alvarotrigo/4xafot6p/6/

https://fiddle.jshell.net/alvarotrigo/4xafot6p/5/show/ (全屏测试重新喷漆)

 .demo{
    position: absolute;
    height: 256px;
    width: 256px;
    display: block;
    z-index: 999;
    display: block;
    will-change: background-position-x;
    bottom: 20px;
    overflow: hidden;
}
.demo:after{
    content: '';
    display: inline-block;
    position: absolute;
     height: 256px;
    width: 1536px;
    left: 0;
    top: 0;
    background-position: 0 0;
    transition: all 10000ms ease;
    background-image: url('https://cdn-images-1.medium.com/max/2600/1*WhDjw8GiV5o0flBXM4LXEw.png');

}
.demo.active:after {
    animation: pepe 300ms steps(5) infinite;

}

@keyframes pepe {
   from{ transform: translateX(0); }
   to{ transform: translateX(-1280px); }
}