Javascript 比较插入dom元素的三种方法+；使用jquerymobile增强它们

我在将数据插入dom时遇到性能问题

在pagecontainerbeforeshow（）事件上完成插入+jQuery移动增强， jQuery移动版1.4.2

通过比较我想做的事情的三个简化版本，我试图找出哪种方法最快：

jQuery方法：

for(var i=0;i<2000;++i){
    $('<div>').attr({'data-role':'collapsible','id':'asdf'+i+''}).html('<h2>asdf</h2>').appendTo("#manage_content");
    $('<ul>').attr({'data-role':'listview'}).html('<li>bit</li>').appendTo('#asdf'+i+'');
    }
$('#manage').trigger('create');

---

for（var i=0；i假设只使用jquery-mobile进行css格式化，那么可以做些什么来加速dom插入+增强

对于插入部分：正如许多评论所建议的那样，方法3似乎是最好的选择，因为方法2的小性能增益不足以弥补其可读性的不足，这将使增强部分变成地狱

对于增强部分：

--将所有jquery mobile类手动添加到html元素中

--不要添加任何数据-%属性。

--不要调用$（'your_page'）.trigger（'create'）或$（'ui content'）.enhanceWithin（）

--而是手动添加所需的小部件事件

性能增益：

使用常规jquery mobile增强功能，在我使用的最坏情况下，页面创建花费了2s。
使用此方法，大约50ms…因此性能提高了40*

下面的代码是两个嵌套的可折叠集和一个listview作为最后一个子的示例（显然是我的代码）。如果有人感兴趣，我可以添加jsperf x倍于此元素插入+增强

小提琴：

HTML:


JS：

$('.ui-collapsible-heading').on('click',function(event,ui){

    var coll_content = $(this).siblings();
    if(coll_content.is(":visible"))
        {$('a',this).removeClass( "ui-icon-minus" ).addClass( "ui-icon-plus" );
        coll_content.hide();}
    else
        {$('a',this).removeClass( "ui-icon-plus" ).addClass( "ui-icon-minus" );
        coll_content.show();}   
});

代码编写起来有点烦人，但是如果您有与我的jquery mobile类似的性能问题，那么它是值得的

在本示例中，我在可折叠标题中添加了图标，因为使用jquery mobile时，您将使用图标按钮，如果没有jquery mobile增强功能，这是不可能的，因为html中不允许嵌套标记，浏览器将对其进行更正。
在手动添加类时，使用类似于此处的似乎有效。
总共插入了多少个节点？7秒似乎很长。你试过分析它吗？我相信大约8000个。但是我想这三个例子都会发生很多回流。在分析的同时运行这个过程以了解在哪里花费的时间最多。根据这个，你的第二个和第三个代码最快。但是，请注意de>.trigger（“create”）

已被弃用并替换为

.ehanceWithin（）

。编辑：

.enhanceWithin（）

比

.trigger（“create”）更快

。您可以做的是静态添加类，并手动将它们绑定到事件以折叠/扩展可折叠文件。如果您愿意，我可以为您编写一个答案。回答您自己的问题没有问题。但是如果您发布的答案只是对问题的一个添加，则您应该编辑该问题并删除答案。

var html='';
for(var i=0;i<2000;++i){
    html+='<div data-role="collapsible"><h2>asdf<h2><ul data-role="listview"><li>bit</li></ul></div>';
}
$('#manage_content').append(html);
$('#manage').trigger('create');

<div data-role='content'>

<div class="ui-collapsible ui-collapsible-themed-content">
                        <h2 class="ui-collapsible-heading">
                        <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b">Employee collapsible</a>
                        </h2>
                        <div class="ui-collapsible-content ui-body-inherit" style="display:none;">
                            <div class="ui-collapsible ui-collapsible-themed-content">
                                <h2 class="ui-collapsible-heading">
                                <a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b">
                                    <p class="inline">Child collapsible</p>
                                    <p class="inline coll_head_butt timecard ui-link ui-btn ui-btn-b ui-icon-check ui-btn-icon-notext ui-shadow ui-corner-all"></p>
                                </a>
                                </h2>
                                <div class="ui-collapsible-content ui-body-inherit" style="display:none;">
                                    <ul class="ui-listview">
                                    <li class="projectxtask ui-li-has-count"><a class="ui-btn">li 1<span class="ui-li-count ui-body-inherit">42</span></a></li>
                                    <li><a class="ui-btn">li 2</a></li><li><a class="ui-btn">li 3</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
</div>

.projectxtask a{

    background-color:#33ccff !important;
    padding-right:2.6em !important;
    border-top:1px solid black !important;
    border-bottom:1px solid black !important;
}
.inline{display:inline !important;}


.coll_head_butt{
    margin-left : 20px !important;
    border-style:none !important;
    box-shadow:none !important;
}

$('.ui-collapsible-heading').on('click',function(event,ui){

    var coll_content = $(this).siblings();
    if(coll_content.is(":visible"))
        {$('a',this).removeClass( "ui-icon-minus" ).addClass( "ui-icon-plus" );
        coll_content.hide();}
    else
        {$('a',this).removeClass( "ui-icon-plus" ).addClass( "ui-icon-minus" );
        coll_content.show();}   
});