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

看来，经过进一步的测试，它甚至没有与fadeIn或out相关联，而是存在多个大的透明图像时段导致减速。这是一个完全不同的问题，所以我将它作为一个新问题发布。谢谢大家的回复。

同时淡入/淡出许多（20个左右）项目会导致巨大的性能下降。解？

1 个答案: