document.ready() 函数降低了我的 UI 性能答案

【问题标题】：document.ready() function slowing my UIs performancedocument.ready() 函数降低了我的 UI 性能
【发布时间】：2011-09-27 15:22:42
【问题描述】：

我的应用程序中有一个 UI 页面需要很长时间才能加载。

在 HTML 源代码中，如您所见，我在 document.ready() 函数中有一系列 .click() jQuery 事件处理程序，如下所示：

 $(document).ready(function()  {
$("#selectAllCountry").click( function() {
    $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', true);
    return false;
});


... and many more...

它会影响我的网页性能吗？在 HTML 正文中移动这个 .click 处理程序是否有助于改进它？

还有一件事，我正在使用 iframe 在同一个域中加载另一个页面。但是，即使我删除了 iframe 标签，对性能的提升也不大。我知道，这个 iframe 是我的应用程序性能的主要瓶颈，我最终会删除它，但我仍然需要为这个页面做一些其他事情。那具体的东西可能是什么？

我的页面运行缓慢，甚至当我尝试获取源以在 jsbin 中重现该场景时 Chrome 也挂起。

【问题讨论】：

在性能方面您观察到了什么？
我敢肯定，由于您发布的代码墙，您会收到反对票。考虑 SSCCE 中的第一个 S (sscce.org)。郑重声明，我没有投反对票。
你真的喜欢我们在这里看到的那种代码重复吗？第一个问题不应该是：我怎样才能将这种……仪式性的咒语减少到可以管理的程度？
ya...@flq...我知道...这件事我做的很匆忙...这是我不应该做的。我现在已经编辑了问题

标签： jquery performance jquery-events

【解决方案1】：

看起来您可以将点击处理程序的数量减少到 1 个，因为它们似乎都在做同样的事情。

如果您可以将 select 和 deselect 的类放在元素上，您可以这样做：

 $(".select, .deselect").click( function() {
    var t = $(this);
    $("#" + t.attr('rel') + " input:checkbox")
        .attr('checked', t.hasClass('select'));
    return false;
});

【讨论】：

你让这家伙太容易了。