0

私は自分のCMSシステムに取り組んでいます。これはAjaxとjQueryで部分的に機能しますが、問題は私が多くのクリックイベントを使用していることです。そのため、Webサイトのさまざまなアイテムをクリックし続けると、システムの速度が低下します。結局、それはもう何もしません。クリックイベントについて正しいのでしょうか。また、それを適切に使用するにはどうすればよいですか。.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');
});



});
4

1 に答える 1

0

次のことを行うことをお勧めします（最初は簡単なものです; 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) プロファイリングを行います (Chrome devtools が適しています)。

  • それはネットワークですか - 古いものを破棄するかキューに入れることで、リクエストの頻度を制限します

  • メモリ消費量をプロファイルします - コード内の多くのメモリを消費する部分はありますか

于 2012-10-17T10:46:51.250 に答える