Блог

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

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

Увеличение его в 5 раз привело к экспоненциальному увеличению начального времени рендеринга. В частности, создание столбцов в 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;
    }
};
  

Проверьте документацию по производительности ag-grid

Я скопировал его сюда для быстрого доступа:

Производительность

ag-Grid работает быстро. Однако ag-Grid также может быть настроен и расширен многими способами.

Часто люди приходят на форум ag-Grid и спрашивают: «Почему сетка в моем приложении не такая быстрая?».

На этой странице объясняется, как вы можете ускорить работу с сеткой.

1. Настройка ожиданий ag-Grid может быть такой же быстрой, как продемонстрировано в демонстрационном приложении Demo Application. Вы можете изменить размер демонстрационного приложения до того же размера, что и сетка в вашем приложении, изменив размер браузера, затем перемещаться по сетке (прокручивать, фильтровать и т.д.) И посмотреть, насколько быстро демо-сетка сравнивается с вашей собственной реализацией. Если демонстрационная сетка выполняется быстрее, то есть возможности для повышения производительности.

2. Проверьте средства визуализации ячеек ваши пользовательские средства визуализации ячеек могут замедлять работу ag-Grid. Чтобы проверить это, удалите все средства рендеринга ячеек из вашей сетки и сравните скорость еще раз. Если grid действительно повышает свою скорость за счет удаления средств визуализации ячеек, попробуйте ввести средства визуализации ячеек один за другим, чтобы выяснить, какие из них добавляют больше всего накладных расходов.

3. Создайте быстрые средства визуализации ячеек Самые быстрые средства визуализации ячеек обладают следующими свойствами:

Рендеринг сетки сильно настроен, и простые средства визуализации ячеек JavaScript будут работать быстрее, чем эквиваленты фреймворка. По-прежнему можно использовать фреймворковую версию ag-Grid (например, для настройки свойств ag-Grid и т.д.), Однако, поскольку создается и уничтожается очень много ячеек, дополнительный слой, добавляемый фреймворками, не повышает производительность. Если у вас возникли проблемы с производительностью, следует рассмотреть простые средства визуализации ячеек JavaScript.

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

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

4. Отключите анимацию Анимация строк и столбцов обеспечивает отличный пользовательский интерфейс. Однако не все браузеры так хороши в анимации, как другие. Рассмотрите возможность проверки браузера клиента и отключения анимации строк и столбцов для более медленных браузеров.

5. Настройте буфер строк Свойство rowBuffer задает количество строк, которые сетка отображает за пределами видимой области. Значение по умолчанию равно 10. Например, если ваша сетка отображает 50 строк (поскольку это все, что умещается на вашем экране без прокрутки), тогда сетка фактически отобразит всего 70 строк (10 дополнительных сверху и 10 дополнительных снизу). Затем, когда вы прокручиваете сетку, в ней уже будет 10 готовых строк, ожидающих отображения, поэтому пользователь не увидит перерисовку (не все браузеры отображают перерисовку, только более медленные).

Установка нижнего буфера строк ускорит начальное отображение сетки (например, при первой загрузке данных или после фильтрации, группировки и т.д.). Установка большого буфера строк уменьшит видимую вертикальную прокрутку при перерисовке.

6. Используйте Chrome Быстрее всего сетка работает в Google Chrome. Если можете, сообщите об этом своим пользователям.

7. Понимание обновлений данных Для быстрого изменения данных рассмотрите возможность использования транзакций пакетного обновления, которые позволяют сетке получать очень большие объемы обновлений, не переводя браузер на обход. Это также продемонстрировано в блоге Потоковые обновления в JavaScript Datagrids, который показывает сотни тысяч обновлений в секунду.

8. Смотрите также Прочитайте статью 8 о взломах производительности для JavaScript, чтобы вы знали, что делает grid, и таким образом вы сможете разобраться с этим.

9. Отменить вертикальную прокрутку По умолчанию отмена вертикальной прокрутки отсутствует. Однако в медленных браузерах, особенно IE, в зависимости от вашего приложения, вы можете отказаться от вертикальной прокрутки.

Чтобы отменить вертикальную прокрутку, установите для свойства сетки debounceVerticalScrollbar=true.

Не уверен, что это напрямую связано с вопросом OP, но в ag-grid существует общая проблема с производительностью, которая кажется серьезной инженерной ошибкой — даже простое наведение курсора на строки со скоростью примерно 10 строк в секунду потребляет 33% ресурсов потока JS.

Проблема может быть воспроизведена на их главной странице, ag-grid.com .

Если вы сравните его с другими сетками, вы не увидите снижения производительности при наведении курсора мыши на строки. Например, эта сетка:

Тот же шаблон наведения приводит только к <3% использования потока JS.

Почему это важно? Потому что пользователи будут зависать намного чаще, чем нажимать.

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

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

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

На рисунке ниже показана виртуализация строк — обратите внимание, что в DOM отображается только 5 или 6 строк, что соответствует количеству строк, которые на самом деле видит пользователь.

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

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

Виртуализация столбцов позволяет сетке отображать большое количество столбцов без снижения производительности сетки.

Взломы производительности для Javascript

Модели строк AG-Grid

Я знаю, что большинство людей не столкнутся с этим, но это определенно может сэкономить кому-то время — убедитесь, что вы проверяете производительность с закрытыми инструментами разработки. Я обнаружил, что при открытии инструментов разработки пользовательский интерфейс зависал, но при закрытии он был быстрым.

Вы также можете вручную задать параметры сетки rowBuffer , которые тоже могут помочь.