クロージャー最適化

与えられた-AJAXスクリプトが1秒間に1回ひっくり返ると、異なる引数を持つ1つの関数への複数の呼び出しが含まれます（アップデーターを呼び出しましょう）。 この関数は、引数に従って、現在のページの特定のDOM要素セットを更新します（コンテンツの変更、非表示、表示）。 使用されたjQuery、視覚効果など つまり コードについてはクライアントに来て...

updater( 'id1' , 10, 20);

updater( 'id33' , 11, 22);

updater( 'id181' , 102, 27);



* This source code was highlighted with Source Code Highlighter .

問題は、呼び出される関数の数を増やした後（型ブロックの数が増えた後）、すべてが非常に遅いことです。セレクターによるDOM要素の選択に、jQueryに多くの時間が費やされます。



レイアウトを変更することなく、jQueryを放棄してプロセスを最適化することなく、可能な限り迅速かつ無痛でそれを可能にすることが必要です。



解決策-クロージャーを使用して、各タイプブロックの新しい更新関数を生成する関数を作成します。 同時に、すべての「長い」操作（$（ '。Class .class'）。Parent（ 'div'）など）をキャッシュします。



早めにしましょう

function updater(rootId, arg2, arg3)

{

$( '#' +rootId+ ' .some .selector' ).some().action();

$( '#' +rootId+ ' .some2 .selector3' ).some().action();

}



* This source code was highlighted with Source Code Highlighter .

すべての「アップデータ」を再生成し、目的のアップデータを呼び出します。「長い」操作の結果はすべてキャッシュされ、残りの引数に応じて要素とそれらに対する操作のみが更新されます。

function makeUpdater(rootId) {

if ($( '#' +rootId).length>0)

{

var someVar = $( '#' +rootId+ ' .some .selector' );

var someVar2 = $( '#' +rootId+ ' .some2 .selector3' );

return function (arg2, arg3) {

someVar.some().action();

someVar2.some().action();

// do smth else...

}

}

else

return function (arg2, arg3) {}

}



var updaters = new Array();

var idx = 0;

$( 'div.rootElement' ).each( function () {

updaters[idx++] = makeUpdater($( this ).attr( 'id' ));

});



function updater(rootId, arg2, arg3) {

updaterFnc = // rootId updaters

updaterFnc(arg2, arg3);

}



* This source code was highlighted with Source Code Highlighter .

UPD：代替ソリューション-セレクターキャッシュ： habrahabr.ru/blogs/jquery/63145