css - 为什么是:hover is so slow in webkit browsers over large numbers of DOM elements

Question

当有许多 DOM 加载了带有 :hover 伪类样式的 javascript 元素(如长表)时，效果在 Chrome 和 Safari 中呈现缓慢/滞后。与 webkit 相比，Firefox 使用 :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 行是个坏主意。我知道你应该分页。我只是好奇这是为什么的性质。

Answer 1

似乎是 Webkit 中的错误。实际上这个错误是由这条规则引起的:

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

如果您尝试删除它，Chrome 会意外地加速。

所以我更新了你的 fiddle http://jsfiddle.net/m3f4D/

更新:这是一个已报告的错误 https://code.google.com/p/chromium/issues/detail?id=160212