How to optimize the display of 100 thousand squares on one page?

To optimize the display of 100,000 squares on a single page, several approaches can be used:

• Virtualization (virtual scroll): render only the squares visible in the current viewport, and dynamically load and remove others as you scroll.
• Canvas or WebGL: instead of creating 100,000 DOM elements, use drawing on a canvas, which significantly reduces DOM load and improves performance.
• Using Web Workers: perform calculations and prepare data for squares in a separate thread to avoid blocking the UI.
• Style and rendering optimization: minimize the number of CSS effects, use will-change for optimization, avoid complex shadows and animations.

Example of virtualization with React (library 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>
);

This approach allows rendering only visible squares, significantly reducing the load.