爲什麼：在大量的DOM元素上，webkit瀏覽器的懸停速度太慢

Question

當存在大量裝載有javascript元素的DOM元素樣式：hover僞類（如長表）時，效果在Chrome中變得緩慢/遲緩&蘋果瀏覽器。 Firefox似乎可以處理大量的行：與webkit相比，相當快速地進行懸停。

例如，您可以通過生成具有懸停效果的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行是一個壞主意。我知道你應該分頁。我只是好奇這是爲什麼。

Answer 1

看起來像Webkit中的錯誤。其實這個錯誤是由這個規則引起的：

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

如果你嘗試刪除它，Chrome會令人驚訝的加速。

所以我更新了提琴http://jsfiddle.net/m3f4D/

UPDATE：這是一個報告的bug https://code.google.com/p/chromium/issues/detail?id=160212