3

我一直在处理表格和大量数据。我的网站上有一张有 10000 行的表格。该表具有动态搜索、过滤器等。考虑到性能，我一直在使用纯 JavaScript，但是对于这么多的行，它会变得迟钝。

你们知道性能更好的纯 JavaScript 的替代品吗？

编辑> 我真的需要一次加载 10000 行。我可以在 5 秒内将它们全部加载到浏览器中。主要问题是过滤器和搜索...

EDIT2> 搜索是动态的。我可以按名称搜索并按第一个字符过滤它。我已经为此工作了几个月...

搜索：

  1. 当字段超过 3 个字符并且仅在其长度和字符发生更改时搜索（输入上的 onchange 事件可能会在字符更改时触发多次，因此我确保它仅使用某些验证触发一次）
  2. 与搜索字符串匹配的每一行都被复制到另一个表中。原始表被隐藏，新表被显示。
  3. 当用户更改搜索字段或取消动态搜索时，新表将被删除。
  4. 结论：创建具有所需元素的新表比隐藏不需要的元素更快。

过滤器

  1. 这些行实际上在 25 个表中（A 到 Z + 非字母字符）
  2. 当您选择一个字符时，仅显示该表
  3. 结论：隐藏整个表格比隐藏不需要的行更快

感谢您的回复。我已经编辑了一些额外的信息，所以我们可以缩小可能的解决方案......

4

4 回答 4

4

我假设你从数据库中获取内容并使用 PHP 之类的东西加载（我现在要假设 PHP）

您可以让 Javascript 对执行过滤的 php 文件进行 ajaxcall（实际上您应该让数据库执行此操作，速度要快得多！）并将结果表放回屏幕上。

结合上述方法的一种更快的方法可能是：获取数组中初始行上的所有 id 并保存它们（在会话中可能工作愉快）。

当您必须过滤时，不要让 PHP 获取整个表，只需将过滤器应用于存储的 id 并将匹配的行发送给 javascript。

然后让javascript做这样的事情：
- 设置所有可见
- 将结果ID设置为隐藏（隐藏以支持删除，因为我认为用户可能会执行多个过滤操作？）

另一个想法突然出现在我的脑海中：如果您不需要在加载时显示它，您可以开始初始加载，隐藏所有表格并显示“请搜索显示”消息。

于 2013-08-08T17:47:55.330 回答
1

处理这种情况的一种常用技术是将数据加载到内存或数据子集中，并回收您的表行，这样您实际上就不会创建成千上万的行。你可以通过这个来发挥创意，创建一个看似无限滚动的 Web 界面，但实际上你只是重用 dom 元素并将它们随机播放。

大多数精心构建的数据网格小部件，无论它们是在网络、移动设备还是桌面界面上，都将采用这种技术来处理您的特定问题。

在大多数情况下，无论如何，用户永远不会真正从一次查看数十万行数据中受益。

于 2013-08-08T17:53:33.397 回答
0

只从服务器获取用户可以看到的东西，就像每个人都指出的那样，该页面上不需要有 10,000 行。

您可以使用分页的概念， 并为每一页获取并显示几行。JQuery 的 Ajax 能够调用服务器端函数来获取行以将它们添加到您的页面。

这里不知道任何后端细节，但是在struts 框架中有display:table标签，我相信在.NET 框架中有GridView用于客户端的分页，您可以查看

于 2013-08-08T18:15:49.453 回答
-1

我只是一个学生，刚加入社区。拿我说的话持保留态度。

当我们以千兆字节为单位测量现代个人计算机的内存时，我不确定为什么每个人都对一万行业务如此眨眼。

好吧。我将假设您正在做的事情需要在浏览器中完成，因此您不能切换到执行本机代码。在这种情况下，寻找 Javascript 的替代品不会让您有任何收获。在浏览器的上下文中，您正在查看一种解释性语言。就程序最终必须运行的指令数量而言，面对解释需要多长时间，一种语言或另一种语言之间的差异可以忽略不计。此外，多年来，Javascript 已经得到了很好的改进。

所以别介意。这里有一个更重要的事情要考虑，它适用于无论你在什么地方编程：缓存。Igor Ostrovsky 解释得很漂亮；阅读它，直到你理解它。

所以我猜你有一些对象会变成类似的东西，"obj1 = {field-1:'a', field-2:'b', ..., field-n:'n'}". 您可以选择一个field-i进行排序。这样做的问题是，当您按 排序时field-i，您将整个加载obj1到缓存中，即使您不需要它。您真正想要做的是一次加载所有的field-i's obj1, obj2, obj3, ..., objm。因此，您查看一个数组，将其字符串化为："field1 = [refToRow1, field1inRow1, refToRow2, field1inRow2, ..., refToRowM, field1inRowM]"。

毕竟，您可能无法将所有 M 行都放入缓存中M==10000！但是您可以将它们组合成您可以合理地期望缓存来管理的块。有人有这个好号码吗？比如说，64kB？所以你认为你有一个引用i，M以及一个可能只是对短字符串的引用的字段（如果你可以在那里拥有字符串本身会更好，但我不认为 Javascript 有效方法）。那是8B？8B*1024 = 64kB？地狱，如果那是正确的，您可以将其全部放入缓存中，分成两块，这意味着您希望在 4 中完成。

所以现在你有一个更小的数组的集合，你想对它们进行排序。这是B-trees的经典应用。虽然为表中的每一列都有一个单独的 B 树可能看起来很多，但事实并非如此。

好的，这样就可以处理排序了。你告诉它按列排序，事实是它已经排序了！您只是使用不同的 b 树重新填充可见表。您仍然需要处理过滤，但这很好。当您找到要显示的内容并按照参考获取其他字段时，您会做一些缓存杂耍，但我仍然希望这会很快，因为您跳过了这么多行。

通常，我会说，如果您想加快速度，请研究多处理。但我认为浏览器仍在努力通过其 Javascript 实现来实现这一目标。另外，虽然它非常适合排序，但要使它对过滤部分有用，需要付出很多努力，我希望你可以不用它也能做得很好。

我希望这不是太漫不经心，它会给你一些想法。祝你好运！

于 2013-08-08T20:53:01.527 回答