jquery에서 여러 번 클릭하여 프로세스가 느려집니다

Question

저는 자체 CMS 시스템에서 작업하고 있습니다. Ajax와 jQuery에서 부분적으로 작동하지만 문제는 많은 클릭 이벤트를 사용하고 있다는 것입니다. 따라서 내 웹 사이트에서 다른 항목을 계속 클릭하면 시스템이 느려집니다. 결국 그것은 더 이상 아무것도하지 않습니다. 나는 click 이벤트에 대해 옳은가요? 그리고 그것을 좋은 방법으로 어떻게 사용해야합니까? .bind 및 .on 이벤트 처리기를 사용했습니다.

$(document).ready(function(){ 


//Standards 
var windowWidth = $(window).width(); 
var windowHeight = $(window).height(); 
$('#wrapper').css('width',windowWidth); 
$('#content').css('height',windowHeight); 


//Click related items 
$('.listItem').bind('click',function() { 
    var itemID = $(this).attr('rel'); 
    $('#content').load('showitems.php',{newID:itemID}); 
}); 


//Click on tab 
$('.liBase a').on('click', function() { 
    $('.liBase a').parent().removeClass('activeList'); 
    $('#imageShow').removeClass('activeList'); 
    $(this).parent().addClass('activeList'); 
}); 


//Click pages 

$('.page').on('click', function() { 
    var pageID = $(this).attr('rel'); 
    $('.liBase').parent().parent().removeClass('activeList'); 
    $('#imageShow').removeClass('activeList'); 
    $(this).parent().parent().addClass('activeList'); 
    $('#content').load('showpages.php',{newID:pageID}); 
}); 

$('.item').on('click', function() { 
    var pageID = $(this).attr('rel'); 
    $('.liBase').parent().parent().removeClass('activeList'); 
    $('#imageShow').removeClass('activeList'); 
    $(this).parent().parent().addClass('activeList'); 
    $('#content').load('showitems.php',{newID:pageID}); 
}); 

$('.editItem').on('click', function() { 
    var newID = $(this).attr('rel'); 
    $('.editPage').parent().parent().removeClass('activeList'); 
    $('#imageShow').removeClass('activeList'); 
    $(this).parent().parent().addClass('activeList'); 
    $('#content').load('edititem.php',{itemID:newID}); 
}); 

$('.editPage').on('click',function() { 
    var newID = $(this).attr('rel'); 
    $('.liBase').parent().parent().removeClass('activeList'); 
    $('#imageShow').removeClass('activeList'); 
    $(this).parent().parent().addClass('activeList'); 
    $('#content').load('editpage.php',{pageID:newID}); 
}); 

$('.deleteItem').on('click', function() { 
    var newID = $(this).attr('rel'); 
    $('.liBase').parent().parent().removeClass('activeList'); 
    $('#imageShow').removeClass('activeList'); 
    $(this).parent().parent().addClass('activeList'); 
    $('#content').load('../control/deleteRecords.php',{postID:newID,tblName:'items',tblID:'itemID'}); 
}); 

$('.deletePage').on('click',function() { 

    var newID = $(this).attr('rel'); 
    $('.liBase').parent().parent().removeClass('activeList'); 
    $('#imageShow').removeClass('activeList'); 
    $(this).parent().parent().addClass('activeList'); 
    $('#content').load('../control/deleteRecords.php',{postID:newID,tblName:'pages',tblID:'pageID'}); 
}); 

$('#addPage').on('click', function() { 
    $('#content').load('addpage.php'); 
}); 

$('#addItem').on('click', function() { 
    $('#content').load('additem.php'); 
}); 


$('#imageShow a').on('click', function() { 
    var pageID = $(this).attr('rel'); 
    $('.liBase').parent().parent().removeClass('activeList'); 
    $(this).parent().addClass('activeList'); 
    $('#content').load('showimages.php'); 

}); 

$('#imageAdd').on('click', function() { 
    $('#content').load('addimage.php'); 
}); 



}); 

Answer 1

나는 다음을 수행 할 수 제안 (첫번째 쉬운 것들; D)을

1) 캐시의 jQuery 객체 종종 사용합니다.

$item = $('.item'); 

2) 바인딩 클릭 이벤트의 수를 제한 할 수 있는지) 중복

$('.editPage').on('click',function() { 
    doStuff(this); 
    $('#content').load('editpage.php',{pageID:newID}); 
}); 

function doStuff(that){ 
    var newID = $(that).attr('rel'); 
    $('.liBase').parent().parent().removeClass('activeList'); 
    $('#imageShow').removeClass('activeList'); 
    $(that).parent().parent().addClass('activeList'); 
} 

3을 제거하는 코드를 리팩토링 (불필요하게 여러 클릭 이벤트를 바인딩 한 요소가있다?)

4) 프로파일 (크롬 DevTools로 작업을 수행하면 해당위한 좋은 선택)

• 이입니다 이 네트워크 - 오래된 것들을 폐기하거나 당신 메모리 소비를

• 프로필을 대기에 의해 요청의 빈도를 제한 - 당신에게 메모리