Dlaczego: hover jest tak powolny w przeglądarkach webkitowych na dużej liczbie elementów DOM

Question

Gdy istnieje wiele DOM załadowanych elementami javascript stylizowanymi za pomocą: hover pseudo class (jak długi stół), efekt jest renderowany wolno/laggy w Chrome & Safari. Firefox wydaje się obsługiwać dużą liczbę wierszy z: hover dość szybko w porównaniu z webkit.

Na przykład różnicę można zauważyć, generując 10 000 wierszy z efektem: hover. 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); 

wiem 10.000 wierszy jest złym pomysłem. Wiem, że powinieneś się paginować. Jestem tylko ciekawy, dlaczego tak się dzieje.

Answer 1

Wygląda jak błąd w pakiecie Webkit. W rzeczywistości błąd był spowodowany tą zasadą:

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

jeśli spróbujesz go usunąć, Chrome zaskakująco przyspieszy.

Więc zaktualizowaniu skrzypce http://jsfiddle.net/m3f4D/

UPDATE: Jest to zgłoszone bug https://code.google.com/p/chromium/issues/detail?id=160212