为什么：hover在Webkit浏览器中通过大量DOM元素是如此缓慢 [英] Why :hover is so slow in webkit browsers over large numbers of DOM elements

问题描述

如果有大量DOM加载了以：hover伪类（如长表）样式化的javascript元素，则在Chrome&苹果浏览器。与webkit相比，Firefox似乎可以用：hover快速处理大量行。

When there are numerous DOM loaded with javascript elements styled with :hover pseudo class (like a long table), the effect is rendered slow/laggy in Chrome & Safari. Firefox appears to handle the large number of rows with :hover fairly quickly compared with webkit.

例如，您可以通过生成：hover效果生成10,000行来看到差异。
http://jsfiddle.net/jschin/VwmjT/

For example, you can see the difference by generating 10,000 rows with a :hover effect. 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行是一个坏主意。我知道你应该分页。我只是好奇为什么会这样。

I know 10,000 rows is a bad idea. I know you should paginate. I am just curious as to the nature of why this is.

推荐答案

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

Seems like a bug in Webkit. Actually the bug was caused by this rule:

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

如果尝试将其删除，Chrome会意外地加速。

if you try to remove it Chrome surprisingly accelerates.

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

So i updated your fiddle http://jsfiddle.net/m3f4D/

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

UPDATE: It is a reported bug https://code.google.com/p/chromium/issues/detail?id=160212

这篇关于为什么：hover在Webkit浏览器中通过大量DOM元素是如此缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！