Web Page Crashes Caused by File Downloads

Recently implemented an async file download feature. In Chrome, triggering downloads of files with certain sizes like 200MB causes the browser page to crash, while other browsers work fine. No errors appear in the console. The same operations work fine in Safari/Firefox - only Chrome has this issue. This problem was eventually resolved, marking it down here.

Error Information

Description:

• Developer Tools console shows no other error information.
• Web page error message is Error code:RESULT_CODE_KILLED_BAD_MESSAGE

Related download logic code is as follows:

function downloadFile(packets) {
    const blob = new Blob(packets, {
      type: 'application/octet-stream',
    });
    const downloadLink = document.createElement('a');
    document.body.appendChild(downloadLink);
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.target = '_self';
    downloadLink.download = 'empty.txt';
    downloadLink.click();
  }

Besides inconsistent behavior across different browsers, another phenomenon is that since we have two APIs for downloads, one (A) works while the other (B) doesn’t. Comparison reveals the only difference is the chunk size of binary data: one is 3KB, the other is 100KB.

Analysis

Since one API download method works fine, and the only difference is chunk size, the problem was directly identified: chunk size too small causes 200MB data to create an excessively large memory array, leading to page crashes. It’s understandable that other browsers don’t crash - different browsers have different limits for this.

Solution

For this issue, simply adjusting the 3KB chunk size to 100KB works. However, if file sizes increase further, this problem will still occur, so a fundamental solution is needed.

There are 2 fundamental approaches:

1. Direct streaming save - JS has Stream support, allowing streaming saves without consuming large memory, especially for large files
2. Many large file downloads expose URLs and delegate to browser downloads. Here, blob means the webpage manages the download process itself, so memory overhead is unavoidable, especially problematic for large files.

Extension

For example, Chrome has limited memory per tab. If a webpage uses a parameter to store 300-500MB of data, the page will also crash. Therefore, memory usage needs to be careful. For downloads, especially large data volumes, synchronous download solutions should be prioritized.