{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"1. Не рендерить всё сразу: пагинация"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Самое простое:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"показывать только часть данных"},{"type":"text","text":" (10–50 строк на страницу)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"остальное — через кнопки/пагинацию/“показать ещё”"}]}]}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n ...\n\n"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"const page = ref(1)\nconst perPage = 50\n\nconst paginatedRows = computed(() => {\n const start = (page.value - 1) * perPage\n return rows.value.slice(start, start + perPage)\n})\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ещё лучше — "},{"type":"text","marks":[{"type":"bold"}],"text":"серверная пагинация"},{"type":"text","text":": получать с бэка только нужную страницу."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"2. Виртуализация / windowing (viewport-only rendering)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для очень больших таблиц (10k+ строк) нужна "},{"type":"text","marks":[{"type":"bold"}],"text":"виртуальная прокрутка"},{"type":"text","text":":"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"в DOM рендерятся только "},{"type":"text","marks":[{"type":"bold"}],"text":"видимые"},{"type":"text","text":" строки + небольшой буфер сверху/снизу"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"остальное — просто пустое место с правильной высотой"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В Vue обычно используют библиотеки вроде:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"vue-virtual-scroller"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"vue-virtual-scroll-list"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример идеи (условный):"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это радикально снижает количество DOM-элементов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"3. Минимизировать реактивность данных"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если таблица чисто отображает данные и сами строки не редактируются:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не нужно делать каждую строку супер-реактивной"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"можно использовать:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"markRaw"},{"type":"text","text":" для больших объектов/массивов"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"shallowRef"},{"type":"text","text":" для всего списка"}]}]}]}]}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"import { shallowRef, markRaw } from 'vue'\n\nconst rows = shallowRef([])\n\n// если приходят огромные объекты:\nrows.value = markRaw(bigArray)\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Так Vue не будет глубоко отслеживать каждое вложенное поле."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"4. Правильный "},{"type":"text","marks":[{"type":"code"}],"text":"key"},{"type":"text","text":" в v-for"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обязательно:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"стабильный уникальный "},{"type":"text","marks":[{"type":"code"}],"text":"key"},{"type":"text","text":" → Vue переиспользует строки"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"меньше пересозданий DOM-элементов"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"лучше производительность при фильтрации/сортировке"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Нельзя"},{"type":"text","text":" использовать индекс как key ("},{"type":"text","marks":[{"type":"code"}],"text":":key=\"index\""},{"type":"text","text":"), если строки могут добавляться/удаляться/переставляться."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"5. Тяжёлая логика — в computed, а не в шаблоне"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Не делать так:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"{{ formatPrice(row.price) }}\n{{ complexCalculation(row) }}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Лучше:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"предрасчитать данные заранее в "},{"type":"text","marks":[{"type":"code"}],"text":"computed"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"или подготовить поля до передачи в таблицу"}]}]}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"const preparedRows = computed(() =>\n rows.value.map(row => ({\n ...row,\n priceLabel: formatPrice(row.price),\n total: calcTotal(row)\n }))\n)\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"6. Не создавать новые объекты/функции в шаблоне"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый рендер:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"— создаёт новый объект → Vue думает, что проп изменился → лишние обновления."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вынеси такие данные:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"const rightAlignOptions = { align: 'right' }\n"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"7. Оптимизировать фильтрацию и сортировку"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"фильтры/поиск → "},{"type":"text","marks":[{"type":"bold"}],"text":"debounce"},{"type":"text","text":" по вводу"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сортировка/фильтрация → в "},{"type":"text","marks":[{"type":"code"}],"text":"computed"},{"type":"text","text":", а не в "},{"type":"text","marks":[{"type":"code"}],"text":"watch deep"},{"type":"text","text":" на весь массив"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"при огромных данных — делегировать сортировку и фильтрацию серверу"}]}]}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"const debouncedQuery = ref('')\n\nwatch(query, debounce((v) => {\n debouncedQuery.value = v\n}, 300))\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"8. Упростить содержимое ячеек"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Внутри "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":":"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"поменьше сложных компонентов"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не рендерить то, что пользователь всё равно не видит (условные блоки, раскрытие по клику)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"ленивые детали"},{"type":"text","text":": раскрываем подробности/детальные карточки только по запросу"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"9. Не тянуть всё в глобальный стор “на всякий”"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если огромная таблица хранится в глобальном store:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"любое изменение стора может триггерить много компонентов"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"лучше хранить такие данные локально в странице/модуле"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"10. Визуально — скелетоны и lazy-loading"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"С точки зрения UX:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"показывать skeleton вместо полной таблицы"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"подгружать данные порциями"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не блокировать UI"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это не прям “оптимизация рендера”, но сильно улучшает восприятие."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Как это можно сказать на собеседовании (коротко):"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для оптимизации больших таблиц в Vue я:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"использую пагинацию или виртуальный скролл, чтобы не рендерить тысячи строк сразу;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"минимизирую реактивность (shallowRef/markRaw для больших структур);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"слежу за "},{"type":"text","marks":[{"type":"code"}],"text":"key"},{"type":"text","text":" в "},{"type":"text","marks":[{"type":"code"}],"text":"v-for"},{"type":"text","text":", чтобы Vue переиспользовал строки;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"выношу тяжёлые вычисления в "},{"type":"text","marks":[{"type":"code"}],"text":"computed"},{"type":"text","text":" и не создаю новые объекты/функции в шаблоне;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"при необходимости делаю фильтрацию и сортировку на сервере, а ввод — с debounce."}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как оптимизировать большие таблицы?

Комментарии