javascript - JQuery 性能问题(或者只是糟糕的编码!)

Question

function getItemDialogContent(planItemType) {
    var oDialogContent = $('<div/>').append($('#cardDialogHelper').html()).addClass("card");
    if (planItemType) {
        oDialogContent.find('#cardDialogHeader').addClass(planItemType).find('#dialogTitle').html(planItemType);
        oDialogContent.find('#cardDialogCustomFields').html($('#' + planItemType + 'DialogFields').html());

        if (planItemType == 'announcement' || planItemType == 'question') {
            oDialogContent.find("#dialogPin").remove();
        }
    }
    return oDialogContent;
}

我正在为我正在开发的 Web 应用程序进行一些代码清理。上述方法在 IE 中滞后，而我们的大多数用户群都使用 IE。有人能帮我吗。我认为 find() 方法由于 DOM 遍历而非常昂贵，我正在考虑优化。有人有什么想法吗？提前致谢:D

对应用程序进行了一些分析，以下行似乎引起了很多问题。请帮帮我。有什么办法可以优化吗？

$('').append($('#cardDialogHelper').html()).addClass("card");

这是完成这项工作的 ajax 调用。有没有办法在通话后执行此操作。请帮我。 (添加了一些我认为对诊断有帮助的功能)

    GetAllPlansTemp = function() {
        $.getJSON("/SAMPLE/GetAllPlanItems",processData);
    }

    processData = function(data) {
        _throbber = showThrobber();
        var sortedPlanItems = $(data.d).sort("Sequence", "asc");
//        hideThrobber(_throbber);

        $(sortedPlanItems).each(createCardSkipTimelime);

        doCardStacks();
        doTimelineFormat();

        if (boolViewAblePlans == 'false') {
            $("p").show();
        }

        hideThrobber(_throbber);

    }

function createCardSkipTimelime() {

    boolViewAblePlans = 'false';

    if (this.__Deleted == 'true' || IsPastPlanItem(this)) {
        return;
    }

    boolViewAblePlans = 'true';
    fixer += "\n" + this.TempKey;  // fixes what looks like a js threading issue.

    var value = CreatePlanCard2(this, GetPlanCardStackContainer(this.__type));
    UpdatePlanCardNoTimeLine(value, this);


}

function CreatePlanCard2(carddata, sContainer) {
    var sCardclass = GetPlanCardClass(carddata.__type);
    var editdialog = getItemDialogContent(sCardclass);
    return $('<div/>').attr('id', carddata.TempKey).card({ 'container': $(sContainer), 'cardclass': sCardclass, 'editdialog': editdialog, 'readonly': GetCardMode(carddata) });
}

Answer 1

我怀疑这是因为find，而是因为html()。它会导致 Web 浏览器重新呈现 HTML，因此您会在 IE 中遇到延迟。

作为一种优化方法，您可以使用全局选择器而不是 find 来查找 id 所查找的元素:

$('#cardDialogHeader')

而不是

oDialogContent.find('#cardDialogHeader')

等等

我要做的另一个步骤是尝试使用 append 或 appendTo 而不是 html，如下所示:

    $('#' + planItemType + 'DialogFields').appendTo('#cardDialogCustomFields');

更新

function getItemDialogContent(planItemType) {
    var oDialogContent = $('#cardDialogHelper').clone().appendTo( $('<div/>').addClass("card") ).parent();
    if (planItemType) {
        oDialogContent.find('#cardDialogHelper').addClass(planItemType).find('#dialogTitle').html(planItemType);
        oDialogContent.find('#cardDialogCustomFields').append($('#' + planItemType + 'DialogFields').clone());

        if (planItemType == 'announcement' || planItemType == 'question') {
            oDialogContent.find("#dialogPin").remove();
        }
    }
    return oDialogContent;
}