Подтвердить что ты не робот

Среднее время набора данных AG-Grid (медленное)

У меня есть сетка с большим, но разумным количеством данных (около 12 000 ячеек... 340 столбцов и 34 строки). Я знаю, что это похоже на боковую таблицу, но просто случается, что для нашего приложения, скорее всего, будет количество столбцов и меньше строк.

Когда данные составляли около 2300 ячеек (68 столбцов и 34 строки), это было достаточно быстро, чтобы я мог назвать это "немедленным". Ни о чем не беспокоюсь.

введите описание изображения здесь

Увеличение 5x вызвало экспоненциальное увеличение начального времени рендеринга. В частности, создание столбцов выполняется вечно, в рамках метода recursivelyCreateColumns.

введите описание изображения здесь

Переход на 10x заставляет занять несколько минут. Переход на 20 лет, это не произошло, но через 5 минут все еще продолжалось, и я подозреваю, что это займет час или больше.

Мой вопрос заключается в том, что хотя мой код для создания столбца/строки/данных сетки для AG-Grid для обработки пробегов в диапазоне 20 мс, есть ли что-то, что я могу сделать, чтобы упростить создание столбцов AG-Grid? Может быть, он только создает столбцы, когда это необходимо?

Моя настройка сетки выглядит следующим образом:

var gridOptions = {
    enableCellExpressions: true,
    columnDefs: data.header,
    rowData: data.body.data,
    floatingTopRowData: data.body.floatingTopData,
    rowHeight: 25,
    headerHeight: 25,
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    getNodeChildDetails: function(rowItem) {
        if(rowItem.items) {
            return {
                expanded: scope.gridOptions.rowData[0].something === rowItem.something,
                group: true,
                field: "something",
                key: rowItem.something,
                children: rowItem.items
            };
        }
        return null;
    }
};
4b9b3361

Ответ 1

Виртуализация строк

Виртуализация строк означает, что мы визуализируем только те строки, которые видны на экране. Например, если сетка имеет 10000 строк, но только 40 могут поместиться внутри экрана, сетка будет отображать только 40 строк (каждая строка представлена элементом DIV). Когда пользователь прокручивает вверх и вниз, сетка будет создавать новые элементы DIV для вновь видимых строк на лету.

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

Изображение ниже показывает виртуализацию строк - обратите внимание, что в DOM отображается только 5 или 6 строк, соответствующих количеству строк, которые фактически видит пользователь.

enter image description here

Производительность Хаки Для Javascript

AG-Grid Row Models