Jquery hide() и show() работает слишком медленно в Google Chrome

У меня есть веб-приложение, которое не работает корректно в chrome. Прекрасно работает в Firefox. У меня есть страница с большим количеством элементов списка, точнее 316. Каждый элемент списка содержит большое количество HTML. Моя проблема в том, когда я хочу скрыть или показать эти элементы списка.

У меня есть тестовая страница на jsFiddle, чтобы показать проблему, с которой я сталкиваюсь. Я убрал HTML-страницу в один неупорядоченный список, чтобы сохранить все элементы списка 316. У меня есть две кнопки, которые просто вызывают jQuery hide или show при нажатии. Опять же, это быстро работает в Firefox, Opera, даже в IE, довольно хорошо в Safari, но в Google Chrome может занять более 30 секунд, что вызывает диалоговое окно с вопросом, хотите ли вы убить страницу, потому что script работает до конца.

Вот ссылка на jsFiddle

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

спасибо за любой ввод. JMM

Ответ 1

Похоже, что это не имеет ничего общего с jQuery и просто проблема с тем, что Chrome скрывает родительский элемент с большим количеством дочерних элементов.

Это просто использует базовый javascript, чтобы скрыть элемент на готовом документе:

document.getElementById('sortable-lines').style.display="none";

И все это продолжается навсегда после того, как документ готов.

http://jsfiddle.net/petersendidit/UZCZc/10/embedded/result/

Откроется ошибка Chrome для этого: http://code.google.com/p/chromium/issues/detail?id=71305

Ответ 2

При скрытии удаление элемента из DOM выполняется быстрее, чем при использовании hide().

var sortableLines = $('#sortable-lines');
$('#hide').click(function() {
    $('#timer').text("Hiding");        
    sortableLines.remove();
});

Пока вы append() вернетесь к DOM, все еще медленно.

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

Изменить: Нашел еще один хак:

Вы должны установить контейнер overflow: hidden:

#linecontainer { overflow: hidden; }

При скрытии переместите этот элемент на большой верх, установив margin-top на большое отрицательное число.

$('#hide').click(function() {
    $('#timer').text("Hiding");
    sortableLines.css('margin-top', '-1000000px');
});

При показе, reset его margin-top.

$('#show').click(function() {
    $('#timer').text("Showing");
    sortableLines.css('margin-top', '0');
});

И он показывает и скрывает мгновенно.

Ответ 3

Спасибо за ответ выше, он отлично работает и ускоряет процесс.

Однако он не всегда работает. Работает хорошо, когда нужные элементы находятся в верхней части списка. Тем не менее, он не отображает их всех, если я выбираю что-то из середины списка.

Я считаю, что знаю, почему это плохо.

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

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

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