Minglab katakda Canvas DOM'dan ustun

Life Calendar setkasini ~4680 ta <div> sifatida chizish har bir resize'da mobil layoutni bir soniya davomida qaltiratdi. Bitta <canvas>'ga o'tish buni umuman layout xarajatisiz bitta chizish o'tishiga tushirdi.

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);
}

Endi ishonadigan qoidam: bir necha yuz oddiy, interaktiv bo'lmagan shakldan keyin DOM-tugunlariga qo'l urishni bas qil. Bitta canvas, bitta sikl — va u o'n minglab katakkacha bemalol masshtablanadi.