Javascript JQuery性能问题（或者只是糟糕的编码！） 函数getItemDialogContent（planItemType）{ var oDialogContent=$（''）.append（$（'.#cardDialogHelper'）.html（））.addClass（“卡片”）； if（planItemType）{ oDialogContent.find（'#cardDialogHeader'）.addClass（planItemType）.find（'#dialogTitle'）.html（planItemType）； oDialogContent.find（“#cardDialogCustomFields”）.html（$（“#”+planItemType+“DialogFields”）.html（））； 如果（planItemType=='announcement'| | planItemType=='question'）{ oDialogContent.find（“#dialogPin”）.remove（）； } } 返回oDialogContent； }

我正在为正在开发的web应用程序进行一些代码清理。以上方法在IE中比较落后，我们的大多数用户都使用IE。有人能帮我吗。我认为find（）方法非常昂贵，因为需要进行DOM遍历，我正在考虑优化。有什么想法吗？提前感谢：D

我一直在对应用程序进行一些评测，下面这行代码似乎导致了很多问题。请帮帮我。有什么方法可以优化吗

$（''）.append（$（'#cardDialogHelper'）.html（））.addClass（“卡片”）

这是完成这项工作的ajax调用。有没有办法在打电话后做一些这样的事情。请帮帮我。（添加了一些我认为有助于诊断的功能）

GetAllPlansTemp=function（）{
$.getJSON（“/SAMPLE/GetAllPlanItems”，processData）；
}
processData=函数（数据）{
_throbber=showtrobber（）；
var sortedplan items=$（data.d）.sort（“序列”、“asc”）；
//Hidethrober（_throbber）；
$（sortedPlanItems）。每个（CreateCardSkipTimeTime）；
doCardStacks（）；
doTimelineFormat（）；
if（boolViewAblePlans=='false'）{
$（“p”）.show（）；
}
Hidethrober（_throbber）；
}
函数createCardSkipTimeTime（）{
boolViewAblePlans='false'；
if（this.u Deleted==“true”| | isplantItem（this））{
返回；
}
boolViewAblePlans='true'；
fixer+=“\n”+this.TempKey；//修复了类似于js线程的问题。
var value=CreatePlanCard2（此，GetPlanCardStackContainer（此._类型））；
UpdatePlanCardNoTimeLine（值，this）；
}
函数CreatePlanCard2（carddata，sContainer）{
var sCardclass=GetPlanCardClass（carddata.\uu类型）；
var editdialog=getItemDialogContent（sCardclass）；
返回$（''）.attr（'id'，carddata.TempKey）.card（{container'：$（sContainer），'cardclass'：sCardclass，'editdialog'：editdialog，'readonly'：GetCardMode（carddata）}）；
}

我怀疑这是因为

find

，而是因为

html（）

。它会导致web浏览器重新呈现HTML，因此您会在IE中遇到滞后

作为一种优化方法，您可以对查看的

id

元素使用全局选择器而不是

find

：

    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) });
}

而不是

$('#cardDialogHeader')

等等

我要做的另一步是尝试使用

append

或

appendTo

而不是像这样使用

html

：

oDialogContent.find('#cardDialogHeader')

更新

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

函数getItemDialogContent（planItemType）{ var oDialogContent=$（'#cardialoghelper'）.clone（）.appendTo（$（''）.addClass（“card”）.parent（）； if（planItemType）{ oDialogContent.find（'#cardDialogHelper'）.addClass（planItemType）.find（'#dialogTitle'）.html（planItemType）； oDialogContent.find（'#cardDialogCustomFields'）.append（$（'#'+planItemType+'DialogFields'）.clone（））； 如果（planItemType=='announcement'| | planItemType=='question'）{ oDialogContent.find（“#dialogPin”）.remove（）； } } 返回oDialogContent； }

---

代码建议在不更改ID的情况下复制ID为

的元素…这将导致无效的HTML，ID应该是唯一的。我们都可以看到代码在做什么，但你能告诉我们它应该做什么吗？如果sombody更了解这个问题，他可能会找到另一种方法。看看最新的答案。根据您提供的信息，我能为您做的就是这些。
.html
与
.append
不同-第一个复制元素，第二个移动它。您应该使用
.clone
来复制：
$（…）.clone（）.appendTo（…）
当然，如果移动很好，它会更快，并且您不必处理id复制。瓶颈似乎是由以下变量引起的：oDialogContent=$（''）.append（$（'#cardDialogHelper'）.html（））.addClass（“card”）；当我把它注释出来时，一切都很顺利，但这是需要的。正如@Tgr所说的，试试这个：
var-oDialogContent=$（''cardialoghelper'）.clone（）.addClass（“card”）.appendTo（$（''）
或干脆
var-oDialogContent=$（'#cardialoghelper'）.clone（）.attr（'id'，''）。完全不要使用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;
}