Chrome中的CSS网格布局似乎无法正常运行超过1000行

Question

我使用"CSS Grid Layout"和"sticky position"技术创建了一个带有固定标题的滑动网格示例.为方便起见,网格的内容是由脚本生成的,我觉得它很好用.

function fillGrid(selector, rows) {
  let cols = 3;
  let grid = $(selector);
  
  grid.empty();
  
  //cr header
  grid.append($('<div>').addClass('hcr').text('#'));
  
  //col headers
  for (let c = 1; c <= cols; c++) {
    grid.append($('<div>').addClass('hc').text(`Column ${c}`));
  }
  
  for (let r = 1; r <= rows; r++) {
    //row header
    grid.append($('<div>').addClass('hr').text(r));
    
    //cells
    for (let c = 1; c <= cols; c++) {
      grid.append($('<div>').addClass('c').text(`Cell ${r}-${c}`));
    }
  }
}

$('#reload').click(e => {
  var rows = Number.parseInt($('#rows').val());
  fillGrid('#grid1', rows);
})

$(document).ready(function() {
  fillGrid('#grid1', 10);
});

body {
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
}

.grid {
  display: grid;
  width: 600px;
  height: 300px;
  grid-template-columns: 40px 200px 100px 500px;
  grid-auto-rows: min-content;
  border: 1px solid #ccc;
  overflow: scroll;
  margin-top: 20px;
  background-color: #aaa;
  margin-right: 10px;
}

.hcr, .hc, .hr {
  background-color: #ddd;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 2px;
  position: sticky;
}

.hcr {
  top: 0;
  left: 0;
  z-index: 1;
  text-align: center;
}

.hc {
  top: 0;
  white-space: nowrap;
}

.hr {
  left: 0;
  text-align: center;
}

.c {
  padding: 2px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="rows" value="10" />
  <input type="button" id="reload" value="Reload" />
</div>
<div class="grid" id="grid1"></div>

网格最多可达999行.当加载超过999行时,仅显示直到行999的单元格,而后面的单元格错误地位于行999的标题上方的左侧.

相同的示例在Firefox 56和Edge 16(版本16299)中正常工作.

我哪里错了？

Answer 1

好的,出于稳定性和RAM消耗的原因,有意将1000行(以及1000列)限制引入Chrome引擎.新版本的网格功能似乎正在进行中,应该可以解决问题.

资料来源:

• https://bugs.chromium.org/p/chromium/issues/detail?id=688640
• https://github.com/w3c/csswg-drafts/issues/1009

Answer 2

我制作了一支笔，可以解决此问题：10K Rows CSS Grid Table

简而言之 - 解决方案是仅根据滚动位置渲染可见行。不可见的行应替换为接收其总高度的单个“间隙填充”行。这种技术称为虚拟化或窗口化。

为了使其“乐观”，该间隙填充行还应该接收一个模拟水平行线的渐变背景，使其看起来好像这些行在那里（因为当用户滚动时该行将短暂可见，而我们不这样做）不希望它是空白的）。

在性能方面，应用此解决方案时，100 行表的性能与 10K 行表的性能完全相同。

例如：

<div class="table">
  <div class="gap-before" 
       style="height: {{total height of rows before the visible rows}}">
  <!-- visible rows go here -->
  <div class="gap-after" 
       style="height: {{total height of rows after the visible rows}}">
</div>