Hiệu suất của việc cài đặt img src thành giá trị không thay đổi?

Question

Nếu tôi có một thẻ img như

<img src="example.png" /> 

và tôi đặt nó thông qua

myImg.src = "example.png"; 

với giá trị tương tự một lần nữa, sẽ này là một không-op, hoặc trình duyệt sẽ không cần thiết vẽ lại hình ảnh? (Tôi chủ yếu quan tâm đến hành vi của IE6-8, FF3.x, Safari 4-5 và Chrome.)

Tôi cần thay đổi nhiều (hàng trăm) hình ảnh cùng một lúc và so sánh thủ công thuộc tính src có một chút không cần thiết - như tôi giả định, rằng trình duyệt đã làm điều này cho tôi?

Answer 1

Đừng cho rằng trình duyệt sẽ làm điều đó cho bạn. Tôi đang làm việc trên một dự án có quy mô tương tự đòi hỏi hàng trăm hình ảnh (động tải), với tốc độ là ưu tiên hàng đầu.

Việc lưu bộ đệm thuộc tính 'src' của mọi phần tử là rất khuyến khích. Giá trị là tốn kém để đọc và đặt hàng trăm thuộc tính phần tử DOM và thậm chí đặt src thành cùng một giá trị có thể gây ra sự kiện reflow hoặc paint.

[Chỉnh sửa] Phần lớn sự chậm chạp trong giao diện là do tất cả các vòng lặp và quy trình của tôi. Một khi những người đã được tối ưu hóa, giao diện người dùng rất linh hoạt, ngay cả khi liên tục tải hàng trăm hình ảnh.

[Chỉnh sửa 2] Theo thông tin bổ sung của bạn (hình ảnh là tất cả các biểu tượng trạng thái nhỏ), có lẽ bạn nên xem xét đơn giản khai báo lớp cho từng trạng thái trong CSS của bạn. Ngoài ra, bạn có thể muốn xem xét sử dụng cloneNode và replaceNode để trao đổi rất nhanh chóng và hiệu quả.

[Chỉnh sửa 3] Hãy thử định vị hoàn toàn các yếu tố hình ảnh của bạn. Nó sẽ giới hạn số lượng reflow cần phải xảy ra, vì các phần tử được định vị hoàn toàn nằm ngoài luồng.

Answer 2

Khi bạn thay đổi một loạt thành phần cùng một lúc, bạn thường chặn chuỗi giao diện người dùng, do đó chỉ có một lần vẽ lại sau khi hoàn tất JavaScript, nghĩa là vẽ lại trên mỗi hình ảnh thực sự không phải là yếu tố.

Tôi sẽ không kiểm tra lại bất cứ điều gì ở đây, hãy để trình duyệt chăm sóc nó, những cái mới đủ thông minh để làm điều này một cách hiệu quả (và nó chưa bao giờ thực sự là vấn đề lớn).

Trường hợp bạn sẽ thấy đây là hình ảnh mới tải và tái chảy trang khi họ tải, đó là gì đắt tiền ở đây, hình ảnh hiện đang rất nhỏ so với chi phí này.

Answer 3

Tôi khuyên bạn nên sử dụng kỹ thuật CSS Sprite. Thông tin thêm tại: http://www.alistapart.com/articles/

Bạn có thể sử dụng hình ảnh chứa tất cả các biểu tượng. Sau đó thay vì thay đổi thuộc tính src, bạn cập nhật thuộc tính background.