Применение jQuery UI Сортируемый к сотням элементов на странице приводит к очень медленной загрузке страницы - нужны идеи о том, как сделать его более эффективным

Question

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

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

Я попытался сделать первый день календаря сортируемым, а затем использовать jcluer .clone () для копирования во все остальные дни, но, к сожалению, jcluery .clone () не копирует события .sortable. Другие события (такие как щелчок, двойной щелчок и т. Д.) Копируются нормально, но не сортируются. Проведя какое-то исследование в Интернете, я смог лишь найти утверждение, что jQuery «не поддерживает клонирование плагинов».

Есть ли лучший способ сделать это? Я просмотрел stackoverflow, форумы пользовательского интерфейса jQuery и Google в целом и ничего не нашел.

Заранее спасибо, Хамон

РЕДАКТИРОВАТЬ: Вот код. Ничего особенного.

    function sortableStop(event, ui) {
              // Saves to the DB here. Code removed - not relevant
    }

    $(".milestone-day").bind("dblclick", function(ev) {
      // Allows adding milestones. Code removed - not relevant
    }).sortable({
        handle: '.handle',
        connectWith: '.milestone-day',
        items: '.milestone',
        stop: sortableStop
    });

Разметка выглядит так:

<table>
  <tbody>
    <tr>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
    </tr>
    <tr>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
      <td><ul class="milestone-day"></ul></td>
    </tr>
    ...
  </tbody>
</table>

Вехи - это элементы li, загруженные в соответствующие им дни вехи через ajax.

РЕДАКТИРОВАТЬ 2: Рабочая демонстрация размещена:

http://www.clearsightstudio.com/demos/calendar-load/

РЕДАКТИРОВАТЬ 3: Демо ушел. К сожалению.

Обратите внимание, что при открытии страницы возникает задержка. В моем реальном приложении происходит гораздо больше, чем в этой демонстрации, поэтому отставание еще более заметно.

Answer 1

вызовите connectWith после вызова sortable (), пример:

$('.whatever').sortable().sortable( "option", "connectWith", '.whatever' );

по какой-то причине это улучшило производительность LOT в моем сценарии (тысячи элементов)

Answer 2

У меня была похожая проблема с сотнями изображений, которые нужно было перетаскивать. и инициализация просто заняла слишком много времени

Мне удалось решить эту проблему ленивым созданием мышиного центра, он прекрасно работает, и пользовательский интерфейс не изменился

Подробнее здесь https://stackoverflow.com/a/20399896/287455

Answer 3

старайтесь не связывать все элементы onload, делайте что-то вроде этого

<script type="text/javascript">
            jQuery(".milestone").live("mouseenter", function(){
                function sortableStop(event, ui) {
                    alert("Sortable stop fired!");
                }

                $($(this).parent()).bind("dblclick", function() {
                    alert("Double-click fired!");
                }).sortable({
                    connectWith: '.milestone-day',
                    items: '.milestone',
                    stop: sortableStop
                });
            });
        </script>

это улучшит производительность

Демо: http://jsfiddle.net/P27qv/

Answer 4

Мне удалось сделать это намного быстрее, если я скрою сортируемые элементы перед тем, как вызвать .sortable ().Но это только имело огромное значение на iPad Safari.Для других браузеров это было примерно так же.

Пример кода:

$(".milestone-day").hide()

$(".milestone-day").sortable({
    handle: '.handle',
    connectWith: '.milestone-day',
    items: '.milestone',
    stop: sortableStop
});

$(".milestone-day").show()

Answer 5

Переместите свой код, чтобы связать все элементы управления с событием загрузки страницы. Это не будет быстрее, но будет казаться быстрее для пользователя. Вы также можете изменить код и разметку, чтобы отдельные элементы были отключены при загрузке и после того, как их события связаны, они включены. Это предотвратит быстрое подергивание пользователи нажимают на них и задаются вопросом, почему ничего не произошло.