使用非常大的背景位置偏移是否存在性能问题？

问题描述

我正在建立一个进度条控件，我正在研究它实际上并没有显示进度的情况，而只是旋转指示正在发生的事情。我的设计基本上是交替的斜条纹，基本上是这样的理发杆，但是旋转：

I'm building a progress bar control, and I'm working on the case where it doesn't actually show progress, but just spinning indicator of "something is happening". The design I have for it is basically alternating diagonal stripes, essentially a barber pole kinda like this, but "spinning":

希望尽可能多地卸载渲染引擎，我想为此使用CSS过渡。 支持旧浏览器对我来说不是一个问题。

With the hopes of offloading as much as I can to the rendering engine, I want to use CSS transitions for this. Supporting old browsers is not a concern for me.

所以，我的第一个想法是基本上这样做：

So, my first idea was to basically do this:

.barber-pole {
    background-image: url(repeating-slice.png);

    /* set a very long (one hour!) transition on the background-position */
    transition: background-position 3600s linear 0s;
}

...然后，当它呈现到屏幕上时，使用Javascript基本上这样做：

... and then, when it gets rendered to the screen, use Javascript to essentially do this:

myBarberPole.style.backgroundPosition = '-1000000px 0';

是否有任何性能问题：

1. 过渡那么久


2. 拥有背景位置：-1000000px 0 ？

1. Transitioning for that long
2. Having background-position: -1000000px 0 ?

或者，你有更好的解决方案吗？

Alternatively, do you have a better solution?

推荐答案

大号码而是使用更多的CPU或内存。

I don't think there could be any performance issues. It's not because you use big numbers that they use more CPU or memory.

这篇关于使用非常大的背景位置偏移是否存在性能问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！