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 db生成的。

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

使用JSON并在收到结果后从html列表中删除所有项目会更好，然后生成通过JSON对象和jQuery从db中过滤掉的新html项目。

我在问，因为我知道有些浏览器不能很好地处理很多HTML的压力（尤其是IE）。

当我得到很多结果时，比如说超过1000，所有浏览器往往会滞后一点，可能是因为他们正在浏览所有项目并重新显示项目（.show()）。如果用户在短时间内触发过滤，则用户体验很糟糕。

所以，从性能的角度来看，你们认为加载JSON并不断生成和删除html，或者我现在设置的方式（显示/隐藏方法）会更好吗？我是JSON的新手，所以当涉及到大量数据时，我对它的性能方面并不十分熟悉。

提前致谢，我很感激！

Answer 1

您应该使用其他库，例如 backbone＆amp; amp;下划线堆栈（下划线有fenomenal过滤和其他实用程序，模板，堆栈非常适合您的目的），或者您应该考虑 angular.js ，它也有更高的级别对列表，对象，数据和操作的操作HTML。在角度你可以实现复杂的过滤和动态html更新可能需要2-3行代码。

在任何情况下，无论性能如何，都不要使用html <li>项，请使用数据。我建议的这些库将使更多更简单＆amp;更快。

值得学习。

Answer 2

作为性能的一般提示尝试重新编写DOM操作，如果生成一个nel HTML代码并使用$（）。html（）更改容器标记的内容，它比遍历2000标记元素并更改其中1000个的可见度。

您还可以收听容器上的click事件，避免使用2000个事件侦听器

希望这有帮助

Answer 3

我有一个HTML + JavaScript网络应用，其网页包含多达50,000行，每行包含唯一数据。在我继承的原始代码中，服务器将生成完整标记（大约30MB的HTML），然后每次更改某些过滤器约束时生成过滤列表（再次在服务器上）。性能非常糟糕，以至于页面默认为过滤最多（且最少用）的视图，并包含一个警告，扩展结果仅适用于现代计算机。以下是我修复它的原因以及为什么我做出了各种选择。

首先要解决发送的数据量我创建了一个精益JSON表示（看看Google Charts Datasource API以获得一个可靠的例子）（当我将数据合并时，这会将数据减少到大约1 MB GZip压缩）

接下来的问题是，一个包含50,000行（每个包含4个单元格）的表创建了250,000个DOM节点（每个<tr>和<td>是一个节点），这对Selector引擎来说是一个巨大的负担和渲染管道。为了解决这个问题，我通过AJAX获取了JSON并将其结果存储在AJAX fetch函数之外的变量中。然后我编写代码来使用这个缓存的数据并在页面中呈现它（因此页面更改事件不会返回到服务器）。我每页播放的最佳行数（500似乎最符合我的需求）。至于隐藏诗句重建，我说重建。当你要隐藏的东西数量增加时，隐藏特定细胞的性能提升很快就会消失。

最后因为页面上的每个节点都不可见，所以查找 Ctrl + F 之类的内容会被破坏。为此我创建了一个过滤的渲染函数，因此可以使用页面UI处理表过滤（这使我可以执行基于特定列的查找，甚至可以使用未在表中呈现但通过JSON传递的数据）。另一个挑战是打印，因为没有一个页面可以直观地显示所有内容。为了解决这个问题，我做了一些更复杂的事情。使用MemcacheD我将过滤后的结果存储在服务器上，并添加了一个导出到PDF的按钮，该按钮将获取结果集的缓存副本（您必须调整MemCacheD以存储大于1MB的内容）。从用户的角度来看，PDF（由我可以控制的服务器生成）可能比我无法控制的浏览器受到更多惩罚。

最后我对结果非常满意。现在页面加载，用户喜欢他们的浏览器不会崩溃，而且解决方案非常通用，很容易将其应用到我们所有其他报告中。

Answer 4

而不是在客户端过滤这个，为什么不在服务器端生成列表并将其发送到客户端？

HTML

<div id="bigAssList">
   <ul>
      <li></li>
      A billion rows...
   </ul>
</div>

JS

$.ajax( {
   url: 'someurl.php',
   data: someFilterCriteria,
   success: function( response ) {
      $( '#bigAssList' ).html( response );
   }
} );

PHP

// query based on filter criteria
// output list in ul html form

甚至比这更好，为您的数据加上页面。我怀疑任何人在一个页面上需要2000行。为什么要使用Ajax呢？提交/页面刷新不一样有效吗？可能会使这种情况不必要地复杂化。

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

4 个答案: