Canvas обходит DOM на тысячах ячеек

Отрисовка сетки Life Calendar как ~4680 <div> заставляла мобильный лейаут заикаться на целую секунду при каждом ресайзе. Переход на один <canvas> свёл всё к одному проходу отрисовки вообще без затрат на лейаут.

const ctx = canvas.getContext('2d')!;
for (let i = 0; i < weeks; i++) {
  const x = (i % perRow) * cell;
  const y = Math.floor(i / perRow) * cell;
  ctx.fillStyle = i < lived ? accent : line;
  ctx.fillRect(x, y, cell - gap, cell - gap);
}

Правило, которому я теперь доверяю: за пределами пары сотен простых неинтерактивных фигур перестань тянуться к DOM-узлам. Один canvas, один цикл — и оно масштабируется до десятков тысяч ячеек без напряга.