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

Question

脚本

我有Web界面(在大型Web应用程序中),允许用户在两​​个非常大的列表之间建立连接.

列表A - 40,000多个项目
列表B - 1,000+项目
列表C - 包含b中连接到列表A中所选项目的项目列表

代码

这是当前行为减去数据库的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小提琴,但最终产品)一个过滤器,根据文本输入过滤列表.

问题

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

我的想法

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

更新

Lista是70K固定列表是用户生成的,将跨越1k-70k.这就是说,仅仅通过使用代表的优秀反馈来优化JS(这将使生活变得更加精彩),这是不够的.仍然需要限制可见列表.

你的想法？

Answer 1

我之前在许多项目中都遇到过这个问题，一个既易于实现又性能良好的解决方案是使用Infinity.js之类的东西。
简而言之，Infinity 与许多其他“无限滚动”库一样，允许您仅渲染应该可见（或应该很快可见）的实际列表的一小部分，从而极大地减少浏览器的压力。您可以在此处观看一个简单的现场演示，查看第一个链接以获取 API 参考。