Как оптимизировать скорость рендеринга усов при рендеринге более 8000 элементов?

Новая идея: почему бы тогда не отображать страницу постепенно? Я предполагаю, что 8500 строк — это довольно много «страниц» (конечно, около 200 «страниц» на экране 1080p), поэтому вы можете легко реализовать механизм непрерывной прокрутки, при котором вы продолжаете отображать данные небольшими фрагментами по мере необходимости.

Скажем, для начала вы начинаете рендерить первые 500 элементов (что уже много), затем, когда пользователь начинает прокручивать и приближается к 80% от общего размера прокрутки, вы рендерите 200 дополнительных строк. Вы продолжаете делать это, пока не закончатся строки для рендеринга.

В случае, если у вас есть требование, в котором говорится, что вам нужно иметь все доступное сразу (чтобы пользователи могли, например, нажать Ctrl + F), вы все равно можете попробовать рендеринг по частям: вместо того, чтобы вводить в свой шаблон весь набор данных, разбейте его. в наборах по 500 и вызывайте Усы столько раз, сколько необходимо с этими меньшими наборами. Если он по-прежнему забивается, добавьте небольшой тайм-аут между вызовами, чтобы улучшить воспринимаемую отзывчивость.

TBH, я перечитал ваш вопрос, и, похоже, большую часть вашего времени вы тратите на то, чтобы браузер вычислил макет вашей таблицы, поэтому эти предложения должны подойти для вашего случая. В крайнем случае вы можете попробовать использовать CSS table-layout: fixed;, который значительно ускорит рендеринг вашей таблицы, но также, в свою очередь, заставит вас вручную определять ширину столбцов, поскольку таблица больше не будет динамически адаптировать ширину столбцов в зависимости от ее содержимого.

Пробовали ли вы альтернативные реализации Mustache, такие как Hogan или Рули?

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

Кроме того, если вы еще не используете последнюю версию Mustache.js, вы можете просто обновить ее. Старые версии (около 1,5 лет) имели серьезные проблемы с производительностью.

Как добавить HTML-код с усами в DOM?

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

медленно, много вставок:

for () {
  table.innerHTML = table.innerHTML + Mustache.render(row);
}

быстрее, 1 вставка:

var buffer = '';
for () {
  buffer = buffer + Mustache.render(row);
}
table.innerHTML = buffer;