Skip to content

Conversation

@funway
Copy link

@funway funway commented Oct 7, 2025

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>
  1. 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.

  2. Next, open the browser DevTools console and run: getEventListeners(window);.
    You will notice that there are two event listeners remain attached: unload and orientationchange.

image

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.

  1. 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.

funway added 2 commits October 6, 2025 19:09
- Updated DefaultViewManager unload listener to a named function to prevent leaks.
- Modified removeEventListeners() to properly clear unload events.
- Corrected a typo in Stage.destroy() for removing orientationchange events.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant