javascript/dom - đắt tiền như thế nào khi tạo và sắp xếp lại các nút dom?

Question

Tôi đang cố gắng tối ưu hóa bảng sắp xếp mà tôi đã viết. Các nút cổ chai là trong thao tác dom. Tôi hiện đang tạo các hàng bảng mới và chèn chúng mỗi khi tôi sắp xếp bảng. Tôi tự hỏi liệu tôi có thể tăng tốc mọi thứ bằng cách đơn giản sắp xếp lại các hàng, không tái tạo các nút. Để tạo ra sự khác biệt đáng kể, việc sắp xếp lại nút dom sẽ phải dễ dàng hơn nhiều so với việc tạo nút. Đây có phải là trường hợp không? cảm ơn, -Morgan

Answer 1

Bạn có thể tìm thấy trang này có ích cho một số tiêu chuẩn:

http://www.quirksmode.org/dom/innerhtml.html

Answer 2

Tôi không biết liệu tạo hoặc thao tác nhanh hơn, nhưng tôi biết rằng nó sẽ được nhanh hơn nếu bạn thao tác toàn bộ bảng khi nó không nằm trên trang và sau đó đặt nó trên tất cả cùng một lúc. Dọc theo các dòng đó, có thể sẽ sắp xếp lại các hàng hiện tại chậm hơn, trừ khi toàn bộ bảng được loại bỏ khỏi DOM trước.

This page gợi ý rằng sẽ nhanh nhất để sao chép bảng hiện tại, thao tác nó như bạn muốn, sau đó thay thế bảng trên DOM.

Answer 3

Tôi đang vẽ bảng này nhanh gấp hai lần, sử dụng innerHTML, tạo toàn bộ nội dung dưới dạng chuỗi, thay vì chèn từng nút một.

Answer 4

nếu bạn có thể, tốt hơn là thực hiện thao tác dom không phải là thao tác dom thực tế, nhưng dưới dạng phương thức nào đó trong tập lệnh của bạn và sau đó thao tác với dấu cách. Vì vậy, thay vì thực hiện những gì được gọi là repaint trên mỗi nút, bạn gộp lại những gì sẽ được repaint của bạn trên mỗi nút duy nhất vào phương pháp riêng của nó, và sau đó đính kèm các nút vào một phụ huynh mà sau đó sẽ được gắn vào dom thực tế, kết quả chỉ trong hai lần sơn lại thay vì hàng trăm. Tôi nói hai b/c bạn cần phải dọn dẹp những gì trong dom đã có trước khi cập nhật với dữ liệu mới của bạn.

Answer 5

tôi đang tìm kiếm một câu trả lời này và quyết định thành lập một chuẩn mực nhanh chóng http://jsfiddle.net/wheresrhys/2g6Dn/6/

Nó sử dụng jQuery, vì vậy không phải là một chuẩn mực tinh khiết, và nó có thể là sai lệch theo những cách khác quá. Nhưng kết quả mà nó đưa ra là các nút DOM di chuyển nhanh gấp hai lần khi tạo và phá hủy các nút dom mỗi lần