Ai đó có thể chứng minh cho tôi rằng lời khuyên được đưa ra here (sao chép bên dưới) về việc loại bỏ các phần tử dom trước khi thay đổi chúng và sau đó chèn lại chúng nhanh hơn bao giờ hết.Hiệu suất Javascript - Dom Reflow - Điều Google
Bằng chứng, tôi muốn xem một số số liệu. Điều tuyệt vời của họ là họ nghiên cứu điều này nhưng tôi nghĩ bài viết rất yếu mà không bao gồm chi tiết cụ thể về vấn đề 'thực sự' là gì và cách sửa lỗi giải pháp là tốc độ (như tiêu đề bài viết Tăng tốc JavaScript)
Điều ....
Out-of-the-dòng chảy DOM Manipulation
mô hình này cho phép chúng tôi tạo ra nhiều yếu tố và chèn chúng vào DOM kích hoạt một reflow duy nhất. Nó sử dụng một cái gì đó gọi là DocumentFragment. Chúng tôi tạo ra một DocumentFragment bên ngoài DOM (vì vậy nó là out-of-the-flow). Sau đó chúng tôi tạo và thêm nhiều yếu tố vào điều này. Cuối cùng, chúng ta di chuyển tất cả các phần tử trong DocumentFragment sang DOM nhưng kích hoạt một reflow đơn. Sự cố
Hãy tạo một hàm thay đổi thuộc tính className cho tất cả các neo trong phần tử. Chúng ta có thể làm điều này bằng cách đơn giản lặp qua từng anchor và cập nhật các thuộc tính href của chúng. Vấn đề là, điều này có thể gây ra một reflow cho mỗi neo.
function updateAllAnchors(element, anchorClass) {
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}
Giải pháp
Để giải quyết vấn đề này, chúng ta có thể loại bỏ yếu tố từ DOM, cập nhật tất cả neo, và sau đó chèn phần tử trở lại nơi nó được. Để giúp đạt được điều này, chúng ta có thể viết một hàm có thể tái sử dụng không chỉ loại bỏ một phần tử từ DOM, mà còn trả về một hàm sẽ chèn phần tử trở lại vị trí ban đầu của nó.
/**
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
};
}
Bây giờ chúng tôi có thể sử dụng chức năng này để cập nhật các neo trong phần tử, và chỉ kích hoạt reflow khi chúng ta loại bỏ phần tử và khi chúng ta chèn phần tử.
function updateAllAnchors(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
Tuy nhiên, cả hai ví dụ đều có vẻ tương tự như vậy đối với tôi. Bất kỳ cơ hội nào bạn có thể đưa ra demo tại pastebin.me :) – redsquare
Tôi sẽ thừa nhận rằng tiện ích mở rộng làm chậm mọi thứ xuống rất nhiều vì vậy đôi khi khó có thể thấy sự khác biệt về các hoạt động nặng tính toán, ví dụ: Google Maps thu phóng. – Alex