jeditable在IE中的性能表现

Question

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

该页面有一个表格，每一行都有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();
            }
        });
});

功能很好 - 一切都正常。但在IE6...8中，以上代码每行表格需要超过半秒钟的时间。因此，对于一个包含10行的表格，页面设置延迟已经非常糟糕。用户不会对此感到满意。在WebKit和Firefox中的设置延迟可以忽略不计。

有什么想法或建议吗？

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

我考虑只在元素被单击时调用.jeditable()，而不是在$(document).ready()中调用所有元素。

- user213154

Answer 1

嗨，我进行了大量的测试和分析，以确定哪一部分代码需要时间。 jeditable 不是唯一的罪犯，但它占了很大的比例。我真的很好奇为什么它在你那里运行得很快，而在我的电脑上却不是这样。

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

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

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

现在让我们思考一下。这可能是正确的方法，因为表格中几乎所有可编辑元素在页面重新加载之前都不会被编辑（至少在我的情况下是这样）。仅仅因为它们可能会被点击而将所有这些元素设置为可编辑状态相对于仅在它们被点击时才使它们可编辑而言效率低下。

- user213154

---

哇塞 - 你不知道你刚刚为我节省了多少时间。这个解决方案正是我所需要的 - 而且这实际上是使用 jEditable 的一种“绝妙”方式！谢谢!!!!!!!!!!!!!!!!!!!!!! - Laurence

Answer 2

我刚刚解决了这个问题。 如果你可以不用它，就注释掉下面的四行代码，这样可以大大提高速度。

       var savedwidth  = $(self).width();
       var savedheight = $(self).height();
       ...
       settings.width  = savedwidth;
       settings.height = savedheight;

- Cookie

Answer 3

我正在开发一个页面的类似功能，你的帖子让我非常惊慌，因为我几天没有在IE上查看过它。

然而，我现在刚刚在IE 6-8中查看了它，并没有遇到像你所说的那样性能不佳的情况。我有13行，每行有6个可编辑字段。页面加载和性能都很快。我创建了一个类似的带有多个可编辑元素的页面，现在已经上线六个月了，没有报告缓慢的性能。现在在IE中查看它，它有130个可编辑元素，加载和执行与我的当前页面一样迅速。

在这两种情况下，我都使用了比你更松散的方法将jeditable附加到一个类选择器上。

所以我并不认为你的问题是jeditable导致的。

也许确实是。当我在当前页面获得我想要的行为后，我将尝试将jeditable绑定到更高级别的容器，并像11种提高jquery性能的方法中第7点所讨论的那样使用事件冒泡。也许这会帮助你。

祝你好运。

- Che