7

当有大量 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 行是个坏主意。我知道你应该分页。我只是好奇这是为什么。

4

1 回答 1

8

似乎是 Webkit 中的一个错误。实际上，该错误是由以下规则引起的：

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

如果您尝试将其删除，Chrome 会出人意料地加速。

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

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

于 2013-06-19T18:11:50.293 回答