futurepress
fix: memory leaks in DefaultViewManager
This PR addresses memory leaks caused by window event listeners not being removed properly when destroying a book or rendition.
Changes include
- Replaced anonymous event listener in DefaultViewManager with a named function, ensuring proper cleanup.
- Updated removeEventListeners to correctly remove unload handlers.
- Fixed a typo in Stage.destroy() where "orientationchange" was misspelled.
Why this matters
Detached DefaultViewManager, Rendition, and Book were found to persist in memory after book.destroy() due to unremoved event listeners.
This fix ensures event listeners are correctly released, preventing unnecessary memory usage during repeated book loads/unloads.
Issue Reproduction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EPUB.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/epub.js"></script>
<!-- <script src="http://127.0.0.1:8080/epub.js"></script> -->
<style>
body {
font-family: sans-serif;
margin: 20px;
}
#viewer {
width: 100%;
height: 600px;
border: 1px solid #aaa;
margin-top: 10px;
}
button {
padding: 6px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="openBtn">Open EPUB</button>
<button id="closeBtn">Close EPUB</button>
<div id="viewer"></div>
<script>
let book = null;
let rendition = null;
const viewer = document.getElementById('viewer');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');
openBtn.onclick = async () => {
if (book) {
console.log('Already opened.');
return;
}
book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
rendition = book.renderTo("viewer", {
width: "100%",
height: "100%",
spread: "auto",
allowScriptedContent: true,
});
await rendition.display();
// window.book = book;
};
closeBtn.onclick = async () => {
if (!book) return;
console.log("Destroying book...");
try { await book?.destroy?.(); } catch(e){}
viewer.innerHTML = "";
book = null;
rendition = null;
console.log("Book destroyed.");
};
</script>
</body>
</html>
-
Run the snippet above in a web browser. Click the "Open EPUB" button to load an EPUB file, and then click "Close EPUB" to unload it.
-
Next, open the browser DevTools console and run:
getEventListeners(window);. You will notice that there are two event listeners remain attached:unloadandorientationchange.
If you switch to the Memory tab and take a heap snapshot, you’ll see that the Book and Rendition instances are still retained in memory.
- After replacing the original epub.js with the modified version from this PR, both event listeners are correctly removed, and the Book and Rendition objects are properly released from memory.
