Javascript 从dom和内存中删除SVG

我正在做一些音乐可视化实验，它从canvas或svg上的dancer.js中提取数据，具体取决于选择的可视化。我有4个选项：在画布上清除js，在svg上清除raphaeljs，在最后一个选项中清除3.js

要保留声音元素并防止重新加载dancer.js，我将按以下方式加载不同的脚本：

            $('body > a').click(function(){
                $('canvas').remove();
                $('svg').empty();
                $('svg').remove();
                var id = $(this).attr('id');
                audioElement = $('#audio')[0];
                $.ajax({
                    type: "GET",
                    url: "js/"+id+"-ajax.js",
                    dataType: "script"
                });
            });

如果有任何不同的可视化被ajax捕获，那么它应该移除画布和svg

  init = function() {
    ...
  }
  init();

它们共享相同的函数，如

onKick

，这些函数在init中分别更改为加载的脚本。（onKick用于dancer.js在播放歌曲中的“kick”时启动它）

直到你开始在它们之间切换的那一刻，它工作得相当好。在canvas和canvas之间切换几乎没有什么区别，但当我从canvas切换到svg，然后再切换回canvas时，framarate会急剧下降

可能是因为svg保存在内存中还是其他一些建议？

仔细观察DOM（如果清除正确），并使用chrome进行时间线和分析以查看峰值，告诉我们脚本创建了多少svg元素？10-100-1000 ? 我的建议是将100%移动到画布上，SVG是有限的，因此上个世纪它创建了大约100条路径（创建三角形）——我使用它是因为raphaeljs有非常好的动画，我无法在画布上重新创建。