Google Chrome中大（ish）html表格的滚动行为很慢 [英] Sluggish scroll behaviour of large(ish) html table in Google Chrome
问题描述
我试图用滚动条创建一个大型的HTML表格（大约5000行），所以我想将这个表格插入到< div> 中，然后我可以格式，我很高兴。
它在Firefox 47和IE 11中运行良好，但在Chrome 59中滚动时显示缓慢。
<！DOCTYPE html>
< html>
< head>
< title>测试页面< /标题>
< / head>
< body>
< div style =width：400px; height：300px; overflow：scroll; ID = 测试 >< / 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表格，该头部具有可滚动的主体，并且具有大量的行数。 尝试将 transform：translate3d（0，0，0）添加到表格中。下面给出一个例子。然而，这个伎俩正在变老。有关它的帖子已经可以追溯到2012年。例如，请参阅本帖子。
目前，浏览器提供硬体加速;他们只有在它指示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>使用translate3d< / h2>< div style =width：400px; height：300px; overflow：scroll; < / div>< h2>如果没有translate3d< / h2>< div style =width：400px; height：300px; overflow：scroll; id =test2>< / div>
$ b
或完整片段）
I am trying to create a large HTML table (around 5000 rows) with scrollbars and so I thought about inserting that table inside a <div> which I could then format as I pleased.
It works well in Firefox 47 and in IE 11 but has a sluggish behaviour on scroll in 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>
However if I just add the table to the document body, the scroll behaviour is smooth across the 3 browsers I've tested (but I could only observe this behaviour while running the code in my local dev. server; if I append the table to the document body in a JSFiddle the sluggish behaviour of Chrome reappears).
My question is what may be causing this sluggish behaviour of Chrome and what can I do to get a smoother scrolling table?
*Edit: I've removed the style="position: relative" from the <td> in the codeblock because that's how I've done in the Fiddle. I was experimenting with that style because I've noticed that IE tends to get sluggish on scroll when the table elements are positioned relatively. My ultimate goal is to create a large html table with a fixed/frozen header that has a scrollable body with a large number of rows.
Try to add transform: translate3d(0, 0, 0) to the table. An example is given below. That trick is getting old, however. Postings about it reach back to 2012 already. For instance, see this posting.
Currently, browsers [...] ship with hardware acceleration; they only use it when they have an indication that a DOM element would benefit from it. With CSS, the strongest indication is that a 3D transformation is being applied to an element.
In my company, we use it for almost every larger list. Mostly, it works fine. Another solution would be virtualization.
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>
(or full snippet)
这篇关于Google Chrome中大（ish）html表格的滚动行为很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
