Сравнение производительности JS grid

Я не пробовал ни одной из упомянутых вами библиотек примеров, но, возможно, я смогу объяснить, почему fin-hypergrid выделяется больше всего. Мое мнение основано в первую очередь на моих знаниях JavaScript и на том, как подобные вещи работают сзади.

Наверное, стоит начать с react-virtualized и ag-grid:

• Оба используют способ заполнения DOM и отображения только части данных в представлении, динамического удаления из DOM вещей, которые больше не видны, и предварительного добавления предстоящих вещей. Теперь проблема заключается в добавлении и удалении вещей в DOM, поскольку это, как правило, выполняется очень быстро / несколько раз в секунду. Из-за этого мы наблюдаем некоторую задержку или дрожание. Вы можете проверить Веб-консоль> Профили> Запись профилей ЦП JavaScript и увидеть, что этот метод требует времени для выполнения. Таким образом, единственное, что отличается от react-virtualized и ag-grid, - это их алгоритмы максимально плавного применения этих изменений.

ag-grid, насколько я могу судить, больше всего страдает от этой проблемы, так как вы могли видеть некоторые элементы, которые еще не завершили рендеринг, и испытывали серьезную задержку при слишком быстрой прокрутке.

react-virtualized, с другой стороны, отлично справляется со своим алгоритмом, максимально гладко реализуя его. Это может быть лучшая библиотека, доступная в категории манипуляций с DOM, хотя она все еще страдает от проблемы слишком быстрого манипулирования DOM, что приводит к задержке, хотя это наблюдается только тогда, когда задействованы большие фрагменты данных.

Вот причины, по которым fin-hypergrid выделяется:

• Лучшим преимуществом fin-hypergrid является то, что он вообще не выполняет манипуляции с DOM, поэтому вы уже избавлены от проблемы, вызванной слишком быстрым добавлением и удалением вещей, поскольку он использует <canvas>
• fin-hypergrid также отображает только те данные, которые видит пользователь, и динамически удаляет невидимые вещи. Он также добавляет заранее, чтобы добиться ощущения плавной прокрутки, поэтому элементы неподвижного рендеринга не отображаются.
• fin-hypergrid также отлично справляется со своим алгоритмом прокрутки, чтобы добиться максимально плавного воспроизведения, чтобы не было дрожания или задержек.

Это не значит, что hypergrid все в порядке, у него тоже есть некоторые недостатки:

• Поскольку fin-hypergrid создан с использованием HTML5 Canvas, его стилизация станет настоящей проблемой, поскольку он не поддерживает CSS. Вам нужно будет стилизовать его вручную.
• Следует помнить о нескольких вещах: такие элементы управления формы, как <select>, переключатели, флажки и т. Д., Могут стать настоящей проблемой для реализации. Если вы пытаетесь реализовать что-то подобное, действуйте осторожно.
• Он в основном используется для отображения данных с простым редактированием столбцов, не задействуя ничего, кроме текстового поля, и достижения наиболее плавного ощущения прокрутки.

В заключение, я бы, вероятно, предложил вместо этого использовать react-virtualized, поскольку он обеспечивает наиболее плавную прокрутку, чем fin-hypergrid. Если вы готовы игнорировать недостатки fin-hypergrid, то fin-hypergrid - лучший вариант.

ОБНОВЛЕНО:

Поскольку мы обсуждали JS / CSS, реализации этих таблиц на холсте. Я должен был упомянуть последнего возможного претендента, хотя это в первую очередь не библиотека таблиц js, а фреймворк, в котором можно было бы использовать Google Sheets, он называется d3.js.

• d3.js обладает скоростью и мощью холста и в то же время сохраняет структуру HTML, это означает, что ее можно стилизовать с помощью CSS!
• Он максимально увеличивает использование HTML 5 SVG
• Лучше ничего не могу сказать в d3.js

Единственным недостатком d3.js в этом обсуждении является то, что:

• Нет доступных хороших библиотек таблиц, которые используют d3.js. Google Sheets то есть. Но они не делятся кодом.
• d3.js просто очень сложно выучить, хотя есть много вещей, которые помогают нам научиться этому быстрее, но не так быстро.

Если вам нужна скорость Canvas с возможностями стилизации CSS, тогда d3.js - это ключ, которому нужно научиться.

Я просмотрел различные варианты сетки данных. Затем я нашел это.

Надеюсь, этот ответ поможет всем, кто ищет сравнение производительности между сетками данных.

Здесь следует отметить несколько моментов, даже если вы прочитали статью, которую я предоставил.

1 - Если сетка «достаточно быстрая», что означает, что задержка рендеринга не заметна, то не имеет значения, какая сетка быстрее следующей.

2 - Сетка на основе холста не является сеткой HTML - вы не можете настроить ее с помощью HTML. Сетка будет сложно стилизовать / тематизировать / настроить стандартный разработчик JavaScript / CSS.

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

Вы рассматривали возможность использования чего-то, предназначенного для больших наборов данных?

Clusterize.js

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

Демо-страница загружает 3 примера по 500 000 элементов каждый (всего 1 500 000 элементов).

Обновление - с примером фрагмента

• Поскольку у меня нет 100 000 x 200 элементов данных для загрузки, я создаю 100 x 200, используя JavaScript.
• Затем я копирую этот массив и вставляю его в массив данных 1000 раз.
• Таким образом, я могу получить общий размер вашего набора данных, не перегружая движок JavaScript.
• Поскольку трудно сказать, что он действительно выполняет 100 000 строк, я вызвал функцию getRowsAmount(), которая отображается в верхней части вывода.
• Возможно, вам придется поиграть с размерами блоков и кластеров в зависимости от области просмотра, но это должно показать вам, что эта библиотека полностью может удовлетворить ваши потребности.

$(function() {
  var dataBlock = []
  var data = [];
  const rows = 100000
  const cols = 200;
  const blockSize = 100;
  const blocks = rows / blockSize;

  for (let i = 0; i < cols; i++) {
    $("thead tr").append(`<th>C${i}</td>`);
  }

  for (let j = 0; j < blockSize ; j++) {
    var tr = $("<tr />");
    for (var i = 0; i < cols; i++) {
      tr.append(`<td>R${j}-C${i}</td>`);
    }

    dataBlock.push($("<div />").append(tr).html());
  }

  for (let i = 0; i < blocks; i++) {
    $.merge(data, dataBlock);
  }

  var clusterize = new Clusterize({
    rows: data,
    scrollId: 'scrollArea',
    contentId: 'contentArea',
    rows_in_block: 10,
    blocks_in_cluster: 2,
  });
  
  $("#totalRows").text(clusterize.getRowsAmount());
});

table td {
  white-space: nowrap;
  padding: 0 5px;
}

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://clusterize.js.org/css/clusterize.css" rel="stylesheet" />

  <script src="https://clusterize.js.org/js/clusterize.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  Total Rows: <span id="totalRows"></span>
  <div class="clusterize">
    <div id="scrollArea" class="clusterize-scroll">
      <table class="table">
        <thead>
          <tr></tr>
        </thead>
        <tbody id="contentArea" class="clusterize-content">
          <tr class="clusterize-no-data">
            <td>Loading data…</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>

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

Я использовал бесплатную версию handsontable для больших наборов данных. См. Пример с ячейками 10000 * 100 - http://jsfiddle.net/handsoncode/Lp4qn55v/

Например, для angular 1.5:

<hot-table class="hot handsontable htRowHeaders htColumnHeaders" settings="settings"
                       row-headers="rowHeaders"  datarows="dba">
    <hot-column ng-repeat="column in Value" data="{{column.COL1}}" >
    </hot-column>
</hot-table>

См. Документацию здесь