jQuery UI .buttonset() 太慢了答案

【问题标题】：jQuery UI .buttonset() is too slowjQuery UI .buttonset() 太慢了
【发布时间】：2012-08-17 03:29:52
【问题描述】：

我在一个 HTML 页面上有几千个按钮。在文档就绪时运行 $(".buttonset").buttonset(); 需要 10 多秒。有没有更快的方法来做到这一点，或者是我唯一的解决方案以某种方式限制按钮的数量？

【问题讨论】：

我想你已经知道这个问题的答案了。
只是为了满足我的好奇心，您介意告诉我们为什么您需要在一个页面上显示这么多按钮吗？
我对数千个运行速度更快的 jquery 对象进行操作。你的按钮设置功能是什么？
@dystroy：我相信他说的是buttonset() jQuery UI 方法。 OP，我认为这是一种定制解决方案开始变得更可取的情况。要么按照其他人的建议减少按钮数量。
一个网页上有数千个按钮？我会使用分页。现在，当您进行某种过滤时，我会在即将显示组时按需创建按钮集。

【解决方案1】：

在buttonsets 首次显示之前按需创建它们。

我刚刚测试了 2400 个盒子，分成 12 个部分。它在我的 i7 上运行流畅，使用 Chrome 23、Firefox 17、IE9、Opera 12。

这可能会在您第一次打开复选框组时添加拆分加载时刻，但它确实节省了一些 RAM，因为在必要时才创建未使用的样式按钮。

【讨论】：

我认为这是解决方案。您还可以构建按钮集的 HTML 以匹配 jquery-ui 最终生成的内容，然后单击运行 buttonset，然后重新单击。
当然，我的意思不是全部，只是创建的 <span> 包装器和 jquery-ui 插入的其他东西，因此按钮可以在实际成为小部件之前通过 jquery-ui 的样式表设置样式。跨度>
哦，是的，标签内的跨度，我来看看。 =]
这是一个与 UI 生成的 HTML 结构相似的小提琴：fiddle。除了创建它们时的初始开销外，我没有注意到性能上有太大差异，我猜 UI 处理得更好。 :P 否则制作自定义插件将是最好的优化方式。

【解决方案2】：

对于buttonset() 设置数千个按钮所需的速度，您无能为力，但如果您在 10 秒内遇到的问题是浏览器消息显示页面已无响应，您可以将使用 setTimeout 调用将操作转换为异步操作。

$(".buttonset").buttonset();

会变成：

$(".buttonset").each(function(index, button) {
   setTimeout(function() {
       $(button).buttonset();
   }, 0);
});

我已经成功地将这种模式用于数千个 jQuery UI 对象，虽然它不会加快操作速度，但它会阻止页面锁定，从而看起来它运行得更快。

【讨论】：