jquery isotope如何处理大数据集
Posted
技术标签:
【中文标题】jquery isotope如何处理大数据集【英文标题】：how to deal with large data sets with jquery isotope 【发布时间】：2012-02-21 07:33:26 【问题描述】：我计划使用伟大的同位素插件来显示联系人列表，然后允许它们被过滤。我遇到的问题是它适用于小型数据集，但我不确定将其扩展到 1000 多条数据的最佳方法。
到目前为止，我的想法是：
加载一个随机子集，然后在单击过滤器时向其中添加节点以填补空白 在用户滚动时加载更多节点 分页结果 在选择了足够的过滤器以使数字低于预定义的阈值之前，不显示联系人。我不确定这些是否能正常工作，我希望其他人遇到过这种情况并能给我一些想法。
【问题讨论】：
您特别面临的瓶颈是什么？将信息从服务器传输到客户端？在屏幕上渲染和动画那么多元素？只是提供一个有用的界面？还有什么？ 更多关于界面和组织它的最佳方式。显然它也需要响应。 【参考方案1】：您描述的情况很常见：如何让您的用户访问比他们一次可以看到的详细数据更多的数据。
有几种方法可以回答问题，而正确答案完全是主观的：这取决于您的用户试图查看或处理联系人的内容。在您真正获得满意的解决方案之前，您需要知道用户将使用联系人做什么。
只是猜测（但你会比我更清楚！），我预计他们正在做两件事：
查找：查找特定联系人并且他们已经知道他们的姓名/代号。 探索：正在寻找特定的联系人，但他们不太记得他们的姓名/联系人。或者他们只是在浏览。如果您对所有解决方案进行过滤，那么 Lookup 目标就很容易实现。探索目标是您想要设计的目标：
随机子集：这不是一种很好的浏览方式，因为您基本上只剩下一个子集可供浏览，然后您必须明确过滤才能看到任何新内容。当您不知道自己在寻找什么时，很难过滤。 无限滚动：现在似乎是一种流行的解决方案。我觉得它很麻烦，尤其是当您“无限”滚动浏览 1000 多个联系人时。可能不适合探索目标。 分页：也很麻烦 - 但如果分页与字母排序相关联，这可能会很好。 阈值限制：所以...仅仅依靠过滤？这在某些极端情况下可能很糟糕，其中用户应用了一个过滤器并且他们看不到任何东西 b/c 仍然没有达到阈值（可能有 很多 人使用最后一个过滤器名称约翰逊，这是你搜索的）。另外，我认为当您不知道自己在寻找什么时，浏览能力很重要。我想如果我站在你的立场上，我会介绍一些联系人集群。我怀疑 1000 多个联系人在很大程度上是一个性能问题（你说的是一百万！），所以 10000 多个实际上是一个用户限制：他们不能一次查看 1000 个联系人。
我建议引入一些聚类，可能是通过姓氏或姓氏和名字。然后向用户展示一种钻入一个集群但折叠所有其他联系人的方法，这样他们就不会立即可见。 accordian/rollodex paradigm 范围内的东西。这会让您的用户产生他们正在与“所有联系人”一起工作的错觉。可能为每个集群引入一个最小数量，这样如果集群足够小，您就不必费心显示它（即，为什么要为 2 个或 3 个或 5 个联系人显示一个集群 - 只显示联系人）。随着过滤器的应用，集群会消失。
【讨论】：
【参考方案2】：采用 Read Through Cache 的想法，类似于：
创建一个可以加载最多 100 个（或任何可配置数量）元素的批次的方法。它会： 在缓存（主键为元素 ID 的 JS 数组）中搜索过滤后的项目 通过 AJAX 请求过滤的项目 AJAX 返回的项目将被添加到缓存中 AJAX 返回的项目也将添加到 DOM 底部的“加载”区域（见下文），创建的 DIV 的 id 作为元素的主键 服务器最多可以发送 100 个元素。如果没有过滤器，它将发送下一个尚未发送的元素。您需要跟踪加载的元素。如果服务器端（即会话）缓存数据的大小很关键，您可以只跟踪连续发送的最高 ID（即，如果您在第一批 ID 1、2、3、6、9、10 中发送，那么最高 ID 为 3，因此下次您将从 4 发送，...，因此您在会话中只保留一个值） 创建一个可以将缓存的 DIV 移入/移出同位素容器的方法 onDomReady 使用上述方法加载并按自然顺序显示前 20 个元素（在您的情况下，它将按名称的字母顺序）。它可以是 20 个元素或 50 个或任何... 在后台，通过 AJAX 循环加载 100 个所有元素。加载区域可以很简单：
<html>
<body>
<!-- the page stuff -->
<div id="loader" style='display:none'>
<!-- all elements are loaded here -->
<div class="item">...</div>
</div>
</body>
</html>
这样你可以在DOM中一步一步加载所有元素，并且只显示需要的。
【讨论】：
在对用户/同位素系统造成问题之前，我可以将多少项目加载到 dom 中？ 我为此创建了一个测试页面。 “Shuffle”和“Insert”这两个动作：在文本框中输入要插入的项目的nb，然后单击插入。警告，添加大约 1000 次 > 1 分钟。 dev.rochefolle.net/iso/iso.html 对于DOM，你也可以检查它，但我会说限制比同位素代码高得多。如果您在同位素容器中仅显示有限且经过过滤的元素数量，您可能能够在 DOM 中加载数 1000 个元素。在上面的测试页面中，一旦添加了 1000 个元素，shuffle 就会响应，虽然不太流畅（我在 Ubuntu 上运行 FF 10）【参考方案3】：我在添加和排列大量同位素项目时遇到性能不佳的问题，这是因为我是增量添加项目而不是批量添加项目。这应该是一个显而易见的选择，但我忽略了一些事情。
请务必使用数组或元素列表，而不是单独加载或删除。
incomingData=['<div>a</div>','<div>b</div>'];
elements=[];
jQuery.each(incomingData,function(ind,val)
var element = jQuery(val).get(0);
//$container.isotope('insert', element); //resource heavy
elements.push(element);
);
$container.isotope( 'insert', elements ); //less processing
【讨论】：
以上是关于jquery isotope如何处理大数据集的主要内容，如果未能解决你的问题，请参考以下文章