Fix: Memory leak in blob files when browsing extremely quickly while reading

Author: ollm

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Asynchronous progress check in the context menu (Mark as read/unread) [`ca51b12`](https://github.com/ollm/OpenComic/commit/ca51b122372c89b4414572b31f7bf05ac7800c22)
 - The application loops and freezes when opening files on the network (UNC paths) [`7ca4d20`](https://github.com/ollm/OpenComic/commit/7ca4d200730d5b2814e24cad4b34969ab38a2857)
 - Prevent concurrent reads of the same file [`cefa1c5`](https://github.com/ollm/OpenComic/commit/cefa1c552309a27e04ec6c6c5b7d2549028eeed5)
+- Memory leak in blob files when browsing extremely quickly while reading
 
 ## [v1.6.2](https://github.com/ollm/OpenComic/releases/tag/v1.6.2) (08-09-2025)
 

scripts/dom.js

@@ -566,6 +566,7 @@ async function loadIndexPage(animation = true, path = false, content = false, ke
 	onReading = _onReading = false;
 
 	fileManager.revokeAllObjectURL();
+	reading.render.revokeAllObjectURL();
 	workers.clean('convertImageToBlob');
 
 	scroll.reset();
@@ -1283,7 +1284,7 @@ function compressedError(error, showInPage = true, snackbarKey = '', path = fals
 		});
 
 		if(path)
-			console.warn('%cError loading compressed file %c'+path+'%c: '+message, '', 'color: #cc0000;', '');
+			console.warn('%cError when unzipping %c'+path+'%c: '+message, '', 'color: #cc0000;', '');
 	}
 }
 
@@ -2670,6 +2671,7 @@ var readingActive = false, skipNextComic = false, skipPreviousComic = false;
 async function openComic(animation = true, path = true, mainPath = true, end = false, fromGoBack = false, fromNextAndPrev = false)
 {
 	fileManager.revokeAllObjectURL();
+	reading.render.revokeAllObjectURL();
 	workers.clean('convertImageToBlob');
 
 	dom.setCurrentPageVars('reading');

scripts/file-manager.js

@@ -2419,7 +2419,7 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 
 			this.setFileStatus(file, {rendered: true, widthRendered: this.config.width});
 
-			return {blob: URL.createObjectURL(blob), width: viewport.width, height: viewport.height};
+			return {blob: URL.createObjectURL(blob), width: viewport.width, height: viewport.height, size: blob.size};
 		}
 
 		return false;
@@ -3637,7 +3637,7 @@ function revokeObjectURL(path)
 }
 
 function revokeAllObjectURL()
-{
+{	
 	for(let key in blobObjectsURL)
 	{
 		URL.revokeObjectURL(blobObjectsURL[key]);

scripts/image.js

@@ -163,7 +163,7 @@ async function resizeToBlob(fromImage, config = {})
 				// URL.createObjectURL(resizedBlob)
 				// URL.revokeObjectURL();
 
-				resolve({blob: URL.createObjectURL(blob), info: info});
+				resolve({blob: URL.createObjectURL(blob), info: info, size: blob.size});
 			}
 
 		});

scripts/reading/render.js

@@ -216,6 +216,9 @@ async function focusIndex(index, doublePage = false)
 
 function revokeAllObjectURL()
 {
+	// const total = renderedObjectsURL.reduce((acc, o) => acc + o.data.size, 0);
+	// console.log(`Total blob payload megabytes: ${(total / (1024 * 1024)).toFixed(2)} MB in ${renderedObjectsURL.length} images`);
+
 	for(let i = 0, len = renderedObjectsURL.length; i < len; i++)
 	{
 		renderedObjectsURL[i].img.classList.remove('blobRendered');
@@ -426,7 +429,7 @@ async function render(index, _scale = false, magnifyingGlass = false, queueIndex
 						if(name)
 						{
 							data = await file.renderBlob(name, _config);
-							if(queueIndex !== queue.index('readingRender')) return; // Return if the queue is different
+							if(queueIndex !== queue.index('readingRender')) return URL.revokeObjectURL(data.blob); // Return if the queue is different
 
 							img.src = data.blob;
 							img.classList.add('blobRendered', 'blobRender', 'sizeFromImg');
@@ -479,7 +482,7 @@ async function render(index, _scale = false, magnifyingGlass = false, queueIndex
 					try
 					{
 						let data = await image.resizeToBlob(src, _config);
-						if(queueIndex !== queue.index('readingRender')) return; // Return if the queue is different
+						if(queueIndex !== queue.index('readingRender')) return URL.revokeObjectURL(data.blob); // Return if the queue is different
 
 						img.src = data.blob;
 						img.classList.add('blobRendered', 'blobRender');
@@ -608,5 +611,6 @@ module.exports = {
 	resized: resized,
 	setEbookConfigChanged: setEbookConfigChanged,
 	setOnRender: setOnRender,
+	revokeAllObjectURL: revokeAllObjectURL,
 	get rendered() {return rendered},
 }