javascript - 页面打开一段时间后使用 jquery-ui 方法速度极慢

Question

所以我的网页到处都使用了很多 jquery，它是一个单页 javascript 应用程序，我几乎是使用 jquery 手动创建所有 HTML。我有很多 div，我在其中使用可拖动和可调整大小我还使用 jquery-ui-effects .hide 和 .show 以及幻灯片动画来移动一些 div。

当我启动应用程序时，一切正常，但在页面打开 10 到 15 分钟后，所有使用 jquery-ui 方法的东西都变得太慢以至于无法使用。当我尝试调整我的一个 div 的大小时，当我第一次在 Angular 落按下鼠标时，速度会大大降低，在我松开点击后，页面需要几秒钟才能再次响应。拖放也是如此。在 div 上调用 $().draggable 和 $().resizable 也需要很多时间。奇怪的是，拖动和调整大小本身并不慢，只是开始/结束。页面打开的时间越长，速度就越慢。

页面中的所有其他功能即使在页面打开一小时后也能正常工作(我什至有一些基本的 Canvas 绘图，其他 jquery 但不是 jquery-ui 功能也可以正常工作)。没有明显的内存泄漏，因为浏览器使用的内存永远不会超过 150mb。

有些人可能会说问题出在我的启动/停止调整大小/拖动功能上。 这并不是因为我试图在不改变速度的情况下删除它们，而且这也不能解释动画速度变慢的原因。

在制作动画时 CPU 使用率达到 100%(我使用的是单核系统)，在不使用 jquery-ui 函数时它保持在 0%。在分析动画功能时(页面打开超过 30 分钟后)，我看到有一个名为 curCSS(jquery-1.8.1.js 行 6672)的方法使用了 95% 的 CPU 时间。如果我在启动应用程序后几秒钟执行动画，则此相同的函数仅使用 4.5%。

我正在使用 jquery-1.8.1 和 jquery-ui 1.8.22。

我无法发布所有代码，因为我不知道它的哪一部分是错误的，而且整个代码库非常庞大。动画是这样完成的:

//internal code that prevents updating data on the divs that are part of the animation
var hiding= true;
    var showing= true;

    containerToHide.$div.hide("slide", {direction: "left"}, 1000, function() {
        hiding= false;
        if (!showing) { //both animations ended
            //internal code to allow update data on div after animation ends
        }
    });

    containerToShow.$div.show("slide", {direction: "right"}, 1000, function() {
        showing= false;
        if (!hiding) {//both animations ended
            //internal code to allow update data on div after animation ends
        }
    });

不过我不认为这是问题所在，动画是非常标准的东西。

任何关于寻找什么的提示都将不胜感激。

Answer 1

经过几个小时的调试，我终于找到了罪魁祸首。我正在使用 dojo 创建一些图表。 Dojo 使用 SVG 来创建图表，我在图表上做了一些渐变效果。

每次更新图表时，它都会从 svg 标签中清除旧的 rect 标签，但不会从 defs 标签中清除 lineargradient 标签。几分钟后，我在图表上有数千个 lieargradient 标签，当这些图表需要重新渲染时，这会导致速度变慢，因为我正在滑动图表内部的 div，所有动画都会变慢。

我正在尝试找到一种方法来清除不需要的标签。最好通过 Dojo 方法，但如果不是，我将自己手动删除它们。