3

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

我已经为客户端构建了一个 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 处理程序。在页面加载时通过 php 从 mysql db 生成具有适当 id 的 html 列表。

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

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

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

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

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

预先感谢，我很感激！

4

4 回答 4

1

您应该使用额外的库，例如主干和下划线堆栈（下划线具有 fenomenal 过滤和其他实用程序以及模板，并且堆栈非常适合您的目的），或者您应该考虑angular.js，它也具有更高级别的操作列表、对象、数据和 html。在 Angular 中，您可以使用 2-3 行代码实现复杂的过滤和动态 html 更新。

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

值得学习。

于 2012-12-10T23:45:17.830 回答
0

作为性能的一般提示，尝试减少 DOM 操作，如果您生成 nel HTML 代码并使用 $().html() 更改容器标签的内容，这比遍历 2000 个标签元素并更改 1000 个标签的可见性要快得多其中。

您还可以在容器上监听 click 事件，避免 2000 个事件监听器

希望这可以帮助

于 2012-12-10T23:41:35.073 回答
0

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

首先，为了解决发送的数据量问题，我创建了一个精简的 JSON 表示（查看Google Charts Datasource API以获得一个可靠的示例）（当我将它与 GZip 压缩结合使用时，这将数据减少到大约 1 MB）

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

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

最后，我对结果非常满意。现在页面加载在几秒钟内，用户喜欢他们的浏览器不会崩溃，并且该解决方案足够通用，可以轻松地将其应用于我们所有的其他报告。

于 2012-12-11T00:07:07.767 回答
0

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

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 来做到这一点呢？提交/页面刷新不会同样有效吗？可能不必要地使这复杂化。

于 2012-12-11T00:13:21.550 回答