javascript - 在没有寻呼机的情况下处理网站上的大型列表的好策略是什么？

Question

场景

我有一个网络界面(在一个大型网络应用程序中)，允许用户在两​​个非常大的列表之间建立联系。

列表 A - 40,000 多个项目
列表 B - 1,000 多个项目
列表 C - 包含 b 中的项目列表，这些项目连接到列表 A 中的选定项目

代码

这是粗略的 jsfiddle当前行为减去数据库的 ajax 更新。

这是主要功能(只在这里是因为堆栈溢出需要 jsfiddle 链接的代码片段)。

$('.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();
    }
});

问题

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

问题

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

我的想法

我的第一个想法是创建一种文档 View 架构。一个 JavaScript 列表，当用户滚动时将项目添加到顶部和底部，并在列表达到特定大小时将项目从另一端转储。为了过滤，我会转储整个列表并获得一个新的过滤项目列表，如自动完成，但它可以使用 ajax 滚动和添加项目。但这是非常复杂的。我希望有人可能有更好的主意或已经使用这种方法的 jquery 插件。

更新

Lista 固定为 70KListb 是用户生成的，范围在 1k-70k 之间。这就是说，仅仅通过使用委托(delegate)的出色反馈来优化 JS(这将使生活变得更加精彩 10 倍)是不够的。还是需要限制可见列表。

你的想法？

Answer 1

我之前在很多项目中都遇到过这个问题，一种既易于实现又性能良好的解决方案是使用类似 Infinity.js 的方法。 .
简而言之，Infinity 与许多其他“无限滚动” 库一样，允许您只渲染应该可见(或应该很快可见)的实际列表的一小部分，从而减少压力在浏览器上非常棒。你可以看到一个简单的现场演示 over here ，检查 API 引用的第一个链接。