Perché: hover è così lento nei browser Webkit su un gran numero di elementi DOM

Question

Quando ci sono numerosi DOM caricati con elementi javascript con stile: hover pseudo classe (come una lunga tabella), l'effetto è reso lento/laggy in Chrome & Safari. Firefox sembra gestire il grande numero di righe con: al passaggio del mouse abbastanza rapidamente rispetto al webkit.

Ad esempio, è possibile vedere la differenza generando 10.000 righe con un effetto: 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); 

So 10.000 righe è una cattiva idea. So che dovresti impaginare. Sono solo curioso di sapere la natura del perché questo è.

Answer 1

Sembra un bug in Webkit. In realtà il bug è stato causato da questa regola:

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

se si tenta di rimuoverlo, Chrome accelera sorprendentemente.

Così ho aggiornato il vostro violino http://jsfiddle.net/m3f4D/

UPDATE: Si tratta di un bug segnalato https://code.google.com/p/chromium/issues/detail?id=160212