Lý do: di chuột quá chậm trong trình duyệt webkit qua số lượng lớn các phần tử DOM

Question

Khi có nhiều DOM được nạp với các phần tử javascript được tạo kiểu bằng: lớp giả hover (như bảng dài), hiệu ứng được hiển thị chậm/lag trong Chrome & Safari. Firefox xuất hiện để xử lý số lượng lớn các hàng với: di chuột khá nhanh so với webkit.

Ví dụ: bạn có thể thấy sự khác biệt bằng cách tạo 10.000 hàng có: hiệu ứng di chuột. 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); 

Tôi biết 10.000 hàng là một ý tưởng tồi. Tôi biết bạn nên phân trang. Tôi chỉ tò mò về bản chất của việc này.

Answer 1

Dường như một lỗi trong Webkit. Trên thực tế, lỗi được gây ra bởi quy tắc này:

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

nếu bạn cố gắng loại bỏ nó, Chrome sẽ tăng tốc đáng ngạc nhiên.

Vì vậy, tôi cập nhật fiddle bạn http://jsfiddle.net/m3f4D/

CẬP NHẬT: Đây là một lỗi thông báo https://code.google.com/p/chromium/issues/detail?id=160212