Question

我正在尝试使用滚动条创建一个大型HTML表格（大约5000行），因此我考虑将该表格插入<div>中，然后我可以按照我的喜好进行格式化。

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

<!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的这种低迷行为，我该怎么做才能获得更顺畅的滚动表？

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

Answer 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）

Answer 2

有同样的问题。 Chrome Update版本75.0.3770.100（64位）为我解决了此问题。

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

2 个答案: