dom crud使自舉中的滾動變慢

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