javascript - 在 Javascript 中快速管理约 10k 行的表

标签 javascript performance

<分区>

我一直在处理表格和大量数据。我的网站上有一张表格,有 10,000 行。该表具有动态搜索、过滤器等功能。考虑到性能,我一直在使用纯 JavaScript,但对于如此多的行,它会变得迟缓。

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

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

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

搜索:

  1. 当字段超过 3 个字符且仅当其长度和字符发生变化时搜索(当字符发生变化时,输入的 onchange 事件可能会触发多次,因此我使用一些验证确保它只触发一次)
  2. 匹配搜索字符串的每一行都被复制到另一个表中。隐藏原来的表格,显示新的表格。
  3. 当用户更改搜索字段或取消动态搜索时,新表将被删除。
  4. 结论:创建包含所需元素的新表格比隐藏不需要的元素更快。

过滤器

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

感谢您的回复。我编辑了一些额外的信息,这样我们就可以缩小可能的解决方案...

最佳答案

我假设您从数据库中获取内容并使用 PHP 之类的东西加载(我现在假设使用 PHP)

您可以让 Javascript 对执行过滤的 php 文件进行 ajax 调用(实际上,您应该让数据库执行此操作,速度要快得多!)并将生成的表格放回屏幕上。


结合上述方法的更快方法可能是这样的:获取数组中初始行上的所有 id 并保存它们(在 session 中可能工作愉快)。

当你必须过滤时,不要让 PHP 获取整个表,只需将过滤器应用于存储的 ID,然后将匹配的行发送给 javascript。

然后让javascript做这样的事情:
- 设置所有可见
- 将结果 ID 设置为隐藏(隐藏有利于删除,因为我认为用户可能会执行多个过滤操作?)


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

关于javascript - 在 Javascript 中快速管理约 10k 行的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18132586/

相关文章:

javascript - 如何覆盖扩展组件上的类名?

javascript - 使用 jquery 更改点击时的标题文本

java - 有没有更好的方法来处理深度嵌套数据的空异常?

database - 我应该最大限度地分解关系数据库中的表吗?

mysql - sql 查询计数非常慢

javascript - 如何使用 babel-core/register 在 Node.js 中编写 ES6 代码?

Javascript 数组随机播放

javascript - 如何设置相对于其自高度度而非宽度的响应式比例图像

spring - Web 应用程序在嵌入式 tomcat 中的运行速度比在独立 tomcat 中快得多

sql - 如何获取每个设备的第一个和最后一个元素?