Javascript 重建jQuery Mobile ListView的响应速度不是很快，我如何改进它？

我有一个JQM列表视图，每页最多有25个项目

我正在重建页面删除“li”项并添加新项，但从点击按钮到列表，重建的UI似乎没有响应

为了添加列表项，我生成了一个包含所有“li”项的HTML字符串，并将整个“HTMLLI”追加到列表中

我不知道是不是最好的方法来生成listview，你能给我一些建议吗

这是Chrome中的CPU配置文件： 很抱歉，这个大图像我不知道如何以更可读的格式导出。在Chrome中，数字太低，响应度也很好，我不知道如何在这里找到问题：-S你知道如何在移动设备中创建这样的配置文件吗（iPhone或Android，不重要）

以下是一些代码：

function generate_listview(data)
{
    var lv_html = '',
        group = data.group_by_dia,
        last_dia,
        init_item = (items_per_page * current_page) -items_per_page,
        get_item_func = (data.gym == 'Tots') ? get_new_item_with_gymn : get_new_item;

    if (current_page != num_pages) {
        final_item = (items_per_page * current_page);
    }else{
        var resto = Math.round(cache_activities.activitats.length%items_per_page);
        final_item = init_item + ((resto > 0) ? resto : items_per_page);
    }
    var acts = data.activitats.slice(init_item, final_item);

    $activitats_list.append('<li data-role="list-divider">Gimnasos: ' + data.gym + " - Dia: " + data.dia + " - Activitat: " + data.activitat + " >> Trobades: " + cache_activities.activitats.length + '</li>');
    if (group){
         $.each(acts, function(index, value) { 
            if(value.d != last_dia) {
                lv_html += '<li data-role="list-divider">' + value.d + '</li>';
            }
            lv_html += get_item_func(value,data.gym);
            last_dia = value.d;
        });
    }else{
        $.each(acts, function(index, value) { 
            lv_html += get_item_func(value);
        });  
    }

    $activitats_list.append(lv_html);
    $activitats_list.listview("refresh");
    $.mobile.hidePageLoadingMsg();
    $header_p2.text(header_text + ' ' + current_page + '/' + num_pages);
}
function get_new_item(value)
{
    var startItem   = '<li data-theme="c">',
        endItem     = '</li>',
        color_activitat = '<span class="ui-li-aside ui-li-desc" style="background-color: yellow; width:15px; color: yellow">.</span>';
    return startItem + 
        '<h3 class="ui-li-heading">' + value.a  + '</h3>' + 
        '<p class="ui-li-desc">' + 
            '<strong>Sala: </strong>' +  value.s + 
            ' <strong>Dia: </strong>' + value.d + ' (' +value.i + ' - ' + value.f + ')' + 
        '</p>' + endItem;
}
function get_new_item_with_gymn(value,gym_name)
{
    var startItem   = '<li data-theme="c">',
        endItem     = '</li>',
        gym_item    = '<strong>Gimn&agrave;s: </strong>' + value.g + ' ',
        new_line = '</p><p class="ui-li-desc">',
        color_activitat = '<span class="ui-li-aside ui-li-desc" style="background-color: yellow; width:15px; color: yellow">.</span>';
    return startItem + 
        '<h3 class="ui-li-heading">' + value.a  + '</h3>' + 
        '<p class="ui-li-desc">' + gym_item + 
        '<strong>Sala: </strong>' +  value.s + new_line + 
        ' <strong>Dia: </strong>' + value.d + ' (' +value.i + ' - ' + value.f + ')' + 
        '</p>' + endItem;
}
function go_next () {
    current_page += 1;
    if (current_page > num_pages) {
        current_page = num_pages;
    }else{
        $.mobile.showPageLoadingMsg();
        $activitats_list.find('li').remove().end();
        generate_listview(cache_activities);    
        $.mobile.silentScroll(0);
    }
    if (current_page == num_pages){
        $next_btn.button('disable');
        $next_btn_down.button('disable');
        $prev_btn.button('enable');
        $prev_btn_down.button('enable');
    }else{
        $prev_btn.button('enable');
        $prev_btn_down.button('enable');
    }
}
function go_previous () {
    current_page -= 1;
    if (current_page <= 0) {
        current_page = 1;
    }else{
        $.mobile.showPageLoadingMsg();
        $activitats_list.find('li').remove().end();
        generate_listview(cache_activities);    
        $.mobile.silentScroll(0);        
    }
    if (current_page == 1) {
        $prev_btn.button('disable');
        $prev_btn_down.button('disable');
        $next_btn.button('enable');
        $next_btn_down.button('enable');
    }else{
        $next_btn.button('enable');
        $next_btn_down.button('enable');
    }
}

函数生成\u列表视图（数据）
{
变量lv_html=“”，
组=数据。按直径分组，
最后一天，
初始项目=（每页项目*当前页面）-每页项目，
get_item_func=（data.gym='Tots'）？使用“gymn”获取新项目：获取新项目；
如果（当前页面数！=num页面数）{
最终项目=（每页项目*当前页面）；
}否则{
var resto=Math.round（缓存活动.activitats.length%items\u/页）；
最终项目=初始项目+（（resto>0）？resto：每页项目）；
}
var acts=data.activitats.slice（初始项，最终项）；
$activitats_list.append（“
Gimnasos:”+data.gym+”-Dia:“+data.Dia+”-Activitat:“+data.Activitat+”>>Trobades:“+cache_activities.activitats.length+”
”；
国际单项体育联合会（小组）{
$.each（动作、函数（索引、值）{
如果（值d！=最后直径）{
lv_html+='
'+value.d+'
'；
}
lv_html+=get_item_func（value，data.gym）；
最后直径=值d；
});
}否则{
$.each（动作、函数（索引、值）{
lv_html+=获取项目功能（值）；
});  
}
$activitats_list.append（lv_html）；
$activitats_list.listview（“刷新”）；
$.mobile.hidePageLoadingMsg（）；
$header_p2.text（header_text+''+当前页面+'/'+数量页面）；
}
函数获取新项目（值）
{
var startItem='
'，
(完)，
颜色_activitat='；
返回startItem+
''+value.a+''+
“
”+
“Sala:”+value.s+
“直径：”+value.d+”（“+value.i+”-“+value.f+”）”+
“
”+结束项；
}
函数获取新的健身项目（值、健身名称）
{
var startItem='
'，
(完)，
gym_item='Gimnà；s:'+value.g+'，
新的行='
，
颜色_activitat='；
返回startItem+
''+value.a+''+
“
”+健身房项目+
“Sala:”+value.s+new_line+
“直径：”+value.d+”（“+value.i+”-“+value.f+”）”+
“
”+结束项；
}
函数go_next（）{
当前页面+=1；
如果（当前页面>数量页面）{
当前页面=数量页面；
}否则{
$.mobile.showPageLoadingMsg（）；
$activitats_list.find（'li'）.remove（）.end（）；
生成\u列表视图（缓存\u活动）；
$.mobile.silentsroll（0）；
}
如果（当前页面==num页面）{
$next_btn.按钮（“禁用”）；
$next_btn_down.按钮（“禁用”）；
$prev_btn.按钮（“启用”）；
$prev_btn_down.按钮（“启用”）；
}否则{
$prev_btn.按钮（“启用”）；
$prev_btn_down.按钮（“启用”）；
}
}
函数go\u previous（）{
当前页面-=1；
如果（当前页面您是否尝试在chrome devtool中分析该操作？它可能会给我们提供一些新数据…作为tumb的规则，您希望构建html元素，然后对DOM进行一次更新。我尝试过分析，但在chrome中，响应度完美且数字太低。我编辑了该问题，以链接到具有cpu配置文件树的图像。抱歉对于大图像，我找不到导出结果的方法，是否有？