加快jQueryUI按钮

Question

我有一个带有很多复选框的网页，我用jQueryUI button（）调用变成了按钮。这会使页面的呈现速度降低到爬行速度。是否有可能加快速度？

我使用选择器

在document.ready中进行调用

$("#containingdiv input[type='checkbox']).button()

我正在为支架杯制作一个控件。我正在显示所有年龄组的括号，这就是有这么多复选框的原因。标有红色框的标签是复选框，其他是标准按钮。有多达30个年龄组，所以我需要显示很多年龄组。

看起来我应该自己构建ui，而不是使用jqueryui中的按钮。当我剖析i chrome时，看起来它正在构建所有时间使用的所有节点。

Answer 1

尝试以下技巧。不是一次性转换它们，而是转换前一百个（或者在屏幕上看到多少用户），并使用setTimeout()延迟其余部分。这几乎可以立即释放UI线程，因此浏览器可以执行其他操作，如渲染和处理事件。初始化实际上变得更长，但页面永远不会被冻结。

类似的东西：

var checkboxes_left = $("#containingdiv input[type='checkbox']");
convertRest();

// Convert the first 100 checkboxes, then schedule converting the rest
function convertRest() {
    checkboxes_left.slice(0, 100).button();
    checkboxes_left = checkboxes_left.slice(100);
    if (checkboxes_left.length > 0) {
        window.setTimeout(convertRest, 50);
    }
}