5

我有一个我正在为一个大客户开发的网站，它有一个模糊的城市景观背景图像，然后在背景中有大约 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 中打开/关闭而没有淡入淡出）。我想知道是否有某种方法可以优化原始样式以使其执行得更快。我假设每个元素都进行了过多的运算和回调，以确定随着时间的推移导致性能下降的淡化率。无论如何，是否有一个元素进行褪色，其余元素可以基于它们自己的偏移量（如果这有意义的话）？

提前致谢

4

1 回答 1

0

似乎在进一步测试之后，它甚至没有与淡入或淡出相关联，而是存在期间的多个大型透明图像导致速度减慢。这是一个完全不同的问题，所以我将它作为一个新问题发布。谢谢大家的回复。

于 2013-06-04T16:56:22.443 回答