原因:在大量DOM元素的webkit浏览器中,悬停是如此之慢

Question

当有许多DOM加载了javascript元素时,使用:hover伪类(如长表),Chrome和Safari中的效果会变得缓慢/滞后.Firefox似乎处理大量行:与webkit相比,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会出乎意料地加速.

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

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