2

最近、スクリプトのパフォーマンスを向上させるのに確かに役立ったjQuery最適化のヒントについて読むことに時間を費やしています。

ただし、私のサイトにはこの注目のニュースセクションがあり、マウスをホバーするとより多くの情報が所定の位置にスライドします。このセクションは、Safari（およびおそらくChromeも）以外のブラウザではあまりうまく機能しません。

この理由は、アニメーション化する前に、すべてのマウスオーバー/マウスアウトイベントでかなりのDOMトラバースと計算を実行しているためだと思います。

私の質問は簡単です：アニメーションがよりスムーズに実行されるように、以下のコードを最適化する方法はありますか？

$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').hover(function(){ 
var boxHeight = parseInt($(this).css('height'))-8;
var bottomOrSide = $(this).parents("div[id^='featured']").attr("id")
var captionPos = 76;
var captionHeight = parseInt($(this).find(".videoCaption").css('height'));
var animateTo = boxHeight-captionHeight;

$(".videoCaption", this).stop().animate({top:animateTo + 'px'},{queue:false,duration:160});
}, function() {
$(".videoCaption", this).stop().animate({top:captionPos},{queue:false,duration:100});
});

私が取り組んでいるサイトはまだ公開されていないので、ニュースセクションのスクリーンショットをアップロードして、それがどのように見えるかを示します。

ありがとう！

4

3 に答える 3

2

手始めに、共通部分式除去を行うことが可能であるため、たとえば、呼び出す代わりに

$(this)

複数回、そのオブジェクトを変数に格納し、代わりにその変数を使用します。

var current = $(this);

一方、使い捨て変数はインライン化できます。それらを時期尚早の最適化と呼ぶ人もいるかもしれませんが、コードが遅いとすでに述べられているので、時期尚早ではないと思います。

bottomOrSide変数はそこで使用されていないようです。

セレクターに関しては、長いもの全体をこれに置き換えることは可能ですか？

$('.featuredBox')
于 2009-10-07T09:01:38.977 に答える
2

別の解決策は、すべての計算をメモ化することです。

ホバーを直接呼び出さないでください。「each」を使用して計算し、「ホバー」を適用してください。
したがって（私はコードをできるだけ変更しようとしませんでした）：

$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').each(function(){ 
  var boxHeight = parseInt($(this).css('height'))-8;
  var bottomOrSide = $(this).parents("div[id^='featured']").attr("id")
  var captionPos = 76;
  var captionHeight = parseInt($(this).find(".videoCaption").css('height'));
  var animateTo = boxHeight-captionHeight;

  var params = {top:animateTo + 'px'};
  var options = {queue:false,duration:160};
  var target = $(".videoCaption", this);

  $(this).hover(function () {
    target.stop().animate(params, options);
  });
}

この解決策は、私の以前の答えをやや議論の余地のあるものにします（それらはまだ適用可能ですが、それほど重要ではありません）。ただし、プロファイルを作成することを忘れないでください。

于 2009-10-07T09:42:30.057 に答える
1

あなたはいくつかの仕事を何度も繰り返しますが、それはあなたを傷つけるでしょう。どれだけ言うのは難しいですが、これを試してみてください...

var el = $(this);
var vid = $(".videoCaption", this);
// use el.blar() instead of $(this) and vid.blar() instead of $(".videoCaption", this).blar()

また、使用するdomの適切なビットを見つけるためにコードがかなりの作業を行う必要があるように見えるため、このパネルが使用されるすべての異なる場所でdom構造が異なる必要があるようです。可能であれば、DOM構造をすべての異なる場所で同じにし、コードでその構造を利用することをお勧めします。

それが不可能な場合は、場所ごとにこの関数の一意のバージョンをコーディングしてみてください。理想的ではありませんが、パフォーマンスの問題が解決する場合は、それだけの価値があるかもしれません。

于 2009-10-07T08:57:28.220 に答える