为什么告诉 jQuery 单击我的链接按钮会减慢我的页面速度？

不知道是不是更新面板的影响 https://stackoverflow.com/questions/31359065/performance-deteriorating-after-async-postback-scrolling-becomes-horrendous或者什么，但我基本上有一个下拉列表，允许用户选择一个项目作为过滤器。当选择该项目时，它应该只将一个项目带回到网格视图中。也就是说，这个特定的过滤器最多会带回您正在查找的记录。如果用户单击“应用”链接来应用过滤器，则效果很好。 apply 链接后面是一些服务器端代码（ASP.NET Web 窗体应用程序中的 C#）。

我们收到了一位用户的请求，其效果如下：

“如果我在这个选项中做出选择，为什么我必须单击“应用”按钮 一个下拉过滤器...它应该简单地得到我的一条记录 寻找。这对我很有帮助，因为我不必单击 “应用”按钮。

我同意他的观点，并认为最简单的方法是什么......我想：简单，我将有一个下拉列表的更改事件处理程序，这样当进行选择时我将触发单击事件。有这样的效果：

        $("#MainContent_ddlCompany").on("change", function() {
            var companyId = $("#MainContent_ddlCompany").val();
            $("#MainContent_hdnCompanyValue").val(companyId);
            $("#<%=ddlCompany.ClientID %>").trigger("chosen:updated");

            if (companyId.length > 0) {
                $(".apply").click();
                $(".apply").removeClass("applyButton");
                $(".apply").addClass("resetButton");
            } else {
                //cleared selection of a company
                $(".apply").removeClass("resetButton");
                $(".apply").addClass("applyButton");
            }
        });

起初这不起作用，我也不知道为什么，但经过一番认真的谷歌搜索后，我改变了这一行：

$(".apply").click();

To this:

$('.apply')[0].click();

效果很好……所以我决定再测试一下。当我不断选择一个又一个过滤器值时，我注意到页面开始变慢。事实上，到了第六次或第七次时，它就几乎无法使用了。我不知道为什么会发生这种情况，但我再次怀疑这与类名 .a​​pply 的链接按钮位于更新面板内有关。

但我仍然想，在我更改 jQuery 代码来模拟单击事件之前，它位于更新面板内。那么为什么这段代码会导致页面变慢、拖拽呢？从 jQuery 代码中调用该事件是否会渲染 HTML 中的其他内容，从而可能导致此问题？

如果我改回代码并强制用户单击“应用”按钮，那么我们就会恢复到良好的正常速度。为什么如果我告诉 jQuery 模拟单击​​按钮我的页面速度会变慢？它在做同样的事情，无论用户单击它还是我让 jQuery 单击它，模拟单击此链接按钮都会调用其服务器端代码方法。

现在我不知道为什么会发生这种情况，因为无论哪种情况，这个按钮都在更新面板中，但是当我有 jQuery 时，通过单击它$('.apply')[0].click();多次尝试后页面速度变慢。然而，当我让用户只需单击此按钮（没有 jQuery 单击事件）时，它就可以正常工作了吗？

我在这里缺少什么？

呃，好吧，我发现了我的问题。因为我使用的是 updatepanels，所以我必须包装我的 jQuery 代码以包含add_endRequest。也就是说，你有一些效果：

$(document).ready(function() {

     //Some initial event/triggers

     var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm.add_endRequest(function () {
         //Copy of some initial event/triggers
     });
});

为什么我要使用你问的 endRequest ？好吧，因为更新面板在异步回发后基本上会丢弃所有事件，因为此时（更新后）的 HTML 会再次呈现，并且此时与更新面板内任何控件关联的所有事件都将被擦除。此时当然document.ready()不运行，所以我必须重新订阅这些事件endRequest。输入我的问题...

我有一个巨大的大脑放屁，我基本上把所有东西，实际上文档中的所有东西都准备好了并将其复制到endRequest。事实上，如果我没记错的话，我读过一些文章说

无论您准备好文档中的内容，只需将其复制粘贴到 endRequest 中即可

没关系，但这里你必须小心。我将未包含在更新面板内的事件放入endRequest。结果是灾难性的……至少对我来说。

然后，这些事件将被附加多次……或者基于异步回发的数量。就我而言，正如我在测试时提到的，在第六次或第七次之后性能开始下降。好吧，到那时我的控件已多次附加到事件上。例如，我的.apply按钮和我的dropdownlist都在我之外updatepanel。但我的 jQuery 代码附加了我的更改事件dropdownlist同时document ready and endRequest.

结果一开始速度相当快，因为​​它只在document ready。但当我进行异步回发时，每次都会附加这些事件。对于 n 个测试，我将有 n 个附加事件...在我的例子中，7 个测试在更改事件处理程序上产生 7 个！

举个例子，不要放置任何事件处理程序，例如 jQuery 的on()不在更新面板内的任何控件的事件。否则你会遇到我遇到的情况，即事件发生时性能不佳。