jQueryスタイルの再利用効率

Question

この質問は、一部はjQueryの内部動作の知識に依存しています。

は、私は、ユーザーがスクロールダウンすることができ、縦型オーバーフローし、私のJSのコードを以下のビットでページを持っていると言う：

$(document).scroll(function() { 
    var y = $(document).scrollTop(); 
    if (y > 500) { 
     $("body").css("background-color", "red"); 
    } 
    else { 
     $("body").css("background-color", "blue"); 
    } 
}); 

これは完全に正常に動作します。ただし、次のように変更することができます。

var isRed = false; 
$(document).scroll(function() { 
    var y = $(document).scrollTop(); 
    if (y > 500) { 
     if (!isRed) { 
      $("body").css("background-color", "red"); 
      isRed = true; 
     } 
    } 
    else { 
     if (isRed) { 
      $("body").css("background-color", "blue"); 
      isRed = false; 
     } 
    } 
}); 

最初のコードよりも2番目のコードを選択する理由はありますか？私はコードの最初のビットを使用していましたが、jQueryはスクロールイベントが発生するたびにスタイルを繰り返し適用しますか？

私はReactの仕組みに慣れており、すべてのレンダリングで変化するものだけを更新しています。 jQueryにはこのような機能が含まれていますか？

両方のコードで同じことが達成されます。追加のisRed条件は、コードの第2バージョンをより冗長で複雑にしますが、効率を大幅に向上させる可能性があります。そのような利点を提供していますか？もしそうなら、最初のものの代わりにそれを使うのは意味があります。

Answer 1

は、最初の1上のコードの第2ビットを選択する理由はありますか？

場合は、[はい、あなたはスクロールのパフォーマンスの問題を抱えています。それ以外の場合は、スタイルを再適用するかどうかは関係ありません。

私はコードの最初のビットを使用しましたが、jQueryはスクロールイベントが発生するたびにスタイルを何度も繰り返し適用しますか？各スクロールイベントで

、あなたが$(body).css("background-color", "red")をした際に、jQueryのは、する必要があります：新しいオブジェクトを作成します

2. は、あなたが渡されてきた文字列は、セレクタであることを判断HTML

3. セレクタにjQuery拡張が含まれていないか確認してください。

4. クエリセレクタのDOMは

5. は、ビルド結果の一項目配列は

6. ループは、1つのエントリの配列によって効果的にこれをやって：

   element.style.backgroundColor = "red"; 
   

ブラウザを色が既にそこにあるものと一致するなら、それを無視するでしょう。

コードを複雑にすることなくjQueryを保存したい場合は、document.bodyを使用して手順2〜4をスキップできます。

$(document).scroll(function() { 
    var y = $(document).scrollTop(); 
    $(document.body).css("background-color", y > 500 ? "red" : "blue"); 
}); 

それとも、完全に呼び出しを最適化したいならば：

(function() { // To avoid making `lastColor` a global 
    var lastColor; 
    $(document).scroll(function() { 
     var y = $(document).scrollTop(); 
     var color = y > 500 ? "red" : "blue"; 
     if (color !== lastColor) { 
      lastColor = color; 
      document.body.style.color = color; 
     } 
    }); 
})(); 

（注）document.body.style.colorに対するcolorを比較することはできませんことを、彼らはかもしれあなたはまた、コード公平なビットを簡素化することができます（頻繁に）異なったフォーマットである。

Answer 2

はい、あります。あなたの最初のものは、CSSを毎秒数百回（スクロールした場合）変更します。第2のものは、シンプルで非常に効率的なデバウンサーです。簡単に

月：

var isRed = false; 
$(document).scroll(function() { 
    if (isRed !== ($(document).scrollTop() > 500)) { 
     $("body").css("background-color", isRed?"blue":"red"); 
     isRed = !isRed; 
    } 
}); 

Try it