Moa*_*ors 7 html google-chrome html-table
我正在尝试使用滚动条创建一个大型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表,该标题具有可滚动的主体和大量行.
尝试添加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>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>（或完整片段）