Google Chrome 中大型（ish）html 表的缓慢滚动行为答案

【问题标题】：Sluggish scroll behaviour of large(ish) html table in Google ChromeGoogle Chrome 中大型（ish）html 表的缓慢滚动行为
【发布时间】：2017-12-22 14:43:47
【问题描述】：

我正在尝试创建一个带有滚动条的大型 HTML 表格（大约 5000 行），因此我考虑将该表格插入到 <div> 中，然后我可以随意格式化。

它在 Firefox 47 和 IE 11 中运行良好，但在 Chrome 59 中滚动时表现缓慢。

WORKING DEMO

<!DOCTYPE html>
<html>
    <head>
        <title>Test page</title>
    </head>

    <body>
        <div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div>
        <script>
            let table = '<table style="table-layout: fixed; width: 3000px">';
            table += '<thead>';
            table += '<tr>';
            for(let i=0; i < 30; i++) { 
                table += '<th style="width: 100px">#' + i +'</th>';
            }
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
            for(let i=0; i < 5000; i++) { 
                table += '<tr>';
                for(let j=0; j < 30; j++) { 
                    table += '<td>r: '+ i +' || c: '+ j +'</td>';
                }
                table += '</tr>';
            }
            table += '</tbody>';
            table += '</table>';
            document.getElementById('test').innerHTML = table;
        </script>
    </body>

</html>

但是，如果我只是将表格添加到文档正文中，滚动行为在我测试过的 3 个浏览器中是平滑的（但我只能在本地开发服务器中运行代码时观察到这种行为；如果我追加JSFiddle 中的表格到文档正文中 Chrome 的缓慢行为再次出现）。

我的问题是什么可能导致 Chrome 的这种迟缓行为，我该怎么做才能获得更流畅的滚动表？

*编辑：我已经从代码块中的<td> 中删除了style="position: relative"，因为这就是我在 Fiddle 中所做的。我正在尝试这种风格，因为我注意到当表格元素相对定位时，IE 在滚动时往往会变得迟缓。我的最终目标是创建一个带有固定/冻结标题的大型 html 表格，该表格具有可滚动的主体和大量行。

【问题讨论】：

Chrome (64) 有同样的问题，而 FF 和 Edge 没有问题。但是，将“溢出：滚动”添加到外部 div - 就像在您的示例中一样 - 解决了这个问题。无论如何：看看 slickgrid，也许正是你想要的。

标签： html google-chrome html-table

【解决方案1】：

尝试将transform: translate3d(0, 0, 0) 添加到表中。下面给出一个例子。然而，这个技巧已经过时了。关于它的帖子可以追溯到 2012 年。例如，请参阅this posting。

目前，浏览器 [...] 附带 硬件加速；他们只有在有迹象表明 DOM 元素会从中受益时才使用它。使用 CSS，最强烈的迹象是 3D 变换正在应用到元素。

在我的公司，我们几乎将它用于每个较大的列表。大多数情况下，它工作正常。另一种解决方案是虚拟化。

let table = '<table style="table-layout: fixed; width: 3000px">';
table += '<thead>';
table += '<tr>';

for(let i=0; i < 30; i++) { 
  table += '<th style="width: 100px">#' + i +'</th>';
}

table += '</tr>';
table += '</thead>';
table += '<tbody>';

for(let i=0; i < 5000; i++) { 
  table += '<tr>';
  for(let j=0; j < 30; j++) { 
    table += '<td>r: '+ i +' || c: '+ j +'</td>';
  }
  table += '</tr>';
}

table += '</tbody>';
table += '</table>';
document.getElementById('test').innerHTML = table;
document.getElementById('test2').innerHTML = table;

#test {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

<h2>With translate3d</h2>
<div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div>
<h2>Without translate3d</h2>
<div style="width: 400px; height: 300px; overflow: scroll;" id="test2"></div>

（或full snippet）

【讨论】：

抱歉耽搁了，我一直在阅读什么是虚拟化，并且一直在尝试正确实现它。这对我的文档性能有很大影响。这是WORKING DEMO。尽管如此，我的电子表格元素只有在用户拖动滚动条或在悬停固定列时使用鼠标滚轮（演示中的前 10 个）时才能平滑滚动。但是这种行为在我测试过的 3 个浏览器中并不一致。只有 Chrome 允许使用鼠标滚轮平滑滚动。
我很抱歉，但我不得不对此投反对票，原因有两个：1）在您的回答中，您说“尝试将 transform: translate3d(0, 0, 0) 添加到表中。” .但是伙计，您正在将其添加到表的父 div 中！（从某处复制？） 2）转换没有起作用，溢出：滚动是（至少在 Chrome 64 中）。
谢谢！！你拯救了我的一天。它在我的情况下工作得很好

【解决方案2】：

遇到了同样的问题。 Chrome 更新版本 75.0.3770.100（64 位）为我解决了这个问题。

【讨论】：