- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在处理带有大表格的网络应用程序的页面。在某些情况下,12 列和多达 300 行。我很难让表格在 Internet Explorer 中快速呈现。我已经在这段测试代码中复制了我的困难:
在具有 4GB RAM 的英特尔四核 Q8200 上使用 IE9 进行的一些基准测试:
50 行,12 列:432 毫秒
100行12列:1023ms
200行12列:2701ms
400 行,12 列:8107 毫秒
800 行,12 列:24619 毫秒
呈指数级下降。
我设法挖掘出一些代码可以在 Internet Explorer 上更快地呈现相同的测试表,但是因为我使用 mustache.js 模板来呈现我的单元格和行(将所有 HTML 标记保留在我的 JavaScript 之外),我我无法使用这些 DOM 方法:
基准测试结果:
50 行,12 列:37 毫秒
100 行,12 列:72 毫秒
200 行,12 列:146 毫秒
400 行,12 列:324 毫秒
800 行,12 列:566 毫秒
我无法像第二个示例那样逐 block 构建表格,因为使用客户端模板我需要注入(inject)由 mustache 返回的 HTML 字符串。如果您开始在其中粘贴 .innerHTML,性能将再次下降。
任何人都可以推荐一种以更有效的方式构建表格并符合客户端模板使用的方法吗?
分页是解决这个问题的一种方法,但我想自己解决这个问题。
非常感谢任何建议!
最佳答案
首先,我建议将字符串的创建与表的实际创建分开,因为它会产生渲染时间方面的开销。接下来,您应该尝试在将其附加到正文之前创建整个表格,以最大程度地减少重绘/回流的数量。最后,我建议在 IE 中加入一个数组,因为该浏览器中的字符串连接会为每个副本重复分配越来越大的内存块。当您使用数组连接时,浏览器只会分配足够的内存来容纳整个字符串。
var strings = [],
table = ['<table>'],
i, j;
for (i = 0; i < 1000; i += 1) {
strings[i] = [];
for (j = 0; j < 12; j += 1) {
strings[i][j] = randomString();
}
}
var start = new Date().getTime();
for (i = 0; i < 1000; i += 1) {
table.push('<tr>');
for (j = 0; j < 12; j += 1) {
table.push('<td>', strings[i][j], '</td>');
}
table.push('</tr>');
}
table.push('</table>');
$('body').append(table.join(''));
var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time + 'ms');
使用此方法,我在 IE9 中得到以下结果:
100 rows is ~9ms
200 rows is ~19ms
500 rows is ~51ms
1000 rows is ~119ms
5000 rows is ~526ms
我相信我们可以进一步优化它,但这应该足以容纳多达 300 行(~30 毫秒),这正是您所说的目标。对于任何 UI 交互,它还保持在 ~50 毫秒以下的 chalice 基准之下。
关于javascript - Internet Explorer 呈现通过 JavaScript 生成的表格的速度很慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9390175/
我在想出一个算法时遇到了麻烦... 我有一系列 GPS 数据,以 1 秒为间隔记录时间、速度、距离。假设距离是米,速度是米/秒。可能有超过 2 小时的数据,或 7200 个点。这里的“时间”字段主要是
使用java排序器,即: Collections.sort(myArrayList, new Comparator() { @Override public int c
有什么区别吗 SELECT * FROM my_table 和 SELECT my_column_id FROM my_table 地点: my_table 有百万行 网站上有大量并发用户进行sql查
有2个样本。 在第一个示例中,使用 orderby 可以更快地获得结果。 (根据 phpmyadmin 速度报告) 在另一个例子中,我没有使用 order by,它给出的结果较慢。 (根据 phpmy
我注意到,如果我将训练数据加载到内存中并将其作为 numpy 数组提供到图中,与使用相同大小的 shuffle 批次相比,速度会有很大差异,我的数据有大约 1000 个实例。 使用内存 1000 次迭
我在 python 中使用破折号。我正在绘制记录到 SQLite 数据库中的实时数据,目前,我正在绘制单个值与时间线图。我计划再添加 20 个图表,但目前,随着时间的增加, plotly 变慢,我认为
我试图调用 hasNext Velocity 模板中的方法,以便根据 foreach 循环中的位置影响行为 - 仅 hasNext没有按照文档工作。 这是 Velocity 用户指南的片段,关于 ha
在我正在制作的游戏中,我有两个点,pt1 和 pt2,我想计算出它们之间的角度。我已经在较早的计算中计算出距离。显而易见的方法是对垂直距离上的水平距离进行反正切 (tan(theta) = opp/a
我经常遇到字符串值不存在和/或为空的情况。这是测试这种情况的最佳方法吗? #if( $incentive.disclaimer && $!incentive.disclaimer != '' )
我想将一个模板nested包含在其他模板cont1,cont2和cont3中。 并且嵌套模板应仅对cont1隐藏一个特定控件。 在包含在cont1中之前,我想为一些标志变量$hideMyControl
是否可以更改从“Windows Azure Media Encoder”输出的音频的播放速度? 我正在使用配置为“WMA High Quality Audio”的“Windows Azure Medi
我使用速度将String(template)与字段合并 hi there I'am ${name}, And I'am ${age} old. velocity将字段${name}和${age}与一种
我使用的是 LockedBitmap 类,它简化了 C# 中位图数据的处理。目前它正在将数据复制到本地 byte[] 数组中,然后通过其类方法访问该数组以获取/设置像素颜色值。 这比直接通过指针访问锁
我尝试在 VM_global_library.vm 文件中添加一堆 #set($x=abc) 语句,但这些变量在我的 VM 模板中不可用。 我想为图像的基本路径等设置一个全局变量。这可能吗? 最佳答案
我的项目结构: -src --main ---java ----makers -----SomeClass ---resources ----htmlPattern.vm 如何告诉 SomeClass
我正在尝试从 Velocity 中的字符串中删除不需要的字符(换行符可以,但不能像 EM 和 CAN ASCII 控制字符那样)。 #set($cleanScreen = $cleanScreen.r
我想在日.月.年之间的点处分割日期。例如:2015 年 1 月 14 日至 {14, 01, 2015}这是我使用的代码:dates3.get(0) 包含我从页面的文本字段获取的字符串“14.01.2
之后,从 1.5 升级到速度引擎 1.7 出现了 1.5 没有的问题。为了解释这个问题,我必须展示一个代码片段: #foreach($someVariable in $someCollection)
我想知道从表中选择所有字段是否更快: SELECT * 或只选择您真正需要的: SELECT field1, field2, field3, field4, field5... 假设表有大约 10 个
我正在尝试模仿照片应用程序的行为,在该应用程序中,用户用手指平移照片并且照片具有一定的速度。由于我不会深入的原因,我不能将 UIScrollView 与它的缩放 UIImageView 一起使用,而是
我是一名优秀的程序员,十分优秀!