html - dom crud 使 Bootstrap 中的滚动变慢

Question

我的脚本遇到问题。当我对 DOM 元素进行一些插入、删除等操作时，滚动变慢。我只是做一个 ajax 请求，将它们作为 json 获取，然后将它们作为 html 附加到 DOM。

$.ajax({
url:"init_response_generator.php",
async:true,
type:"GET",
data:{init:1},
success:function(data)
{
    console.log("success");
    var results=$.parseJSON(data);
    console.log(results[0].symposium[0].e_image_loc);

    if(results.length!=0)
    {
        for(i=0;i<3;i++)
                    {
    symposium ='<div class="thumbnail span3" onclick="show_event(\''+results[0].symposium[i].ev_id+'\');"><img src="'+results[0].symposium[i].e_image_loc+'" height="300" width="300"/><h5>'+results[0].symposium[i].e_title+'</h5></div>';
    workshop ='<div class="thumbnail span3" onclick="show_event(\''+results[1].workshop[i].ev_id+'\');"><img src="'+results[1].workshop[i].e_image_loc+'" height="300" width="300"/><h5>'+results[1].workshop[i].e_title+'</h5></div>';
    guest_lecture ='<div class="thumbnail span3" onclick="show_event(\''+results[2].guest_lecture[i].ev_id+'\');"><img src="'+results[2].guest_lecture[i].e_image_loc+'" height="300" width="300"/><h5>'+results[2].guest_lecture[i].e_title+'</h5></div>'; 
inauguration ='<div class="thumbnail span3" onclick="show_event(\''+results[3].inauguration[i].ev_id+'\');"><img src="'+results[3].inauguration[i].e_image_loc+'" height="300" width="300"/><h5>'+results[3].inauguration[i].e_title+'</h5></div>';     
    $("#symposium_thumbnails").append(symposium);
    $("#inauguration_thumbnails").append(inauguration);
    $("#workshop_thumbnails").append(workshop);
    $("#guestlecture_thumbnails").append(guest_lecture);                        
                    }
        }       
    }       `

Answer 1

调用 append 的次数越多，代码运行的速度就越慢。

var symposium = "", workshop = "", guest_lecture = "", inauguration = "";
for(i=0;i<3;i++) {
    symposium +='<div class="thumbnail span3" onclick="show_event(\''+results[0].symposium[i].ev_id+'\');"><img src="'+results[0].symposium[i].e_image_loc+'" height="300" width="300"/><h5>'+results[0].symposium[i].e_title+'</h5></div>';
    workshop +='<div class="thumbnail span3" onclick="show_event(\''+results[1].workshop[i].ev_id+'\');"><img src="'+results[1].workshop[i].e_image_loc+'" height="300" width="300"/><h5>'+results[1].workshop[i].e_title+'</h5></div>';
    guest_lecture +='<div class="thumbnail span3" onclick="show_event(\''+results[2].guest_lecture[i].ev_id+'\');"><img src="'+results[2].guest_lecture[i].e_image_loc+'" height="300" width="300"/><h5>'+results[2].guest_lecture[i].e_title+'</h5></div>'; 
    inauguration +='<div class="thumbnail span3" onclick="show_event(\''+results[3].inauguration[i].ev_id+'\');"><img src="'+results[3].inauguration[i].e_image_loc+'" height="300" width="300"/><h5>'+results[3].inauguration[i].e_title+'</h5></div>';                             
}
$("#symposium_thumbnails").append(symposium);
$("#inauguration_thumbnails").append(inauguration);
$("#workshop_thumbnails").append(workshop);
$("#guestlecture_thumbnails").append(guest_lecture);