Question

我需要操作复杂的表格进行打印。

我的代码有效，但在IE上运行10秒（50行表）

如何改善表现？

我发现$(item).html(title)占用的时间最多，我该如何避免这种情况？

由于

守则：

            tblTBLRows.find("td[name=tdTBLTitle]").each(function (i, item) {
            var title = "";
            if ($(item).find("*[name=iconForApprove]").length > 0) { title += "<b>[" + msgStatusForApprove + "]</b>&nbsp;" }
            if ($(item).find("*[name=iconComplete]").length > 0) { title += "<b>[" + msgStatusCompleted + "]</b>&nbsp;" }
            title += $(item).find("#contTxtTitle").html();
            $(item).html(title).removeClass("tdTBLTitle");
        });

Html：一行示例：

 <tr>
    <td>...</td>
    <td name="tdTBLTitle" class="tdTBLTitle txtRight" colid="3">
            <table cellspacing="0" cellpadding="0" class="tblTskTitle"><tbody><tr>
            <td> 
                <span class="icon_24 iconVGray" name="iconForApprove" title="...">&nbsp;</span> 
                <span class="spacer5">&nbsp;</span>
            </td>
            <td class="tdTxtTitle " name="txtTitle">
                <a href="..." class="NoLnk">
                    <div class="contTxtTitle Pointer" id="contTxtTitle">
                        Title1
                    </div>
                </a>
            </td>   
            <td class="tdDescLast" name="txtDescLast">
                <a href="..." class="NoLnk">
                    <div class="contDescLast Pointer" id="contDescLast">
                        Title2
                    </div>
                </a>
            </td>
        </tr></tbody>
        </table>
    </td>
    <td>...</td>
</tr>

Answer 1

重要的是缓存你的jquery对象引用..

而不是多次调用$(item)执行var $item = $(item);并使用$item.find(..)

另请注意，*选择器非常昂贵。

如果您知道您将寻找跨度或其他特定标签，请改用它例如$item.find('span[name=iconForApprove]')

Answer 2

我会尝试使用数组来构建字符串。在连接字符串时，IE的性能通常很差。

var buffer = [];
buffer.push("string"); // add a bunch of stuff
var title = buffer.join('');

有证据表明这并没有太大的区别，但我最近使用它来获得IE 7的巨大性能提升。

Answer 3

        tblTBLRows.find("#tdTBLTitle").each(function (i, item) {
        var title = "";
        if ($(item).find("*[name=iconForApprove]").length > 0) { title += "<b>[" + msgStatusForApprove + "]</b>&nbsp;" }
        if ($(item).find("*[name=iconComplete]").length > 0) { title += "<b>[" + msgStatusCompleted + "]</b>&nbsp;" }
        title += $(item).find("#contTxtTitle").html();
        $(item).html(title).removeClass("tdTBLTitle");
})

我建议将*（通用选择器）更改为您要查找的特定元素，在此示例中似乎为span。这样jQuery只会查看特定的元素类型，而不是查看和评估它找到的每个元素：

        tblTBLRows.find("#tdTBLTitle").each(function (i, item) {
        var title = "";
        if ($(item).find("span[name=iconForApprove]").length > 0) { title += "<b>[" + msgStatusForApprove + "]</b>&nbsp;" }
        if ($(item).find("span[name=iconComplete]").length > 0) { title += "<b>[" + msgStatusCompleted + "]</b>&nbsp;" }
        title += $(item).find("#contTxtTitle").html();
        $(item).html(title).removeClass("tdTBLTitle");
})

但是，我不确定这可以节省多少时间;它可能是一个微优化，如果你不确定你想要的元素总是span，那么无论如何你可能都不可能。

jquery性能td替换

3 个答案: