17

多くの行 (この例では 100) を持つテーブルでマウスオーバー イベントを使用すると、IE8 で奇妙なパフォーマンスが発生することに気付きました。私はさまざまなアプローチを試しましたが、好きな/必要なだけ速くする方法を見つけることができないようです.

イベントごとにクラスを切り替えると、IE のすべてのバージョンでパフォーマンスが低下します。JavaScript IE6 と IE7 を使用して CSS を直接操作すると、大幅に高速化されますが、IE8 のパフォーマンスは依然として低下します。

何か案は ？他のすべてのブラウザーと比較して、マウスオーバーイベントの実行が非常に遅くなる原因を知りたいです。

これが IE6 にのみ発生した場合は、理解して通過させることができますが、ブラウザーの最新バージョンが最も遅いバージョンの場合、悪い経験をするユーザーがますます増えるだけです.

JQuery ホバーを使用した例: http://thedungheap.net/research/

編集:例を更新して、10 行と 200 行の違いを簡単に確認できるようにしました。これは同じドキュメント内にあるため、DOM サイズ全体で問題になることはありません。

4

7 に答える 7

5

:hover は、どのように実装しようとしても、IE8 では非常に遅くなります。実際、javascript の onmouseover、onmouseout イベントは、CSS よりもはるかに高速なホバー効果の作成方法を提供します。

IE8 での最速の例:

<table>
<tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'">
   <td>foo bar</td>
</tr>
</table>

遅い例:

<style type="text/css">
   tr.S1    {background-color:#000000}
   tr.S2    {background-color:#FFFFFF}
</style>
<table>
<tr class="S1" onmouseover="this.className='S2'" onmouseout="this.className='S1'">
   <td>foo bar</td>
</tr>
</table>

非常に遅い例: JSFiddle

<style type="text/css">
   tr.S     {background-color:#000000}
   tr.S:hover   {background-color:#FFFFFF}
</style>
<table>
<tr class="S">
   <td>foo bar</td>
</tr>
</table>
于 2010-04-19T19:39:25.750 に答える
4

ところで、css のみを使用して :hover セレクターを使用できるすべてのブラウザーで使用できます。IE6 の場合のみ、最速のソリューションを追加できます。

于 2009-10-06T16:39:01.110 に答える
1

イベントバブリングを使用してみてください。ホバーイベントをテーブルにのみ追加してから、ターゲット要素を確認します。

$(function() {
    $('table').hover(function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000');
    }, function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#fff');
    });
});
于 2009-10-06T16:49:01.090 に答える
0

私はこの問題に直面し、次の回避策を実装しました

var viewTable = jQuery("table.MyTable");
var temDiv = jQuery("<div class=\"HighlightClass\" style=\"display:none\"></div>").appendTo("body");
var highlightColor = temDiv.css("background-color");
viewTable.mouseover(function(eventObj){
    jQuery(eventObj.target).parents("tr:first").css("background-color", highlightColor);
}).mouseout(function(eventObj){
    jQuery(eventObj.target).parents("tr:first").css("background-color","");
});

これがお役に立てば幸いです。

于 2009-12-09T10:23:12.577 に答える
0

実際にメトリックを見なくても、私には十分に速いようです。

切り替える代わりに、マウスオーバー/マウスアウトを試すことができます。イベントの委任を試すこともできます。これは、多くの場合、dom内のこの多くの要素に役立ちます。

    $("tr").mouseover(function() {
            $(this).css('backgroundColor', '#ffc000');
        })
        .mouseout(function() {
            $(this).css('backgroundColor', '#fff');
        });
于 2009-10-06T16:46:36.947 に答える
0

行ごとに1つしかない場合に何が起こるかを確認しようとしましたか？DOM（または各行）の要素の数がパフォーマンスに影響を与える可能性があるかどうかを知りたい。そうしないと、ie8がセレクターエンジンでタグをトラバースする方法に問題が発生する可能性があります。本当の答えではありませんが、試してみることがあります。

IE8はありません。または、自分で試してみます。

于 2009-10-06T16:41:04.600 に答える
0

この古い回答に投稿して申し訳ありませんが、それは関連性があり、このページはグーグルによってよくランク付けされていると思います...

うわー、私はこの問題にかなりの時間を費やしました.Javascriptを使用しようとしましたが、それでも遅かった.

背景画像を使用する場合の解決策は次のとおりです。

私がこの問題を抱えていたプロジェクトは、タブを左右にアニメーション化するために使用する左右のボタン/矢印のホバー効果だったので、これは私にとって本当の問題でした.カーソルがボタン領域に入ると、通常の画像が消え、下の画像が数ミリ秒間表示され、最終的にホバー画像が表示されます。

本当の解決策は、画像スプライトを使用することでした。そうすれば、純粋な css でも遅延はまったくありません。アイデアは、内部にすべての異なる画像状態（通常/ホバー/選択済み/非アクティブ/など）を含む単一の画像を作成し、画像を背景画像として設定し、ホバー効果の背景位置の値を調整するだけです。その他。

CSS スプライトについて詳しく知りたい場合: http://css-tricks.com/css-sprites/

于 2013-04-17T20:21:49.170 に答える