寻求用DIV铺满网页可视区域的代码优化方案（解决冗余DIV与性能问题）

你的问题主要出在面积计算的逻辑偏差和频繁DOM操作上，咱们一步步来优化：

1. 消除冗余元素：精准计算所需DIV数量 #

原来的面积计算没有考虑到换行导致的“剩余空间无法容纳完整box”的情况，直接用总面积除以单个box面积会多生成元素。正确的做法是计算可视区域内能容纳的列数和行数：

• 列数：Math.floor(window.innerWidth / 20)（每个box宽度20px，取整数避免半格）
• 行数：Math.floor(window.innerHeight / 20)
• 总数量：cols * rows

2. 提升性能：减少DOM操作次数 #

每次用innerHTML +=都会重新解析HTML并触发页面重排重绘，次数多了自然慢。推荐两种高效方式：

方案一：一次性拼接HTML字符串后插入 #

先把所有box的HTML字符串拼接完成，再一次性赋值给innerHTML，只触发一次DOM更新：

const boxSize = 20;
const cols = Math.floor(window.innerWidth / boxSize);
const rows = Math.floor(window.innerHeight / boxSize);
const totalBoxes = cols * rows;

let boxesHTML = '';
for (let i = 1; i <= totalBoxes; i++) {
  boxesHTML += `<div class='map-box' id='box${i}'></div>`;
}
document.getElementById('map').innerHTML = boxesHTML;

方案二：使用DocumentFragment批量添加（更推荐） #

DocumentFragment是内存中的DOM节点容器，添加元素时不会触发页面重绘，最后一次性插入到DOM中：

const boxSize = 20;
const cols = Math.floor(window.innerWidth / boxSize);
const rows = Math.floor(window.innerHeight / boxSize);
const totalBoxes = cols * rows;
const map = document.getElementById('map');
const fragment = document.createDocumentFragment();

for (let i = 1; i <= totalBoxes; i++) {
  const box = document.createElement('div');
  box.className = 'map-box';
  box.id = `box${i}`;
  fragment.appendChild(box);
}
map.appendChild(fragment);

3. 额外优化：用CSS Grid简化布局（可选） #

如果不需要给每个box单独设置id，用CSS Grid可以完全省去JS的循环逻辑，直接让容器自动铺满可视区域，性能最优：

<body>
  <div id='map'></div>
</body>

#map {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fill, 20px);
  grid-template-rows: repeat(auto-fill, 20px);
  gap: 0; /* 去掉间隙，和原来的border配合 */
}

.map-box {
  width: 20px;
  height: 20px;
  border: 1px solid grey;
}

这样#map会自动生成刚好铺满可视区域的20px×20px的box，完全不需要JS计算，既解决冗余又极致高效。

内容的提问来源于stack exchange，提问作者AD-1