Имею приложение vue. Используется vuetify.
По таб компоненту переключаются таблицы. Таблицы достаточно большие. Ячейки тоже компоненты. При переходе по табам происходит заметная задержка. Все данные просчитаны и при рендеринге пересчитываться не должны.
Смотрел в хтмл , там скрытые элементы имеют display:none , но сформированы. Получается что задержка чисто из за браузера.
О браузерах: в хроме задержка ещё терпимая, а вот в ie совсем не пойдет.
В связи с этим вопрос: есть ли какие то способы или инструменты для поиска причин подобных проблем.
Знаю в vue-cli 3 есть инструмент, но у меня второй.
Abdula Magomedov, подобные варианты я рассматривал, но есть несколько "но":
1 таблицы нелинейны, то есть, есть объединения как по строкам так и по столбцам, и они могут быть в разных частях таблицы.
2 одна таблица целостная и работая с ней пользователь постоянно обращается к разным ее частям. Не уверен что постоянное хаотичное движение по контенту (реактивному) можно как то оптимизировать, будут же постоянные пересчеты.
Для решения мне, все таки нужен инструментарий, чтобы понять конкретное узкое место и принимать решение по дальнейшей оптимизации
трудно что то говорить не зная объёмов данных. тормоза для 5-10k строк таблицы это нормально(особенно на ie). даже если часть display:none(хотя как происходит обсчет биндингов в vue я не знаю , сужу по его собрату angularjs)
ozknemoy, здесь наверно я недосказал.
Исправляюсь.
Строк в таблицах как раз не так много.
Порядка 200-300. Но большАя часть ячеек (порядка 1000 на таблицу) таблицы реактивны(Vue, пропсы, классы и т, д), часть из них объединенные, у каждой может быть свой стиль.
И когда писал эти таблицы на чистом js (формирование, поведение) они летали. И речи не было о тормозах.
Сейчас же мне нужно выяснить что конкретно в них тормозит. Для этого нужен инструмент.
А вообще я в фронте недавно, потому вопрос наверно немного странно выглядит
Да, это решило вопрос. Оказалось там есть аудит(никогда им раньше не пользовался). В аудите получил конкретные подсказки что не так.
Провел работу над ошибками. Проблема решена
