大量DIV元素导致浏览器窗口resize性能卡顿问题求助

我正在为一款小型益智游戏实现点网格布局，现有脚本的小问题并非核心诉求。

核心问题：大量DIV元素导致浏览器窗口resize时性能极为卡顿，即便resize阶段未执行重绘或重定位元素操作。

已在Safari和Chrome中测试，尝试过grid布局，结果和绝对定位一致，均存在卡顿问题。需在较大窗口尺寸下生成约5000个DIV元素才能复现该问题。

想请教：是否不该使用这么多DIV？有没有优化方案或者可替代的大型元素网格实现方式？使用three.js对当前需求来说过于冗余了。

编辑：最大化窗口后重新运行代码即可复现问题，alert会显示生成的DIV数量。

代码片段 #

JavaScript #

let size = 10
let gap = 10
let cols = (window.innerWidth - gap) / (size + gap)
let rows = (window.innerHeight - gap) / (size + gap)
let col = 0
let row = 0
for (let i = 0; i < cols * rows; i++) {

  let div = document.createElement('div')
  document.body.appendChild(div)

  div.style.top = gap + row * (gap + size) + 'px'
  div.style.left = (row % 2 == 0 ? gap : 0) + gap + col * (gap + size) + 'px'
  div.style.animationDelay = (0.25 * i) + 's'

  col += 1
  if (col > cols) {
    col = 0;
    row += 1
  }
}

CSS #

div {
  position: absolute;
  background: #adadad;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

内容的提问来源于stack exchange，提问作者Zoltán Matók