在 html 中显示大量列的最佳方法

Question

我想在 html 中显示大量列（> 10k 列和最多 200-300 行）以显示计划。

内容将是一些可移动的块，其中包含一些文本和背景颜色。

一个table/tr/td可以显示这么多的列吗？ table/tr/td 可以显示的最大列数或行数？

或者你会使用画布吗？还有其他解决这个问题的建议吗？ 显示如此大的表格的最佳方式是什么（滚动时性能出色......）？

Answer 1

有了这么多的列和行（至少代表大约 3,000,000 个条目），您可能会不惜一切代价避免用这些填充 DOM，因为任何更改都会触发重排，在这种情况下会花费大量时间。上面的数字也适用于条目，如果每个条目需要 100 个字节来表示您已经达到浏览器必须管理的大约 280 mb。

通常您会缓冲绘图，以便仅在屏幕上绘制/显示可见部分。这当然意味着您必须为此实现自定义管理器。是在画布上绘制还是谨慎使用 DOM 元素取决于您。

这么多列的一个挑战是获得一个足够详细的滚动条来表示单个列，它可能不会（滚动条上的箭头按钮除外），或者您需要一个非常宽的要渲染到的屏幕区域。

除此之外，您还必须考虑通过仅将数据块加载到缓冲区中来缓冲数据本身。该缓冲区需要多大取决于许多因素，包括连接速度、服务器、位置、数据类型、浏览器、范围等。我不建议将此数量加载到内存中，因为它会严重影响客户端系统的资源。

下面给出的示例只是渲染原理（缓冲）的粗略实现，以说明我的意思（在“整页”中运行它以访问用于演示的滚动条）：

var ctx = c.getContext("2d"),
    rowWidth = 70,                           // max width of each column
    count = Math.ceil(c.width / rowWidth),   // number of rows that fit
    entries = 10000,                         // demo
    rows = 19,
    columns = [];

// Create some dummy columns and row (10,000 x 19)
for(var x = 0; x < entries; x++) {
  var row = [];
  for(var y = 0; y < rows; y++) row.push(Math.round(Math.random() * 10000));
  columns.push(row);
}

// calc scroller size in pixels
document.querySelector("dummy").style.width = (entries * rowWidth) + "px";

// handle updates
document.getElementById("scroll").onscroll = function() {render(+this.scrollLeft)};

// Render rows based on scroller position (rough calcs just for demo)
function render(scrollX) {
  var first = Math.floor(scrollX / rowWidth);  // first row to display
  ctx.clearRect(0,0,c.width,c.height);
  
  // render based on scroller offset and how many rows fit into canvas
  for(var x = first, offset = 0; x < first + count; x++, offset += rowWidth) {
    if (columns[x]) {
      ctx.fillText("Header " + x, offset, 15);
      for(var y = 0; y < rows; y++) ctx.fillText(columns[x][y], offset, y * 20 + 35);
    }
  }
}
render(0);  // initial render

#c {background:#ddd}
#scroll {
  max-width:700px;
  overflow-x:scroll;
  height:16px;
  }
dummy {display:inline-block}

<div>
  <canvas id=c width=700 height=400></canvas>
  <div id=scroll><dummy></dummy></div>
</div>