Có cách nào để gói gọn một số lệnh thao tác DOM trong một giao dịch sao cho nội dung sẽ không "nhấp nháy"? Một cái gì đó như thế này:Giao dịch Vẽ HTML HTML trong Javascript?
window.stopDrawing(); // start transaction
$("#news").append("<div>a new news item</div>");
// ... do something more
$("#news").css("top", "-150px");
window.startDrawing(); // stop transaction
Mỗi lần bạn phải cập nhật một tập hợp lớn của các yếu tố chỉ cần thiết lập một chức năng bao gồm tất cả các hoạt động, hãy gọi mozRequestAnimationFrame (hoặc webkitRequestAnimationFrame), chỉ sau khi chức năng của bạn được hoàn tất thi công hoàn toàn nó sẽ vẽ thay đổi của bạn vào màn hình.
thêm tại: https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame
Trên thực tế, có một phiên bản tiêu chuẩn của API này được gọi là [requestAnimationFrame] (http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html) – sternr
Chức năng đó không tồn tại trong firefox hoặc chrome (I don ' t biết về IE 9) bởi vì nó là thử nghiệm, đó là lý do tại sao tôi đề nghị sử dụng phiên bản tiền tố – Shedokan
Tôi tin rằng trình duyệt đang vẽ lại tài liệu chỉ khi kịch bản quay trở lại vòng lặp thậm chí, vì vậy nó sẽ không làm cho bất cứ điều gì cho đến khi kết thúc kịch bản của bạn.
Dù sao một số thao tác có thể buộc trình duyệt thực hiện một số thao tác tốn kém như tính lại kích thước của các phần tử trên tài liệu (ví dụ: khi truy xuất kích thước của phần tử sau khi thực hiện một số thao tác DOM). Vì vậy, bạn nên thực hiện thao tác DOM ngoài tài liệu càng nhiều càng tốt.
Nếu bạn có nhiều thao tác để thực hiện trên một số yếu tố, thì có thể rẻ hơn để xóa nó khỏi cây tài liệu, thực hiện thao tác và thêm lại vào cây.
Trình duyệt (các trình duyệt mới hơn) thực hiện điều này, trong nội bộ, đến mức có thể. Không có kiểm soát rõ ràng tuy nhiên. Nếu bạn đăng thêm về một tình huống cụ thể mà bạn đang thấy, ai đó có thể đề xuất tối ưu hóa. – Pointy