なぜ：たくさんのDOM要素上のWebkitブラウザでホバーが遅い

Question

javascript要素がロードされていて、ホバー擬似クラス（ロングテーブルのような）でスタイルされたDOMが多数ある場合、Chromeで効果は遅く/遅くなります&サファリ。 Firefoxは、多数の行を処理するように見えます。ホバリングは、Webkitと比べてかなり速いです。

たとえば、ホバー効果を使用して10,000行を生成することによって、違いを確認できます。私は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); 

は悪い考えです。私はあなたが改ページするべきであることを知っています。私はなぜこれが本質であるのか不思議です。

Answer 1

Webkitのバグのようです。実際には、このルールによってバグが発生しました。

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

クロムを除去しようとすると驚くほど加速します。

は、だから私はあなたのフィドルhttp://jsfiddle.net/m3f4D/

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