Чрезвычайное замедление с помощью методов jquery-ui после того, как страница была открыта в течение некоторого времени

Question

Так что моя веб-страница везде использует jquery. Это одностраничное приложение javascript, и я в значительной степени создаю весь HTML вручную, используя jquery. У меня есть много div-ов, в которых я использую перетаскиваемый и изменяемый размер, я также использую jquery-ui-эффекты.hide и.show со слайд-анимацией, чтобы перемещать некоторые дивы вокруг.

Когда я запускаю приложение, все работает безупречно, но через 10-15 минут после открытия страницы все, что использует методы jquery-ui, становится настолько медленным, что его невозможно использовать. Когда я пытаюсь изменить размер одного из моих элементов div, происходит сильное замедление, когда я в первый раз убираю mousown в углу, и после того, как я отпускаю щелчок, требуется несколько секунд, чтобы страница снова стала отзывчивой. То же самое верно для перетаскивания. Вызов $(). Draggable и $(). Resizable в div также занимает много времени. Как ни странно, само перетаскивание и изменение размера не медленное, а только начало / окончание. Чем дольше страница открыта, тем медленнее она становится.

Все остальные функции на странице работают очень хорошо, даже после одного часа открытия страницы (у меня даже есть некоторые базовые элементы рисования на холсте, другие функции jquery, но не функции jquery-ui также работают нормально). Нет явной утечки памяти, так как браузер никогда не использует более 150 МБ используемой памяти.

Некоторые люди могут сказать, что проблема в моих функциях запуска / остановки изменения размера / перетаскивания. Дело не в том, что я пытался удалить их без каких-либо изменений в скорости, а также это не объясняет замедления анимации.

Использование процессора достигает 100% (я использую одноядерную систему) при анимации, оно остается равным 0%, когда не используются функции jquery-ui. При профилировании функции анимации (после открытия страницы более 30 минут) я вижу, что есть метод с именем curCSS (строка 6672 jquery-1.8.1.js), использующий 95% времени ЦП. Эта же функция использует только 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 использует SVG для создания графиков, у меня были некоторые градиентные эффекты на графиках.

Каждый раз, когда график обновлялся, он удалял старый прямоугольный тег из тега svg, но не очищал тег линейного градиента из тега defs. Через пару минут у меня были тысячи тегов lieargradient на графиках, что вызывало замедление, когда эти графики требовали повторного рендеринга, так как я сдвигал делители, чтобы графы были внутри всей анимации, замедлялся.

Я пытаюсь найти способ очистить ненужные теги. Желательно с помощью метода Dojo, но если нет, то я просто удалю их вручную.