Виртуальная прокрутка в проектах Vue: лучшие практики по улучшению производительности рендеринга страниц
Виртуальная прокрутка в проектах Vue: лучшие практики по улучшению производительности рендеринга страниц

Оглавление

Предисловие

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

Что такое виртуальная прокрутка

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

Ядро виртуальной прокрутки состоит из следующих четырех пунктов:

  • Рендеринг видимых элементов:Виртуальная прокрутка будет отображать элементы только в текущем окне просмотра.,а не весь список или таблицу. Например,Предположим, что в окне просмотра могут отображаться только 10 элементов.,Тогда технология виртуальной прокрутки будет отображать только эти 10 элементов.,Даже если общий объем данных составляет десятки тысяч.
  • Динамически обновлять содержимое области просмотра:Когда пользователь прокручивает При использовании технологии виртуальной прокрутки содержимое видимой области может динамически обновляться. Новые элементы, попадающие в область просмотра, будут отображаться, а элементы, покидающие область просмотра, будут уничтожаться, тем самым сохраняя количество элементов в области просмотра относительно стабильным.
  • Сокращение операций DOM:Поскольку отображаются только элементы внутри видимой области.,Виртуальная прокрутка значительно снижает частоту операций с DOM. Это не только улучшает скорость рендеринга.,Также уменьшает использование памяти,Это улучшает общую производительность.
  • элемент-заполнитель:для Чтобы убедиться в правильности полосы прокрутки,Методы виртуальной прокрутки обычно используют высоту от общей высоты всех элементов элемента-заполнителя. Этот элемент-заполнитель займет всю высоту списка.,Таким образом, строка полосы прокрутки будет такой же, как при визуализации всех элементов.

бизнес-кейс

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

Метод реализации

Поскольку это проект Vue, я рекомендую очень полезную стороннюю библиотеку: vue-virtual-scroller.

На GitHub вы можете увидеть инструкции для Vue2 или Vue3.

Вот введение в использование Vue2:

Установить через npm

Язык кода:vue
копировать
npm install vue-virtual-scroller

введение в main.js

Язык кода:vue
копировать
import { RecycleScroller } from 'vue-virtual-scroller' // плагин виртуальной прокрутки
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
Vue.component('RecycleScroller', RecycleScroller)

Здесь я используюRecycleScroller,Подходит для ситуаций, когда размер каждого элемента в списке фиксирован. Если высота каждого из ваших предметов не фиксирована,ты можешь использоватьDynamicScrollerиDynamicScrollerItemЧтобы добиться виртуальной прокрутки。

Используется на страницах Vue

часть шаблона

Язык кода:vue
копировать
<div class="table-box">
  <RecycleScroller class="scroller" :items="pointsData" :item-size="80" key-field="name" v-slot="{ item }">
    <div class="scroller-item">
      <img src="/avatar2.jpg" alt="" />
      <div class="scroller-item-content">
        <div>{{ item.name }}</div>
        <div>серийный номер:{{ item.equipmentCoding }}</div>
      </div>
      <div class="scroller-item-btn" @click="viewingTrajectories(item)">Посмотреть трек</div>
    </div>
  </RecycleScroller>
</div>

CSS-часть:

Язык кода:vue
копировать
.table-box {
  display: flex;
  gap: 10px;
  height: 400px;
  .scroller {
    width: 100%;
    height: 100%;
    .scroller-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      padding: 10px 16px;
      margin-bottom: 10px;
      border-radius: 15px;
      background: linear-gradient(180deg, #dee9ff 0%, #ffffff 100%);
      box-shadow: 1px 1px 6px 0px rgba(163, 190, 244, 0.67);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #fff;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
      &:nth-last-child(1){
        margin-bottom: 0;
      }
      > img {
        width: 40px;
        height: 40px;
        border-radius: 100px;
      }
      > .scroller-item-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4px;
        font-size: 14px;
        margin-left: 16px;
        > div:nth-child(1) {
          font-weight: 500;
          color: #1d2129;
        }
        > div:nth-child(n + 2) {
          font-weight: 400;
          color: #86909c;
        }
      }
      > .scroller-item-btn {
        cursor: pointer;
        user-select: none;
        margin-left: auto;
        margin-top: auto;
        padding: 5px 16px;
        border-radius: 20px;
        border: 1px solid #0a57fe;
        font-weight: 400;
        font-size: 14px;
        color: #0a57fe;
      }
    }
  }
}

Здесь нужно обратить внимание,Если вы хотите иметь пространство между дочерними элементами,я установилitem-size="80",Установить одновременно.scroller-itemэтотclass Высота стиля для 70px,и установи егоmargin-bottom:10px;,Настройки последнего элемента margin-bottom: 0

Предварительный просмотр эффекта

Видно, что будь то колесо мыши или перетаскивание ползунка прокрутки, эффект прокрутки может быть очень плавным.

Подвести итог

Внедряя технологию виртуальной прокрутки, мы можем значительно улучшить производительность рендеринга и удобство прокрутки больших списков данных. Виртуальная прокрутка сокращает операции DOM и использование памяти за счет рендеринга содержимого только в видимой области и решает проблему «узких мест» в производительности, вызванную традиционным рендерингом больших данных. В настоящее время большинство компонентов инфраструктуры пользовательского интерфейса, связанных с Vue3, поддерживают виртуальную прокрутку и могут использоваться напрямую. Однако существует относительно немного виртуальной прокрутки, связанной со старыми проектами Vue2. Некоторые бизнес-сценарии, например, выбор из раскрывающегося списка, может потребоваться реализовать вручную. коробки, столы и т. д. . Позже я углублюсь в эту тему и буду использовать технологию виртуальной прокрутки для преобразования существующих компонентов. Надеюсь, эта статья может быть вам полезна.


Я участвую в последнем конкурсе эссе для специального учебного лагеря Tencent Technology Creation 2024, приходите и разделите со мной приз!

boy illustration
Углубленный анализ переполнения памяти CUDA: OutOfMemoryError: CUDA не хватает памяти. Попыталась выделить 3,21 Ги Б (GPU 0; всего 8,00 Ги Б).
boy illustration
[Решено] ошибка установки conda. Среда решения: не удалось выполнить первоначальное зависание. Повторная попытка с помощью файла (графическое руководство).
boy illustration
Прочитайте нейросетевую модель Трансформера в одной статье
boy illustration
.ART Теплые зимние предложения уже открыты
boy illustration
Сравнительная таблица описания кодов ошибок Amap
boy illustration
Уведомление о последних правилах Points Mall в декабре 2022 года.
boy illustration
Даже новички могут быстро приступить к работе с легким сервером приложений.
boy illustration
Взгляд на RSAC 2024|Защита конфиденциальности в эпоху больших моделей
boy illustration
Вы используете ИИ каждый день и до сих пор не знаете, как ИИ дает обратную связь? Одна статья для понимания реализации в коде Python общих функций потерь генеративных моделей + анализ принципов расчета.
boy illustration
Используйте (внутренний) почтовый ящик для образовательных учреждений, чтобы использовать Microsoft Family Bucket (1T дискового пространства на одном диске и версию Office 365 для образовательных учреждений)
boy illustration
Руководство по началу работы с оперативным проектом (7) Практическое сочетание оперативного письма — оперативного письма на основе интеллектуальной системы вопросов и ответов службы поддержки клиентов
boy illustration
[docker] Версия сервера «Чтение 3» — создайте свою собственную программу чтения веб-текста
boy illustration
Обзор Cloud-init и этапы создания в рамках PVE
boy illustration
Корпоративные пользователи используют пакет регистрационных ресурсов для регистрации ICP для веб-сайта и активации оплаты WeChat H5 (с кодом платежного узла версии API V3)
boy illustration
Подробное объяснение таких показателей производительности с высоким уровнем параллелизма, как QPS, TPS, RT и пропускная способность.
boy illustration
Удачи в конкурсе Python Essay Challenge, станьте первым, кто испытает новую функцию сообщества [Запускать блоки кода онлайн] и выиграйте множество изысканных подарков!
boy illustration
[Техническая посадка травы] Кровавая рвота и отделка позволяют вам необычным образом ощипывать гусиные перья! Не распространяйте информацию! ! !
boy illustration
[Официальное ограниченное по времени мероприятие] Сейчас ноябрь, напишите и получите приз
boy illustration
Прочтите это в одной статье: Учебник для няни по созданию сервера Huanshou Parlu на базе CVM-сервера.
boy illustration
Cloud Native | Что такое CRD (настраиваемые определения ресурсов) в K8s?
boy illustration
Как использовать Cloudflare CDN для настройки узла (CF самостоятельно выбирает IP) Гонконг, Китай/Азия узел/сводка и рекомендации внутреннего высокоскоростного IP-сегмента
boy illustration
Дополнительные правила вознаграждения амбассадоров акции в марте 2023 г.
boy illustration
Можно ли открыть частный сервер Phantom Beast Palu одним щелчком мыши? Супер простой урок для начинающих! (Прилагается метод обновления сервера)
boy illustration
[Играйте с Phantom Beast Palu] Обновите игровой сервер Phantom Beast Pallu одним щелчком мыши
boy illustration
Maotouhu делится: последний доступный внутри страны адрес склада исходного образа Docker 2024 года (обновлено 1 декабря)
boy illustration
Кодирование Base64 в MultipartFile
boy illustration
5 точек расширения SpringBoot, супер практично!
boy illustration
Глубокое понимание сопоставления индексов Elasticsearch.
boy illustration
15 рекомендуемых платформ разработки с нулевым кодом корпоративного уровня. Всегда найдется та, которая вам понравится.
boy illustration
Аннотация EasyExcel позволяет экспортировать с сохранением двух десятичных знаков.