7

:hover 疑似クラス (長いテーブルなど) でスタイル設定された javascript 要素がロードされた DOM が多数ある場合、Chrome と Safari で効果が遅く/遅延します。Firefox は、webkit と比較して、:hover を使用して多数の行をかなり迅速に処理するようです。

たとえば、:hover 効果で 10,000 行を生成すると、違いがわかります。 http://jsfiddle.net/jschin/VwmjT/

var table = document.createElement('table');

for (var i=0; i<10000; i++) {
    var r = document.createElement('tr');

    for (var j=0; j<3; j++) {
        var c = document.createElement('td');
        c.appendChild(document.createTextNode(i*j));
        r.appendChild(c);
    }

    table.appendChild(r);
}

document.getElementById('b').appendChild(table);

10,000 行が悪い考えであることはわかっています。ページネーションする必要があることはわかっています。これがなぜなのかという性質について、私はただ興味があります。

4

1 に答える 1

8

Webkit のバグのようです。実際、このバグは次のルールによって引き起こされました。

tr:nth-child(even) {
    background-color: #F8F9FC;
}

削除しようとすると、Chrome は驚くほど高速になります。

だから私はあなたのフィドルを更新しましたhttp://jsfiddle.net/m3f4D/

更新: 報告されたバグですhttps://code.google.com/p/chromium/issues/detail?id=160212

于 2013-06-19T18:11:50.293 に答える