jquery - IE 中的可编辑性能

Question

我在使用 jeditable 的 IE 中发现页面设置时间非常短。

该页面有一个表格，其中每行有 13 个 span 元素，jeditable 应用到这些元素上，如下所示:

$(document).ready(function() { 
    $('#entry_pl span.ples').editable('my_xhr.php', {
            placeholder: '<span class="placeholder">unset</span>',
            indicator: '<img src="indicator.gif" class="indi">',
            data: function(value, settings) {
                return  $('<span />').html(value).text();
            }
        });
});

功能很棒——一切正常。但在 IE 6...8 中，上述代码每个表行花费超过半秒。因此，对于 10 行表来说，页面设置延迟已经很糟糕了。用户不会对此感到满意。 WebKit 和 Firefox 中的设置延迟可以忽略不计。

有什么想法或建议吗？

我还没有开始审查或分析可编辑代码的性能。

我想也许只有在单击元素时才调用 .jeditable()，而不是在 $(document).ready() 中的所有元素上调用 .jeditable()。

Answer 1

Che，我做了很多测试和分析来确定哪一段代码花费了时间。 jeditable 并不是唯一的罪魁祸首，但它占据了最大的份额。我真的很好奇为什么它对你有效而不是对我有效。

一种可能性是我在 iMac 上的 VirtualBox VM 中的 XP 上运行 IE。这不是一个快速的设置，但这是很好的，因为我的一些客户使用旧的、缓慢的或重载的计算机，我希望该应用程序也能很好地为他们工作。

无论如何，好消息是我找到了一个简单有效的解决方案，我可以分享。我摆脱了 $(document).ready() 中的所有 .jeditable() 调用。我为表中的每个可编辑 span 元素赋予了一个类似这样的属性:onclick="ed(this)"。你可以想象 ed() 是什么样的:

function ed(elem) {
    $elem = $(elem);
    ...
    $elem
        .removeAttr('onclick')
        .editable('action_script.php', {
            ...
            }
        })
        .click();
}

现在让我们考虑一下这个问题。无论如何，这可以说是正确的方法，因为在页面重新加载之前，表中几乎所有可编辑元素都不会被编辑(至少在我的情况下是这样)。将所有这些元素设置为可编辑以防万一它们可能被单击相对于仅在单击它们时才可编辑它们来说效率相当低。