Javascript 在没有寻呼机的网站上处理大型列表的好策略是什么？ 脚本

我有一个web界面（在大型web应用程序中），允许用户在两个非常大的列表之间建立连接

列出-40000多个项目
列表B-1000多个项目
列表C-包含b中与列表a中所选项目相连的项目列表

代码 下面是当前行为减去数据库的ajax更新后的大致情况

这是主要功能（仅在这里，因为堆栈溢出需要JSFIDLE链接的代码段）

问题 这些要求不允许我使用自动完成字段或寻呼机。但是当前页面的加载时间太长（取决于缓存，介于1到5秒之间）。此外，JS行为附加到所有40k+项上，这将在性能较低的计算机上导致问题（在一个新的200美元的消费者特价上进行测试，计算机被JS破坏）。还有一个过滤器（不是在JS fiddle上，而是在最终产品上），它根据文本输入过滤列表

问题 处理这种情况的好策略是什么

我的想法 我的第一个想法是创建一种文档视图体系结构。一个JavaScript列表，当列表达到一定大小时，用户滚动并从另一端转储项目时，会将项目添加到顶部和底部。要进行筛选，我将转储整个列表，并获得一个新的筛选项目列表，如自动完成，但它将能够使用ajax滚动和添加项目。但这是非常复杂的。我希望有人会有更好的想法，或者有一个已经使用这种方法的jquery插件

更新 Lista是70K固定的 Listb由用户生成，范围为1k-70k。 也就是说，仅仅用优秀的委托反馈优化JS是不够的（这将使生活更加精彩10倍）。仍然需要限制可见列表

---

您的想法？我以前在许多项目中都遇到过这个问题，一个易于实施且性能良好的解决方案是使用类似的解决方案。

---

简而言之，与许多其他“无限滚动”库一样，Infinity只允许渲染实际列表中应该可见（或很快就会可见）的一小部分，从而极大地减少了浏览器的压力。您可以看到一个简单的实时演示，查看API参考的第一个链接。

这不是不可能做到的，诀窍是不要将所有这些内容加载到DOM中，因为它会破坏任何Java脚本引擎

答案是使用基本库，它是在客户端排序超大数据（无论是表格数据还是图形数据）的王者。当我第一次看到它时，它有4个例子，现在有很多页

这是第一个例子之一

---

如果5.3M兆字节，则数据集将被删除以毫秒为单位过滤数据，并承诺在不损失性能的情况下对数百万行进行排序。

40k DOM元素可能很大，但不是不可管理的。你到底为什么对每一个都附加回调？委托。您可以进行一些优化，以便在不更改功能的情况下提高性能，例如使用事件委托，这样您就可以拥有一个或两个事件处理程序，而不是40k+事件处理程序。

$（'.name lista'）。on（'click'，'input'，function（）{…}）

而不是

$（'.name lista input'）。单击（）

@danielson317 to delegate意味着将处理程序附加到单个包含元素，然后通过该元素调用操作。例如，（'click'，'name listb input'）.parent（）.on（'click'，'name listb input'，handler函数）我没有否决你的答案，但我认为主要问题是你似乎在解决一个与问题所涉及的问题不同的问题。在不破坏浏览器的情况下对大量数据进行排序。赞成。。d3js。。。。您只需要修改您的实现。也许甚至可以考虑角度或淘汰，因为你做了一些时髦的动态选择器构建，用d3js作为排序引擎？你不必向我解释你的推理，我只是在猜测那些失败的选民。是的。。。很抱歉我以为你是OP。也许我遗漏了什么，但我在api中没有看到任何ajax回调。从提供的文档中，我不确定如何通过ajax按需提取数据，而不是预先加载所有数据。这严格来说是一种前端解决方案吗？@danielson317您可以在初始化

列表视图时提供可选方法
lazy
，以按需加载项目（而不是加载所有项目）。例如，当与列表中的其他方法一起使用时，此方法可以利用Ajax调用。它们是否就是这种行为的一个示例？文档非常稀少，演示没有提供代码示例。我不认为Infinity提供了一个示例，但是一些替代库提供了。你要找的关键词是“无限滚动”。我想我会选择。它有更好的文档，是一个更简单的实现。谢谢你给我指出了正确的方向。
$('.name-listb input').add('.name-listc input').click(function (e) {
    var lista_id = $('.name-lista input:checked').val();
    var listb_id = $(this).val();
    var operation = $(this).prop('checked') ? 'create' : 'delete';
    var $listb = $('.name-listb .checkbox-list');
    var $listc = $('.name-listc .checkbox-list');

    if (operation == 'create') {
        $listb.find('input[value=' + listb_id + ']').prop('checked', true);
        // Ajax request to add checked item.
        $new_item = $listb.find('input[value=' + listb_id + ']').parents('.option-group').clone();
        $listc.append($new_item);
    } else if (operation == 'delete') {
            console.log('hello list delete');
        $listb.find('input[value=' + listb_id + ']').prop('checked', false);
        // Ajax request to remove checked item.
        $listc.find('input[value=' + listb_id + ']').parents('.option-group').remove();
    }
});