javascript - JQuery 与 Angular 实现数百个值 slider

Question

我的问题是如何在具有数百个动态 JS 元素的页面上提高性能。

我有一个页面可以加载 700 种食品。每个食品都有一个选择框，可以在其中选择尺寸(例如，一条面包还是一片面包)、一个值 slider 以及一个显示所选值 * 测量重量的输出。每个项目还有一个“最喜欢的”复选框。如果选中此项，该项目将被复制到“收藏夹”列表中。 “收藏夹”列表中项目的值输入会“镜像”到下面的原始食物项中，因此，如果移动“收藏夹” slider ，原始项目的 slider 也会同时移动。

这是我的意思的文字草图:

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

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

我已经使用 JQueryUI slider 和一些分类的 JQuery 实现了所有这些，以监视选择框和复选框的值。毫不奇怪，一旦加载了 700 个这样的东西，DOM 就会像门钉一样死掉。我需要更好的解决方案。

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

Answer 1

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