Оптимизация производительности прокрутки с помощью vue-virtual-collection

Vue.js
Оптимизация производительности прокрутки с помощью vue-virtual-collection

За это время я написал компонент прокрутки Vue:starkwang/vue-virtual-collection, а теперь официально опубликуйте это ~

Было несколько похожих компонентов прокрутки списка vue, но они не были нацелены наВодопады текутКомпонент прокрутки vue, который представляет собой компонент прокрутки, подобный этому:

Нажмите ниже, чтобы посмотреть демонстрацию напрямую 👇:

vue-виртуальная-коллекцияstarkwang.github.io

Любая форма PR, выпуск приветствуется~

использовать

Его очень просто использовать:

import Vue from 'vue'
import VirtualCollection from 'vue-virtual-collection'

Vue.use(VirtualCollection)

Затем вы можете использовать его в своем коде, вот простой пример:

<template>
    <div>
        <VirtualCollection :cellSizeAndPositionGetter="cellSizeAndPositionGetter" :collection="items" :height="500" :width="330">
            <div slot="cell" slot-scope="props">{{props.data}}</div>
        </VirtualCollection>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                /**
                 * This will create 1000 items like:
                 * [
                 *   { data: '#0' },
                 *   { data: '#1' },
                 *   ...
                 *   { data: '#999' }
                 * ]
                 */
                items: new Array(1000).fill(0).map((_, index) => ({ data: '#' + index }))
            }
        },
        methods: {
            cellSizeAndPositionGetter(item, index) {
                // compute size and position
                return {
                    width: 100,
                    height: 150,
                    x: (index % 2) * 110,
                    y: parseInt(index / 2) * 160
                }
            }
        }
    }
</script>

выполнить

Теперь самотестирование, вероятно, может поддерживать рендеринг данных 100 Вт+ без задержек, чего определенно достаточно в большинстве сценариев. в общемлокальный рендеринга такжеПереработка ДОМ, не будет отображать все данные, а будет отображать ячейку, отображаемую в текущем окне просмотра, поэтому производительность будет намного выше, чем при отображении полного объема данных.

Кратко выраженный в коде:

const DisplayCells = Cells.filter(isInViewPort)

Но в этой реализации будут проблемы, если вы пройдёте все данные для вычисления по одномуisInViewPort, когда данных много, производительность очень плохая (впрочем, большинство компонентов бесконечной прокрутки делают это сейчас==).

Чтобы эффективно отображать, какие ячейки в области просмотра необходимо визуализировать, вместо этого нам нужно использовать идею «блочного рендеринга». Мы можем определить «блок» как квадрат 200*200,Все ячейки, пересекающиеся с этим блоком, будут записаны в этот блок.

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

Вот нарисованный пример:

На данный момент то, что записано в Карте, должно быть:

{
  "0.0": [1, 2, 3, 5], // 0.0块与1,2,3,5号Cell有重叠，下同
  "0.1": [5, 3, 6, 7],
  "0.2": [7, 6, 8, 9],
  "1.0": [2, 3, 4],
  "1.1": [3, 4, 6],
  "1.2": [6, 9]
}

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

Например, в приведенном выше примере нам нужно визуализировать четыре блока 0.0, 0.1, 1.0 и 1.1, а затем нам нужно только найти ячейки, содержащиеся в этих блоках, на карте, и мы можем эффективно их визуализировать, а не Обходя все ячейки Поиск грубой силы.

Это еще один очень популярный компонент с открытым исходным кодом.react-virtualizeОсновную идею можно увидеть ниже, чтобы увидеть, как реализован конкретный SectionManager:

GitHub.com/Не Вон/Горячее Ах… GitHub.com

Подобные идеи также могут быть применены к спискам, таблицам и сеточным системам.

Категории