javascript - 具有大量数据的 JSON/jQuery 性能

Question

这是我在这个网站上的第一个问题，希望有经验的人能给我一些建议。

我为客户端构建了一个 javascript/jquery 应用程序，它的主要功能是某些项目的过滤机制。大约有 2000 个这样的项目存储在这样的列表中:

<ul>
<li id='3000429'>Item</li>
<li id='3000429'>Item</li>
<li id='3000429'>Item</li>
<li id='3000429'>Item</li>
</ul>

为此，大约有 2000 行 html，我删除了 <li> 的 onClick 处理程序用于演示目的的元素。具有适当项目 ID 的 html 列表是在页面加载时通过 php 从 mysql 数据库生成的。

我现在做的是从我的数据库中过滤我的结果并首先隐藏所有项目，然后一旦我通过 ajax 从 PHP 返回计算结果，这是一个 id 数组，我然后只显示 id 是的项目在结果数组中(使用 jQuery 的 .show() 和 .hide() )。所以所有项目始终存在于代码中，只是有些项目被隐藏了。

使用 JSON 并在收到结果后从 html 列表中完全删除所有项目，然后生成新的 html 项目，这些项目通过 JSON 对象和 jQuery 从数据库中过滤掉会更好吗？

我问是因为我知道有些浏览器不能很好地承受大量 html 的压力(尤其是 IE...)。

当我返回很多结果时，比如超过 1000 个，所有浏览器都会有点滞后，可能是因为它们正在检查所有项目并重新显示项目 (.show())。如果用户在短时间内触发过滤，用户体验就会很糟糕。

那么，从性能的 Angular 来看，你们认为加载 JSON 并不断生成和删除 html 还是我现在设置它的方式(显示/隐藏方法)会更好？我是 JSON 的新手，所以当涉及到大量数据时，我不太熟悉它的性能方面。

提前致谢，非常感谢!

Answer 1

你应该使用额外的库，比如 backbone & underscore stack(underscore 有 fenomenal filtering & other utilities 和 templating，stack 非常适合你的目的)，或者你应该考虑 angular.js，它对列表、对象、数据和 html 也有更高级别的操作。 在 Angular 中，您可以使用 2-3 行代码实现复杂的过滤和动态 html 更新。

无论如何，不​​管性能如何，不要用html来做<li>项目，用数据来做。 我建议的这些库将使它更更简单和更快。

值得学习。