производительность jeditable в IE - PullRequest
Новая
       18

производительность jeditable в IE

4 голосов
/ 17 ноября 2009

Я вижу очень плохое время настройки страницы в IE с использованием jeditable.

На странице есть таблица, в которой в каждой строке есть 13 элементов span, к которым применяется jeditable следующим образом: 

$(document).ready(function() { 
    $('#entry_pl span.ples').editable('my_xhr.php', {
            placeholder: '<span class="placeholder">unset</span>',
            indicator: '<img src="indicator.gif" class="indi">',
            data: function(value, settings) {
                return  $('<span />').html(value).text();
            }
        });
});

Функциональность отличная - все работает. Но в IE 6 ... 8 приведенный выше код занимает более половины секунды на строку таблицы. Так что задержка настройки страницы ужасна уже для таблицы из 10 строк. Пользователь не будет доволен этим. Задержка настройки в WebKit и Firefox незначительна.

Есть мысли или предложения?

Я не начал проверять или профилировать jeditable-код на производительность.

И я думаю, что, возможно, вызову .jeditable () для элемента только тогда, когда на него щелкают, а не для всех элементов в $ (document) .ready ().

Ответы [ 3 ]

8 голосов
/ 18 ноября 2009

Че, я сделал кучу тестов и профилирования, чтобы определить, какой бит кода занимает время. jeditable был не единственным виновником, но он взял львиную долю. Мне действительно любопытно, почему это работает быстро для вас, а не для меня.

Одна из возможностей заключается в том, что я запускаю IE на XP в виртуальной машине VirtualBox на моем iMac. Это не быстрая настройка, но это хорошо, потому что некоторые из моих клиентов используют старые, медленные или перегруженные компьютеры, и я хочу, чтобы приложение также хорошо работало на них.

В любом случае, хорошая новость заключается в том, что я нашел простое и эффективное решение, которым я могу поделиться. Я избавился от всех вызовов .jeditable () в $ (document) .ready (). Я дал каждому редактируемому элементу span в таблице атрибут примерно так: onclick = "ed (this)". И вы можете представить, как выглядит ed (): 

function ed(elem) {
    $elem = $(elem);
    ...
    $elem
        .removeAttr('onclick')
        .editable('action_script.php', {
            ...
            }
        })
        .click();
}

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

1 голос
/ 26 сентября 2018

Только что решил этот. Если вы можете жить без него, закомментируйте следующие четыре строки кода, это значительно ускоряет его для меня. 

       var savedwidth  = $(self).width();
       var savedheight = $(self).height();
       ...
       settings.width  = savedwidth;
       settings.height = savedheight;
0 голосов
/ 18 ноября 2009

В данный момент я занимаюсь разработкой аналогичной функциональности для страницы, и ваше сообщение вызвало у меня ужас, так как я не смотрел его в IE уже несколько дней.

Однако я только что посмотрел на это сейчас в IE 6 - 8, и я не испытываю такую ​​же низкую производительность при настройке, как у вас. У меня 13 рядов, в каждом по 6 редактируемых полей. Загрузка страницы и производительность после загрузки оба быстро. Я создал похожую страницу с несколькими редактируемыми элементами, которая существует уже шесть месяцев без каких-либо сообщений о низкой производительности. Глядя на это сейчас в IE, он имеет 130 редактируемых элементов, и он так же быстро загружается и работает, как и моя текущая страница.

В обоих случаях я добавил jeditable более небрежным способом, чем при использовании одного класса в качестве селектора.

Так что я не уверен, что ваша проблема является jeditable.

Может быть, это так. Когда я получу нужное поведение на своей текущей странице, я попытаюсь связать jeditable с контейнером более высокого уровня и использовать всплывающее окно событий, как описано в пункте 7 этого поста 11 способов повысить производительность jquery . Может быть, это поможет вам.

Удачи.

...