谷歌浏览器中大（ish）html表格的滚动行为很慢

我想用滚动条创建一个大的HTML表格（大约5000行），所以我想过在<div>里面插入那张表格，然后我可以格式化为I欣慰。谷歌浏览器中大（ish）html表格的滚动行为很慢

它运作良好，在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浏览器缓慢的行为，我能做些什么来获得更流畅的滚动表？

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

来源

2017-07-17 Moaning Neighbors

有使用Chrome（64）相同的问题，而没有与FF和边缘没有问题。然而，在你的例子中加入“overflow：scroll”到外部div - 解决了这个问题。无论如何：看看slickgrid，也许正是你在找什么。 –

尝试将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）

来源

2017-07-18 09:08:24 SVSchmidt

对不起，我一直在阅读关于什么是虚拟化，我一直在努力正确地实现它。这对我的文档性能有很大的影响。这是[** WORKING DEMO **]（https://jsfiddle.net/ddqw6tg3/3/）。不过，如果用户拖动滚动条，或者如果他在悬停固定列时使用鼠标滚轮（演示中的前10个），我的电子表格元素才会平滑滚动。但是这种行为在我测试的3浏览器中并不一致。只有Chrome才能使用鼠标滚轮进行平滑滚动。 –

我很抱歉，但我不得不对此做出回应，原因有两个：1）在答案中，您要说“尝试将变换：translate3d（0，0，0）添加到该列表中。”。但老兄，你把它添加到表格的父分区！（从某处复制？）2）转换不是做的伎俩，溢出：滚动（至少在Chrome 64）。 –

谷歌浏览器中大（ish）html表格的滚动行为很慢

回答

相关问题