jjzjj

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

coder 2025-01-21 原文

场景

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

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

你的想法？

最佳答案

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

关于javascript - 在没有寻呼机的情况下处理网站上的大型列表的好策略是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32232875/

寻呼机寻呼39listbsectionjavascriptjqueryajaxperformance

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

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  3. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  6. ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2

    我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？ 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/

  7. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  8. ruby-on-rails - rails 目前在重启后没有安装 - 2

    我有一个奇怪的问题:我在rvm上安装了ruby​​onrails。一切正常，我可以创建项目。但是在我输入“railsnew”时重新启动后，我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(

  9. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  10. ruby - RVM 使用列表[0] - 2

    是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

随机推荐