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

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

$（＆＃39;＆＃39）附加。（$（＆＃39;＃cardDialogHelper＆＃39;。）HTML（））addClass（＆＃34;卡＆＃34）;

这是执行工作的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;
}

JQuery性能问题（或者只是糟糕的CODING！）

1 个答案: