Javascript JQuery与数百个值滑块的角度实现

我的问题是如何在有数百个动态JS元素的页面上实现性能

我有一个页面可以装载700种食物。每个食物都有一个选择框，可以在其中选择度量（例如面包与面包片），一个值滑块，以及一个显示所选值*度量重量的输出。每个项目都有一个“收藏夹”复选框。如果选中此选项，则项目将复制到“收藏夹”列表中。“收藏夹”列表中项目的值输入在下面的原始食物项目中“镜像”，因此，如果移动“收藏夹”滑块，原始项目的滑块将同时移动

以下是我的意思的文本草图：

//Favourites
(*) Bread (slice/loaf) (slider) [output]

//Food items
(*) Bread (slice/loaf) (slider) [output]
() Potatoes (mashed/boiled/fries) (slider) [output]

我已经用JQueryUI滑块和一些组合的JQuery实现了所有这些，以监视选择框和复选框的值。毫不奇怪，一旦这些东西中有700个被加载，DOM就死定了。我需要一个更好的解决方案

---

在AngularJS中实现所有这些行为可能会提高性能吗？

在一个页面上有700个内容听起来不是一个好主意……对于使用它的人来说，这可能是一个可怕的混乱。因此，首先，我建议重新考虑该计划。这就是说，在我缓慢而过时的笔记本电脑上，它运行得相当好。它有700个输入，每秒钟都在改变它们的值。虽然我不推荐它，但我认为只要你保持一切高效，它是可以做到的。进一步的思考，真正的低效是页面上有700个条目。根据需要加载项目（滚动、分页、搜索等）更有意义，是常见的解决方案。

使用input type=range，与文本框相比，它对性能没有额外影响。您可以回到现在的旧浏览器上……一次向用户显示700个项目听起来不是很友好。另一件事可能是只使用一个滑块，并让它的值改变时，用户悬停项目家长。代码>按需滑动器，因此您所做的任何更改都可能会影响性能。这是个愚蠢的问题。准确地找出减速发生的位置，很可能是您使用了效率非常低的选择器或事件。我认为angularjs可以有效地完成这项工作，jquery也可以。他们都只是javascript。同意一个页面上700x的任何东西都是用户体验混乱，我正在努力减少这种混乱。然而，这仍然是一个很大的数字——例如40-60。如果您有任何建议或资源的话，我对如何在大量DOM元素上优化选择器和事件的效率非常感兴趣。@Ali AngularJs肯定是您的朋友，原因有二：它使您的代码更小，因此更易于理解/维护，而且您不必担心选择器。相反，您可以编写角度指令来创建/附加元素的行为。它简单直观。类似于：

。当然，这只是一个示例，但是您只需编写一个food指令来确定应该如何处理项目，从

$scope.foods

数组中传入对象

food

。