Как оптимизировать отображение 100 тысяч квадратиков на одной странице?

Для оптимизации отображения 100 тысяч квадратиков на одной странице можно использовать несколько подходов:

• Виртуализация (виртуальный скролл): отрисовывать только те квадратики, которые видны в текущем viewport, а остальные — динамически подгружать и удалять по мере прокрутки.
• Canvas или WebGL: вместо создания 100 тысяч DOM-элементов использовать рисование на canvas, что значительно снижает нагрузку на DOM и улучшает производительность.
• Использование Web Workers: для вычислений и подготовки данных квадратиков использовать отдельный поток, чтобы не блокировать UI.
• Оптимизация стилей и рендеринга: минимизировать количество CSS-эффектов, использовать will-change для оптимизации, избегать сложных теней и анимаций.

Пример использования виртуализации с React (библиотека react-window):

import { FixedSizeGrid as Grid } from 'react-window';

const Cell = ({ columnIndex, rowIndex, style }) => (
  <div style={{ ...style, backgroundColor: 'lightblue', border: '1px solid #ccc' }}></div>
);

const Example = () => (
  <Grid
    columnCount={1000}
    rowCount={100}
    columnWidth={20}
    rowHeight={20}
    width={800}
    height={600}
  >
    {Cell}
  </Grid>
);

Такой подход позволяет отрисовывать только видимые квадратики, значительно снижая нагрузку.