失敗した jQuery 最適化試行の概要_jquery

// 1 つの属性を設定します
if ( value !== unknown ) {
// オプションで、 exec が true の場合に関数の値が実行されます
exec = !pass && exec && jQuery.isFunction(value) ;
for ( var i = 0; i fn(
elems[i],
key,
exec ? value.call(elems[i]) , i, fn(elems[i], key)) : value,
pass
);
return elems;


例、jQuery.fn。css 関数は次のとおりです:

// 'unknown' の設定は何も行われません
if ( argument.length === 2 && value === unknown ) {
戻り値;
}
戻り値 jQuery.access( this, name, value, true, function( elem, name, value ) {
戻り値 !== 未定義 ?
jQuery. style( elem, name, value ) :
jQuery.css( elem, name );
}; したがって、次のコードは5000 個の div 要素を選択し、10000 個のノードをループするには:
jQuery('div').css('height', 300).css('width', 200); 私の心の中では、 「トランザクション」もデータベース操作と同様に、すべての操作を保存し、「トランザクションの送信」時に一律に実行することで、10,000 件のノードアクセスを 5,000 件に削減でき、これは「1 倍」のパフォーマンス向上に相当します。

簡単な実装

key,
func;
// jQuery.fn
for (jQuery.fn の key) に関数をコピーします。 {
func = jQuery.fn[key]; (typeof func == ' function') {
//キーが常に最後のループ値である for ループのため、ここで問題が発生します
//そのため、妥当性を保証するためにクロージャを使用する必要がありますキーの(LIFT効果)
(function( key) {
proxy[key] = function() {
//関数呼び出しをキューに入れます
this._queue.push([ key, slide.call(arguments, 0)]);
return this
})(key);
}
}
;
proxy.commit = jQuery.fn.commit;
jQuery.fn.commit = function() {
var core = this._core ,
queue = this._queue;
// 各ループは 1 つだけ
core.each(function() {
var i = 0,
item,
jq = jQuery( this);
//すべての関数
for (; item = queue[i]; i ) {
jq[item[0]].apply(jq, item[1]); >}
});
これを返します
};
テスト環境
テストでは次の条件を使用します:
コンテナー内に配置された 5000 div ()。
$('#container>div') を使用して、これらの 5000 div を選択します。
各 div は、ランダムな背景色 (randomColor 関数) と 800px 未満のランダムな幅 (randomWidth 関数) を設定する必要があります。
テストに参加するには 3 つの呼び出し方法があります:
通常の使用法:

単一ループ メソッド:

ビジネスメソッド:
$('#container>div') オブジェクト割り当てメソッド:

$('#container>div').css({
残念な結果
当初の予測結果は、トランザクション方式はシングルループ方式よりも遅いにもかかわらず、シングルループ方式の効率が通常の使用方式よりもはるかに高いというものでした。ループ メソッドを使用すると、通常のメソッドよりも高速になるはずです。オブジェクト割り当てメソッドは実際には jQuery によって内部的にサポートされる単一ループ メソッドであり、これが最も効率的です。
残念ながら結果は以下の通りです。 通常の使用法、シングルループ法、トランザクション法、オブジェクト代入法
18435ms 18233ms 18918ms 17748ms
結果から見ると、トランザクション法が最も遅いものとなっています。方法。同時に、単一ループと通常の使用の間に明らかな利点はなく、jQuery の内部で実装されたオブジェクト割り当てメソッドに依存しても大きなギャップはありません。
5000 要素の演算はすでに非常に巨大なループであるため、そのような巨大なループによってパフォーマンスの差を広げることはできません。最も一般的に使用される約 10 要素の演算には、明らかな利点がある可能性はさらに低く、むしろ欠点が拡大する可能性があります。 。
その理由は、シングル ループ メソッド自体には明らかなパフォーマンスの向上がないため、シングル ループに依存しており、当然ながらシングル ループに基づいて外部で構築されたトランザクション メソッドでもあります。トランザクション オブジェクトの作成、関数キューの保存、関数キューの走査など、追加のオーバーヘッドが必要です。通常の使用法では結果が失われるのは当然です。
現時点で、「トランザクション」を模倣する最適化手法は失敗していると言えるでしょう。ただし、この結果はさらに分析することができます。

パフォーマンスはどこにありますか?
まず、コードの使用方法を分析し、通常の使用方法とテストで最も速いオブジェクト割り当て方法を比較します。この 2 つの違いはループ内にあるだけです (jQuery の内部問題はここでは脇に置きます。実際、jQuery.access の実装が不十分であるため、オブジェクトの割り当て方法が妨げられますが、幸いなことにそれは深刻ではありません)。 )、通常の使用は 10,000 要素です。オブジェクト割り当て方法は 5000 要素です。したがって、18435 - 17748 = 687ms は 5000 個の要素をループするのにかかる時間であると単純に考えることができ、これは実行プロセス全体の約 3.5% を占めますが、実際には実行プロセス全体のバックボーンではありません。実際には最適化の必要はありません。
では、経費の残りの 96.5% はどこに使われるのでしょうか? Doglas 氏の言葉を思い出してください。「実際には、JavaScript が遅いのではありません。遅いのは DOM 操作です。」実際、関数呼び出しなどの基本的な消費を除く残りの 96.5% のオーバーヘッドのうち、少なくとも 95% の時間が DOM 要素のスタイル変更後の再レンダリングに費やされます。

この事実を発見した後、実際にはより正しい最適化の方向性が得られました。これはフロントエンドのパフォーマンスの基本原則の 1 つでもあります。多数の子要素を変更する場合は、最初にルートの親 DOM ノードを移動します。 DOM ツリーから外されます。したがって、次のコードを使用して再度テストするとします。