个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我正在尝试创建一个带有滚动条的大型 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>在代码块中，因为这就是我在 fiddle 中所做的。我正在尝试这种风格，因为我注意到当表格元素相对定位时，IE 倾向于在滚动时变得迟缓。我的最终目标是创建一个带有固定/卡住标题的大型 html 表格，该表格具有包含大量行的可滚动主体。
最佳答案
尝试将 transform: translate3d(0, 0, 0) 添加到表中。下面给出了一个例子。然而，这个技巧已经过时了。关于它的帖子可以追溯到 2012 年。例如，参见 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.
在我的公司，我们几乎将它用于每个较大的列表。大多数情况下，它工作正常。另一种解决方案是虚拟化。
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)
关于html - 谷歌浏览器中大型(ish)html 表格的缓慢滚动行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45154788/
25
4
0
可以用这种方式转换字符串吗？我们有相同的参数，Java 做出了正确的选择。如果值是整数 - 我们调用 parseInt(value)，否则如果值是 double 型 - 我们调用 parseDoubl
如果这段代码中有一个愚蠢的错误，我提前道歉，但我似乎无法解决它。我的问题是这样的，我用GCC-8(通过home-brew安装在Mac上)编译，然后在终端中执行。当使用 int do 定义变量 s &
我用 a-videosphere 制作了一个 a-scene。我尝试使用按钮启用/禁用声音，但有些想法不起作用？这是我的代码: var gargamel = 0; function
我正在使用 ISAAC 实现来生成随机整数。我需要用这些整数创建一个高斯值。首先，我需要将它们从 0 更改为 1 的 double 值。我怎样才能在Java中做到这一点？这是到目前为止我将整数转换为
我将 0x0000 到 0x01c2 范围内的十六进制值从 BLE 获取到我的手机 a 作为字符串。为了将其绘制在图表中，我必须将其转换为 double，我已经尝试过 this method但遗憾的是
我有一个父类(super class) Animal和一个子类 Dog 。在第三节课中，我有一个 List它同时接受子类型和父类(super class)型对象。 public class foo{
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 6 年前。 Improve this ques
我正在尝试查询我的用户的距离。我可以用这段代码做到这一点 PFGeoPoint.geoPointForCurrentLocationInBackground { (geoPoint: PFGe
考虑示例:http://jsfiddle.net/KWLu7/16/ 我正在尝试将总体重要性值计算为每个选定选择重要性的总和乘以其父标准重要性: var watch = $scope.$watch("
这个问题在这里已经有了答案: Bounding generics with 'super' keyword (6 个答案) 关闭 2 年前。 我有一个列表装饰器，它应该允许从一个列表转换到另一个列表
为什么下面的代码没有选择最近父类(super class)型的隐式 val？ class A class B extends A trait TC[-T] { def show(t: T): Stri
这是我想要做的 def merge[A, B, C](eithers: Either[A,B]*)(implicit ev1: A x, x => x)) 关于scala - 推断常见的父类(s
我正在尝试从具有 double 类型列的Cassandra表中获取 double 值。我已经使用CQL3语法创建了表: CREATE TABLE data_double ( datetime
是否应该在不需要显式类型定义的情况下编译以下 this ? def prepList[B >: A](prefix: PlayList[B]) : PlayList[B] = prefix.fol
我正在查看某人的代码，并且在创建结构时使用了 abstract type AbstractFoo end julia> struct Foo1 struct Foo2 foo_op(x::Abst
一些示例代码: public class Main { class SomeType { } class A { protected T createSome
是否可以只接受类的泛型类型的父类(super class)型？ 我正在寻找的是这样的: class MyClass { public void myMethod(TS someObject
在我的代码中，我有许多 ArrayList 被传递到排序方法中。每个 ArrayList 都有不同的泛型类型，但所有这些类型都是 Sorter 的实现。排序方法旨在接受 Sorter 类型的 Arra
如果已经有人问过这个问题，请链接并关闭这个问题。 我目前正在为另一个使用起来复杂得多(并且有潜在危险)的 API 的简化 API 设计原型(prototype)。 考虑到相关的有点复杂的对象创建，我决
我正在尝试构建一个具有某些依赖项的 android 应用程序，但是其中一个导致了此错误: Illegal class file: Class module-info is missing a supe
我是一名优秀的程序员,十分优秀！