javascript - 动态注入(inject) Canvas 上出现意外的性能损失

Question

我正在开发一个小项目，但我遇到了一个奇怪的错误(？)，使用 Ajax 将 Canvas 注入(inject)到页面中(更具体地说，是 jQuery $('element'). load('some_file.html') 方法，它只是将文件的 html/文本附加到指定元素中)。

我有两个做不同事情的“模块”。第一个是我问题的主题，是一个简单的 Canvas ，其中有约 2000 个随机移动的粒子。结构按预期工作，我可以在两个模块之间切换，并且 DOM 更新而无需刷新页面。

问题是，如果我在两个项目之间来回切换，第一个模块上 Canvas 的性能就会下降。

这种行为对我来说是出乎意料的，但请告诉我我是否错了:加载包含canvas标签的模板时，会创建一个新的canvas元素，并且指向旧 Canvas 和旧粒子数组的指针应该被替换。

我测试了我的旧 Canvas 循环是否仍在后台运行，但看起来并非如此。我还尝试禁用 ajax 缓存并对粒子属性的范围进行了一些测试，但没有任何改变，即使使用全局变量也是如此。我也尝试取消requestAnimationFrame，但没有成功。

如果我不够精确，我很抱歉，这里有一个 JSFiddle，以便您可以复制该错误:http://jsfiddle.net/zq2o5w07/ 。 (我没有使用 load() 方法，而是使用了 html()，正如您所看到的，性能损失仍在发生)。

这是一个半无用的代码片段，因为 stackoverflow 强制我放一个(我不会把我的整个代码放在这里......):

$('a').on('click', function () {
    if ($(this).attr('href') == '#test1') {
        loadTemplate(1);
    } else {
        loadTemplate(2);
    }
});

loadTemplate(1);

function loadTemplate(template) {
    if (template == 1) {
        $('.container').html(' <canvas id="particles-canvas" width="1000" height="400" style="background-color: #000;"></canvas>');
        addParticles();
    } else {
        $('.container').html('<h1>Module 2</h1>');
    }
}

谢谢。

Answer 1

您的问题出在以下两段代码中:

// This code is executed every time a link is clicked
$('a').on('click', function () {
    if ($(this).attr('href') == '#test1') {
        loadTemplate(1);
    } else {
        loadTemplate(2);
    }
});

// This function is also executed everytime a link is clicked
function loadTemplate(template) {
    if (template == 1) {
        $('.container').html('<canvas id="particles-canvas" width="1000" height="400" 
                              style="background-color: #000;"></canvas>');
        addParticles();
    } else {
        $('.container').html('<h1>Module 2</h1>');
    }
}

这是因为 jQuery 的 .html() 不会从 DOM 中删除 Canvas 。这是common issue因为很多开发者使用.html()错误的。阅读链接以获取解释。而不是.html() ，你应该使用.empty().append() 。这是因为.append() 接受 DOM 元素。

话虽如此，在代码开头初始化两个模块，然后简单地使用 jQuery 动画来显示或隐藏要容易得多。 em> 他们。例如:

HTML

<a href="#test1">Module 1</a>
    <a href="#test2">Module 2</a>

<div class="container1">
    <canvas id="particles-canvas" width="1000" height="400" style="background-color:#000;">
    </canvas>
</div>
<div class="container2">
    <canvas id="particles-canvas" width="1000" height="400" style="background-color:#000;">
    </canvas>
</div>

jQuery

// Initialisation of Module 1
loadTemplate(1);
addParticles();

// Don't re-build the modules but simply toggle their appearance:
function loadTemplate(template) {
    if (template == 1) {
        $('.container2').fadeOut(function() {
            $('.container1').fadeIn();
        });
    } else {
        $('.container1').fadeOut(function() {
            $('.container2').fadeIn();
        });
    }
}

SEE DEMO

此外，生成粒子的代码，addParticles() ，有缺陷。一段时间后， Canvas 本身会变慢!因此，在您的粒子生成代码中的某个地方，存在一些意外的行为。通过观察粒子超过 30 秒，您可以亲自看到这一点。