4

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

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

页面中的所有其他功能即使在页面打开一小时后也能正常工作（我什至有一些基本的画布绘图，其他 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
        }
    });

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

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

4

1 回答 1

0

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

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

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

于 2012-09-28T13:54:22.570 回答