Question

所以我的网页到处都使用了很多jquery，它是一个单页的javascript应用程序，我几乎用jquery手工创建了所有的HTML。我有很多div使用draggable和resizable我也使用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
        }
    });

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

非常感谢任何有关寻找内容的提示。

Answer 1

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

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

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

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

1 个答案: