Tôi đang tạo giao diện html để tải hình ảnh lên máy chủ bằng cách kéo thả & Thả và nhiều tệp lựa chọn. Tôi muốn hiển thị hình ảnh trước khi gửi chúng đến máy chủ. Vì vậy, trước tiên tôi cố gắng sử dụng FileReader nhưng tôi đã gặp một số vấn đề như trong this post. vì vậy tôi thay đổi cách của tôi và tôi quyết định sử dụng blob: url như đề xuất ebidel trong bài đăng, với window.URL.createObjectURL() và window.URL.revokeObjectURL() để giải phóng bộ nhớ.window.URL.revokeObjectURL() không giải phóng bộ nhớ ngay lập tức (hoặc hoàn toàn không)?
Nhưng bây giờ, tôi có một vấn đề khác, tương tự như this one. Tôi muốn rằng một khách hàng có thể tải lên 200 hình ảnh tại thời điểm nếu anh ta muốn. Nhưng trình duyệt bị hỏng và ram được sử dụng rất cao! Vì vậy, tôi nghĩ rằng có thể có quá nhiều hình ảnh được hiển thị cùng một lúc, và tôi thiết lập một hệ thống với một hàng chờ đợi của các tập tin bằng cách sử dụng một mảng, để điều trị chỉ có 10 tập tin tại thời điểm. Nhưng vấn đề vẫn xảy ra.
Trên Google Chrome, nếu tôi kiểm tra chrome://blob-internals/ các tệp (thường được phát hành bởi window.URL.revokeObjectURL()) được phát hành xấp xỉ sau khoảng thời gian 8 giây. Trên Firefox Tôi không chắc chắn nhưng có vẻ như nếu các tập tin không được phát hành (tôi kiểm tra trên about:memory -> hình ảnh cho điều đó)
Mã của tôi có hại hay là vấn đề độc lập với tôi? Có một giải pháp để buộc các nhà hàng hải phải phát hành ngay lập tức bộ nhớ? Nếu nó có thể giúp đỡ, đây là một phần của JavaScripton mà các vấn đề xảy ra: (Xin lỗi nhưng tôi cung cấp cho ở đây một liên kết vì cơ chế thư rác hình ảnh cho các thành viên mới) http://www26.zippyshare.com/v/14195278/file.html.
EDIT
Đây là một loại câu trả lời của riêng + câu trả lời cho bennlich (văn bản quá dài cho một bình luận)
tôi hiểu từ câu trả lời của user1835582 mà tôi thực sự có thể loại bỏ các Blob/File nhưng trong khi trình duyệt cần hình ảnh, nó giữ chúng ở đâu đó trong bộ nhớ (hợp lý). Vì vậy, đó là một thực tế để hiển thị hình ảnh (nhiều & nặng) đã cho tôi treo & chậm xuống, không phải là phương pháp revokeObjectURL. Hơn nữa, mỗi trình duyệt quản lý bộ nhớ theo cách riêng của nó, dẫn đến các hành vi khác nhau. Đây là cách tôi đi đến kết luận này.
Trước tiên, hãy thử rằng revokeObjectURL hoạt động tốt, với ví dụ đơn giản sử dụng mã nguồn của https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images. Sử dụng Chrome, bạn có thể xác minh rằng Blob cũng bị thu hồi, bằng cách kiểm tra chrome://blob-internals/ hoặc cố mở hình ảnh được hiển thị sang tab mới sẽ trống. Lưu ý: để phát hành đầy đủ các tham chiếu Blob, hãy thêm document.getElementById("fileElem").value = "". Khi tôi đăng câu hỏi của mình vài năm trước, khoảng 8 giây để phát hành blob, hiện tại nó gần như ngay lập tức (có thể do cải tiến trong Chrome &/hoặc tới một máy tính tốt hơn)
Sau đó, hãy kiểm tra phí. Tôi đã làm nó với một trăm jpg của ~ 2,5 Mo mỗi. Sau khi hình ảnh đó được hiển thị, tôi đã cuộn trang. Chrome bị lỗi và Firefox chậm (không được thử nghiệm trên các trình duyệt khác). Tuy nhiên, khi tôi nhận xét li.appendChild(img) tất cả đều diễn ra tốt đẹp, ngay cả với một loạt hình ảnh khổng lồ. Điều này cho thấy rằng các vấn đề không đến từ phương pháp revokeObjectURL mà trên thực tế hoạt động đúng cách, nhưng hiển thị rất nhiều hình ảnh nặng. Bạn cũng có thể thử nghiệm để tạo một trang html đơn giản với hàng trăm ảnh nặng và cuộn nó => cùng một kết quả (lỗi/chậm).
Cuối cùng để tìm hiểu sâu hơn về quản lý bộ nhớ hình ảnh, thật thú vị khi Firefox nhìn vào: bộ nhớ.Ví dụ tôi thấy rằng khi cửa sổ đang hoạt động, Firefox giải nén hình ảnh (hình ảnh -> uncompressed-heap đi lên), trong khi raw (images -> raw) luôn ổn định (tương ứng với số lượng ảnh được tải). Có một cuộc thảo luận tốt về quản lý bộ nhớ tại đây: http://jeff.ecchi.ca/blog/2010/09/19/free-my-memory.
Siêu, tôi chính xác có cùng một vấn đề như bạn - nhưng 5 năm sau :) Cảm ơn bạn đã nỗ lực để bình luận mọi thứ chi tiết. Tôi sẽ quyết định tốt hơn không tự động xem trước TẤT CẢ hình ảnh, chỉ theo yêu cầu. Cảm ơn! –