javascript - 淡入/淡出许多(20 个左右)项目同时导致巨大的性能损失。解决方案？

Question

我有一个网站，我正在为一个大客户工作，该网站有一个模糊的城市景观背景图像，然后在背景中有大约 20 个左右的模拟闪烁灯元素。虽然我知道褪色的性能会突增，但我认为 19 个元素不会太糟糕。我错了。

就目前而言，每个元素都像这样递归地处理它的闪烁:

function sparkle(flag, time) {
    if (flag) {
        setTimeout(function () {
            self.fadeIn(getRandomInt(250,1000), function () {
                sparkle(!flag, getRandomInt(250,1000));
            });
        }, time);
    } else {
        setTimeout(function () {
            self.fadeOut(getRandomInt(250,1000), function () {
                sparkle(!flag, getRandomInt(250,1000));
            });
        }, time
    }
}

当我以不同的速率运行其中的 20 个时，性能受到了极大的影响。问题是这个网站必须降级到 IE7(我们有一个自定义的淡入/淡出功能)所以我没有多少选择。

我的直接回答是我将检查 css 不透明度过渡支持，并将淡入和淡出转换为可用的 css 过渡，这在现代浏览器中应该快得多(并且让它们在 ie7 中打开/关闭而不需要褪色)。我想知道是否有某种方法可以优化原始样式以使其执行得更快。我假设它对每个元素进行过多的处理和回调以确定随时间推移的淡入淡出率，这会导致性能下降。无论如何，是否有一个元素进行衰落，其余元素可以基于它们自己的偏移量(如果这有意义的话)？

提前致谢

Answer 1

经过进一步测试，它似乎甚至与淡入或淡出都没有关联，而是多个大型透明图像的出现导致了速度减慢。这是一个完全不同的问题，所以我会把它作为一个新问题发布。谢谢大家的回复。