如何在不显示HTML内容时用JavaScript测量并优化元素布局？

核心解决思路：让元素"后台渲染"但不显示 #

直接用display: none确实无法获取真实尺寸，因为元素不会被浏览器渲染。但可以通过以下方式让元素在后台完成布局计算，同时不影响页面可视布局：

• 绝对定位移出视口：给元素设置position: absolute; left: -9999px; top: -9999px; visibility: hidden;，元素会正常渲染计算尺寸，但不会出现在可视区域，也不占用布局空间。
• 透明化+绝对定位：opacity: 0; position: absolute;，同样能完成渲染并获取尺寸，只是完全透明不可见。
• visibility: hidden配合绝对定位：单纯visibility: hidden会保留元素布局空间，必须结合绝对定位脱离文档流，才不会干扰页面布局。

针对你的两个场景的具体实现 #

1. 窗口自适应双栏分页布局 #

• 先将双栏容器放入隐藏的后台渲染容器，获取容器的offsetWidth、offsetHeight以及内容总滚动高度。
• 根据当前窗口的innerWidth、innerHeight，计算单页能容纳的内容高度，切割内容后生成对应分页的双栏容器。
• 所有计算完成后，再将处理好的分页容器设置为正常显示状态。

2. 表格最优尺寸（最小化周长） #

• 把目标表格克隆到后台隐藏容器中，初始化设置一个基础宽度（比如父容器的最大可用宽度）。
• 通过JavaScript动态调整表格宽度，同时记录对应的高度（用scrollHeight或offsetHeight），计算当前周长（宽+高）。
• 遍历合理的宽度范围（比如从所有列最小宽度总和到父容器最大可用宽度），找到周长最小的尺寸组合，再将原表格设置为该尺寸后显示。

关键代码示例 #

// 创建后台测量容器
function createMeasuringContainer() {
  const container = document.createElement('div');
  container.style.cssText = 'position: absolute; left: -9999px; top: -9999px; visibility: hidden;';
  document.body.appendChild(container);
  return container;
}

// 寻找表格的最优尺寸
function findOptimalTableSize(table) {
  const measurer = createMeasuringContainer();
  // 克隆表格并放入测量容器
  const clonedTable = table.cloneNode(true);
  measurer.appendChild(clonedTable);
  
  let minPerimeter = Infinity;
  let optimalWidth = 0;
  let optimalHeight = 0;
  
  // 计算最小宽度（所有列内容的最小宽度总和）
  const minWidth = Array.from(clonedTable.querySelectorAll('td')).reduce((sum, td) => sum + td.scrollWidth, 0);
  // 最大宽度取窗口宽度的80%作为示例，可根据实际父容器调整
  const maxWidth = window.innerWidth * 0.8;
  
  // 遍历宽度范围，寻找最小周长
  for (let width = minWidth; width <= maxWidth; width += 10) {
    clonedTable.style.width = `${width}px`;
    const height = clonedTable.scrollHeight;
    const perimeter = width + height;
    if (perimeter < minPerimeter) {
      minPerimeter = perimeter;
      optimalWidth = width;
      optimalHeight = height;
    }
  }
  
  // 清理测量容器
  measurer.remove();
  return { width: optimalWidth, height: optimalHeight };
}

// 使用示例
const targetTable = document.getElementById('target-table');
const optimalSize = findOptimalTableSize(targetTable);
targetTable.style.width = `${optimalSize.width}px`;
targetTable.style.height = `${optimalSize.height}px`;
targetTable.style.display = 'table'; // 显示处理后的表格

注意事项 #

• 克隆元素时要确保样式正确继承，可通过getComputedStyle获取原元素样式后设置给克隆元素。
• 如果元素包含图片等动态资源，需等待资源加载完成后再测量（比如监听img.onload或DOMContentLoaded事件）。
• 后台测量容器用完后要及时移除，避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者Gunther Schadow