我正在尝试创建一个带有滚动条的大型 HTML 表（大约 5000 行），因此我考虑将该表插入到<div>然后我可以随意格式化。
它在 Firefox 47 和 IE 11 中运行良好，但在 Chrome 59 中滚动行为缓慢。
工作演示 https://jsfiddle.net/ocbno8Lt/
<!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 年。例如，参见这个帖子 http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.
目前，浏览器 [...] 附带硬件加速;他们仅在有迹象表明 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>
(or 完整片段 https://jsfiddle.net/rdqdxhsk/1/)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
