6

这是我为雪花尝试的代码。一切似乎都很好，但是一旦脚本在一段时间内没有响应意味着（它会减慢浏览器的 firefox 速度）。我不确定为什么会发生这种情况。我怎样才能让它响应而不会对浏览器造成任何影响。这是小提琴

我怎样才能使它不会导致任何响应脚本。！我想我在循环javascript函数时犯了一个错误:(任何建议都会很棒。

谢谢

Javascript：

// window.setInterval(generateSnow, 0);
var windowHeight = jQuery(document).height();
var windowWidth = jQuery(window).width();
function generateSnow() {
    for (i = 0; i < 4; i++) {
        var snowTop = Math.floor(Math.random() * (windowHeight));
        snowTop = 0;

        var snowLeft = Math.floor(Math.random() * (windowWidth - 2));
        var imageSize = Math.floor(Math.random() * 20);

        jQuery('body').append(
            jQuery('<div />')
                .addClass('snow')
                .css('top', snowTop)
                .css('left', snowLeft)
                .css('position', 'absolute')
                .html('*')
        );
    }
}


function snowFalling() {
    jQuery('.snow').each(function(key, value) {
        if (parseInt(jQuery(this).css('top')) > windowHeight - 80) {
            jQuery(this).remove();
        }
        var fallingSpeed = Math.floor(Math.random() * 5 + 1);
        var movingDirection = Math.floor(Math.random() * 2);
        var currentTop = parseInt(jQuery(this).css('top'));
        var currentLeft = parseInt(jQuery(this).css('left'));
        jQuery(this).css('top', currentTop + fallingSpeed);
        if (movingDirection === 0) {
            jQuery(this).css('bottom', currentLeft + fallingSpeed);
        } else {
            jQuery(this).css('bottom', currentLeft + -(fallingSpeed));
        }
    });
}

window.setInterval(snowFalling, 15);
window.setInterval(generateSnow, 1000);
4

2 回答 2

4

您在运行时在页面上添加和删除大量元素，使浏览器频繁刷新该页面的结构。

这种方法是：

  1. 在性能方面你能做的最糟糕的事情
  2. 一旦生成了足够多的DIV，可能会使浏览器崩溃，删除，生成，删除，生成，删除......

使用此配置，移动浏览器可能会在 2 秒后冻结。

我建议在开始时预先生成所有 DIV，重新使用它们并使用 CSS 动画或 jQuery animate()来完成你想要做的事情。

于 2013-10-11T13:17:07.090 回答
2

正如@ZathrusWriter 提到的，您应该重新使用雪花元素，这样内存就不会膨胀。

创建一堆雪花后浏览器开始变慢的原因是 JavaScript 使用garbage collector. 因此，内存的释放速度比为新雪花分配内存要慢得多。理想情况下，您希望为所有雪花分配一次内存。

基本上，在任何给定时间为您想要在屏幕上显示的雪花数量创建元素。将它们全部放在屏幕上的随机位置开始。然后，一旦雪花离开屏幕或不可见，该雪花就可以再次使用。所以你将把它移回顶部（可能在另一个随机位置）并让它像雪花一样再次落下（而不是删除它并创建一个新的）。

这距离创建粒子发射器仅一步之遥。

于 2013-10-12T09:14:48.830 回答