javascript - 数百个值滑块的 JQuery vs Angular 实现

Question

我的问题是关于如何在具有数百个动态 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 中实现所有这些行为是否可能会提高性能？

Answer 1

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