Rò rỉ bộ nhớ Chrome với POST có hình ảnh được mã hóa base64 trong đầu vào - cách giải quyết?

Question

Vì vậy, vì một số lý do tôi cần phải POST hình ảnh được mã hóa base64 trong một đầu vào bằng cách sử dụng MẪU. Kích thước của hình ảnh ~ 1,1MB, kích thước 2500x1700. Kích thước được mã hóa Base64 ~ 1,5MB.

Vì vậy, tôi có hai yếu tố đầu vào trong biểu mẫu: tệp đầu vào và đầu vào bị ẩn. Sau khi tải xuống một hình ảnh để nhập ẩn (sử dụng FileReader để chuyển đổi hình ảnh thành base64), tôi xóa giá trị tệp đầu vào, vì vậy, không có tệp phụ.

Khi tôi cố gắng gửi trang biểu mẫu bị đóng băng và mức tiêu thụ bộ nhớ tăng từ 50% lên 93% (RAM 4Gb) và sau đó Chrome gặp sự cố.

Khi tôi cố gắng chạy trang này trong Firefox (luôn chậm và lag) Tôi đã có bài đăng ngay lập tức mà không cần tiêu thụ bộ nhớ bổ sung.

Tất nhiên, tôi sẽ đăng vấn đề này lên Chrome nhưng giờ tôi cần biết: có thủ thuật nào để tránh không? Vâng, có lẽ tôi không phải là người đầu tiên tìm thấy lỗi này.

---

Ok, do đó, nếu sử dụng input.value = e.target.result trong sự kiện onload FileReader, tôi có được rò rỉ bộ nhớ. Nếu tôi đặt văn bản tùy chỉnh độ dài bằng nhau thành input.value, không có vấn đề gì. Vì vậy, tôi không nghĩ rằng e.target.result có thể lưu tham chiếu đến FileReader (hoặc nó có thể?), Bởi vì nó là chuỗi. Vì vậy, chúng tôi có vấn đề gốc chrome khi nhận được kết quả FileReader.

---

input.addEventListener("change", function() { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
    document.getElementById("input_hidden").value = e.target.result; 
    }; 
    reader.readAsDataURL(this.files[0]); 
}); 

Answer 1

Hãy thử sử dụng một vô hình <textarea> thay vì input hidden.

Nó sẽ giống như sau:

<textarea style="display:none" id="XXX"> 
$("XXX").value = base64 

Ngoài ra hãy chắc chắn để loại bỏ các input file hoàn toàn, giữ nó bên ngoài của các thẻ hình thức sau đó loại bỏ nó từ DOM.

Hy vọng điều này sẽ giúp