数百个值滑块的 JQuery vs Angular 实现答案

【问题标题】：JQuery vs Angular implementation of hundreds of value sliders数百个值滑块的 JQuery vs Angular 实现
【发布时间】：2013-10-29 17:31:35
【问题描述】：

我的问题是关于如何在包含数百个动态 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 个项目听起来不太友好。可能会考虑的另一件事是仅使用一个滑块，并在用户悬停项目父项时更改其值。 slider on demand可以这么说
您所做的任何更改都可能影响性能。这是一个愚蠢的问题。找出减速发生的确切位置，您可能正在使用非常低效的选择器或事件。我 angularjs 可以有效地做到这一点，jquery 也可以。它们都只是 javascript。
同意一页上 700 倍的任何内容都是 UX 混乱，我正在努力减少这种情况。但是，它仍然会是一个很大的数字——例如 40-60。如果您有任何建议或资源，我对在大量 DOM 元素上优化选择器和事件效率的方法非常感兴趣。
@Ali AngularJs 绝对是您的朋友，原因有二：它使您的代码更小，因此更易于理解/维护，而且您不必担心选择器。相反，您编写 Angular 指令来为元素创建/附加行为。它简单直观。比如：<div ng-repeat="food in foods"><div myFoodDirective="food"></div></div>。当然，这只是一个示例，但是您只需编写一个 food 指令来确定应该如何处理该项目，从 $scope.foods 数组中传入对象 food。

标签： javascript jquery jquery-ui angularjs

【解决方案1】：

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

【讨论】：