在使用jQuery'；在非常大的结果集上使用s show（）函数？

我正在开发一个非常定制的基于web的diff工具。我们在对设备进行更改之前收集网络设备配置信息，然后在进行配置更改之后收集相同的信息。然后向用户展示一个高度定制的并排diff，其中使用与相关结果不同的css样式过滤不相关的结果。（例如，正常运行时间会有所不同，但并不相关）

所有这些工作都是在服务器端完成的，并且性能良好。正如人们所期望的那样，可以有大量的行，例如，“显示接口”可以很容易地显示1000行以上的行（无论是前置还是后置），而可能只有一些不同的行可以显示。我试图实现的是一个按钮，隐藏不相关的行，只显示不同的行。我使用以下函数来执行此操作

function run_show_changed_button(command) {

    var commandWithDashes = command.replace(/\s+/gi, "-");

    var button = $(".show-changed[command='" + command + "']");
    var stage = $(button).attr("stage");
    var preRows = $("#diff-result-pre-section-" + commandWithDashes + " > .diff-hide");
    var postRows = $("#diff-result-post-section-" + commandWithDashes + " >  .diff-hide");

    if (stage == "all") {
        $(preRows).hide();
        $(postRows).hide();
        $(button).attr("stage", "changed");
        $(button).html("<button>Show All</button>");
    } else {
        $(preRows).each(function() {
            $(this).css('display', 'block');
        });

        $(postRows).each(function() {
            $(this).css('display', 'block');
        });

         //$(preRows).show();
         //$(postRows).show();

         $(button).attr("stage", "all");
         $(button).html("<button>Show Only Changed</button>");
    }
}

一些被删掉的东西。。。 一些被删掉的东西。。。 （剪下的东西） 一些被删掉的东西。。。 一些被删掉的东西。。。 [已解决]

问题最终是浏览器在试图更新DOM的每个更改时所做的工作量。解决方案是隐藏父元素，然后更新css元素以将每个“显示”设置为“块”，然后重新显示父元素。执行速度快了好几个数量级。实现这一点的代码发布在下面。您会注意到，在更改css元素之前，在隐藏父元素之后，我不得不添加一些延迟

function run_show_changed_button(command) {

    var commandWithDashes = command.replace(/\s+/gi, "-");

    var button = $(".show-changed[command='" + command + "']");
    var stage = $(button).attr("stage");
    var preSection = $("#diff-result-pre-section-" + commandWithDashes);
    var postSection = $("#diff-result-post-section-" + commandWithDashes);
    var preRows = $("#diff-result-pre-section-" + commandWithDashes + " > .diff-hide");
    var postRows = $("#diff-result-post-section-" + commandWithDashes + " >  .diff-hide");

    if (stage == "all") {
        $(preRows).hide();
        $(postRows).hide();

        $(button).attr("stage", "changed");
        $(button).html("<button>Show All</button>");
    } else {
        var hideSection = function() {
            $(preSection).hide();
            $(postSection).hide();
        };

        var setPreCss = function() {
            $(preRows).css('display', 'block');
        };

        var setPostCss = function() {
            $(postRows).css('display', 'block');
        };

        var showSection = function() {
            $(preSection).show();
            $(postSection).show();
        };

        var callbacks = $.Callbacks();
        callbacks.add( setPreCss );
        callbacks.add( setPostCss );
        callbacks.add( showSection ); 

        hideSection();
        setTimeout(callbacks.fire, 500);

        $(button).attr("stage", "all");
        $(button).html("<button>Show Only Changed</button>");
    }
 }

功能运行\显示\更改\按钮（命令）{
var commandWithDashes=command.replace（/\s+/gi，“-”）；
变量按钮=$（“.show changed[command='”+command+']”）；
var阶段=$（按钮）.attr（“阶段”）；
var preSection=$（“#diff result pre section-”+带破折号的命令）；
var后置部分=$（“#差异结果后置部分-”+带破折号的命令）；
var preRows=$（“#diff result pre section-”+commandWithDashes+“>.diff hide”）；
var postRows=$（“#diff result post section-”+commandWithDashes+“>.diff hide”）；
如果（阶段=“全部”）{
$（preRows.hide（）；
$（postRows.hide（）；
$（按钮）.attr（“阶段”，“更改”）；
$（按钮）.html（“全部显示”）；
}否则{
var hideSection=函数（）{
$（preSection.hide（）；
$（postSection.hide（）；
};
var setPreCss=函数（）{
$（preRows）.css（'display'，'block'）；
};
var setpostsss=函数（）{
$（postRows）.css（'display'，'block'）；
};
var showSection=函数（）{
$（preSection.show（）；
$（postSection.show（）；
};
var callbacks=$.callbacks（）；
callbacks.add（setprecs）；
callbacks.add（setpostss）；
callbacks.add（showSection）；
hideSection（）；
setTimeout（callbacks.fire，500）；
$（按钮）.attr（“阶段”、“全部”）；
$（按钮）.html（“仅显示已更改”）；
}
}

[已解决]

问题最终是浏览器在试图更新DOM的每个更改时所做的工作量。解决方案是隐藏父元素，然后更新css元素以将每个“显示”设置为“块”，然后重新显示父元素。执行速度快了好几个数量级。实现这一点的代码发布在下面。您会注意到，在更改css元素之前，在隐藏父元素之后，我不得不添加一些延迟

function run_show_changed_button(command) {

    var commandWithDashes = command.replace(/\s+/gi, "-");

    var button = $(".show-changed[command='" + command + "']");
    var stage = $(button).attr("stage");
    var preSection = $("#diff-result-pre-section-" + commandWithDashes);
    var postSection = $("#diff-result-post-section-" + commandWithDashes);
    var preRows = $("#diff-result-pre-section-" + commandWithDashes + " > .diff-hide");
    var postRows = $("#diff-result-post-section-" + commandWithDashes + " >  .diff-hide");

    if (stage == "all") {
        $(preRows).hide();
        $(postRows).hide();

        $(button).attr("stage", "changed");
        $(button).html("<button>Show All</button>");
    } else {
        var hideSection = function() {
            $(preSection).hide();
            $(postSection).hide();
        };

        var setPreCss = function() {
            $(preRows).css('display', 'block');
        };

        var setPostCss = function() {
            $(postRows).css('display', 'block');
        };

        var showSection = function() {
            $(preSection).show();
            $(postSection).show();
        };

        var callbacks = $.Callbacks();
        callbacks.add( setPreCss );
        callbacks.add( setPostCss );
        callbacks.add( showSection ); 

        hideSection();
        setTimeout(callbacks.fire, 500);

        $(button).attr("stage", "all");
        $(button).html("<button>Show Only Changed</button>");
    }
 }

功能运行\显示\更改\按钮（命令）{
var commandWithDashes=command.replace（/\s+/gi，“-”）；
变量按钮=$（“.show changed[command='”+command+']”）；
var阶段=$（按钮）.attr（“阶段”）；
var preSection=$（“#diff result pre section-”+带破折号的命令）；
var后置部分=$（“#差异结果后置部分-”+带破折号的命令）；
var preRows=$（“#diff result pre section-”+commandWithDashes+“>.diff hide”）；
var postRows=$（“#diff result post section-”+commandWithDashes+“>.diff hide”）；
如果（阶段=“全部”）{
$（preRows.hide（）；
$（postRows.hide（）；
$（按钮）.attr（“阶段”，“更改”）；
$（按钮）.html（“全部显示”）；
}否则{
var hideSection=函数（）{
$（preSection.hide（）；
$（postSection.hide（）；
};
var setPreCss=函数（）{
$（preRows）.css（'display'，'block'）；
};
var setpostsss=函数（）{
$（postRows）.css（'display'，'block'）；
};
var showSection=函数（）{
$（preSection.show（）；
$（postSection.show（）；
};
var callbacks=$.callbacks（）；
callbacks.add（setprecs）；
callbacks.add（setpostss）；
callbacks.add（showSection）；
hideSection（）；
setTimeout（callbacks.fire，500）；
$（按钮）.attr（“阶段”、“全部”）；
$（按钮）.html（“仅显示已更改”）；
}
}

我看不出有什么理由

$（preRows.show（）

和

$（postRows）.show（）不会很好地工作。你能给我们展示一下HTML是什么样子吗？preRows和postRows已经是jQuery对象了，在调用.show（）和.hide（）之前，有没有理由再次包装它们？此外，这些.each（）循环不是必需的。preRows.css（）将起作用。-不过，这可能无法解决您的问题，但对更新没有影响。@rwk
each（）
循环是一个测试，以查看速度是否有明显差异。没有。我看不出为什么
$（preRows.show（）
和
$（postRows）.show（）不会很好地工作。你能给我们展示一下HTML是什么样子吗？preRows和postRows已经是jQuery对象了，在调用.show（）和.hide（）之前，有没有理由再次包装它们？此外，这些.each（）循环也不是必需的