Почему событие 'onclick' срабатывает с большой задержкой?

Добрый день. Имеется сайт с очень большим количеством страниц - овер 700. Ссылка на каждую страницу имеется в меню. Меню отсортировано по категориям, в каждой категории - ссылки и/или подкатегории. В этих подкатегориях - в свою очередь тоже ссылки. Структура вложенности выглядит примерно так:
| ПУНКТ МЕНЮ
|__ Категория страниц
     |__ Просто ссылка на страницу
     |__ Заголовок подкатегории
     |__ Блок со ссылками, появляющийся при клике на пред. элемент
          |__ Ссылка
          |__ Ссылка

Напоминаю - страниц свыше 700.

Во время загрузки страницы всё это меню (сам HTML) загружается полностью. Все внутренние уровни вложенности имеют display: none. При клике на категорию и/или подкатегорию блоку, имеющему отношение к этой категории - присваивается display: block. Выглядит примерно так:
$(".category").on('click', function() { // Клик по заголовку категории
		
		if (!$(this).hasClass("current")) {
			$(".category").removeClass("current").next().slideUp(300); // У всех заголовков категорий убирается класс и следующие за ними элементы скрываются
			$(this).addClass("current").next().slideDown(300); // Заголовку, по которому кликнули добавляется класс и следующий за ним элемент раскрывается
		} else {
			$(this).removeClass("current").next().slideUp(300);
		}

	});


Суть проблемы в том, что в мобильниках эти клики по пунктам срабатывают с ощутимой задержкой (до 1-1,5 сек). На десктопах - задержки почти нет. Точнее есть, но очень короткая, почти неощутимая. Подскажите - с чем это может быть связано? Я полагаю, что дело в слишком большом количестве блоков меню. Вероятно, мобильный браузер подтормаживает, когда обрабатывает такое количество. Других гипотез у меня нет. Пробовал убирать тайминг у slideUp/slideDown - не помогает. Если я прав, то как все же можно оптимизировать процесс? А если не прав - то в чем причина и, опять-таки, как можно это ускорить?
  • Вопрос задан
  • 496 просмотров
Пригласить эксперта
Ответы на вопрос 3
Krasnodar_etc
@Krasnodar_etc
little front
Свойство display - довольно тяжёлое для анимации, браузер долго может его применять.
Попробуйте заменить его на opacity или другие свойства, и анимировать их.
Ответ написан
megafax
@megafax
web-программист
$(".category.current").removeClass("current").next().slideUp(300);
Уменьшите поиск по нужным элементам
Ответ написан
Комментировать
@SOKR
Есть такая штука, вместо addClass() и removeClass() - toggleClass('open')
может поможет
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Сбер Санкт-Петербург
от 250 000 ₽
NewGen Vision Санкт-Петербург
от 30 000 до 60 000 ₽
от 3 000 до 4 500 €