I have a requirement to display various files to users, primarily as plain text. However, users have the ability to upload arbitrary files, including binary files. Some of these files can be quite large, up to 10 MB in size.
The problem happens when I am attempting to load a heavy binary file into an HTML - it hangs up the entire page for about a minute.
I've been able to replicate this issue on codepen. It is very simple, for HTML:
<button id="load_json"> Load JSON </button>
<button id="load_binary"> Load Binary </button>
<pre id="display"></pre>
and for JS:
const createDataLoader = (url) => async () => {
const response = await fetch(url);
const text = await response.text();
display.innerText = text;
};
load_json.addEventListener(
"click",
createDataLoader(
"https://raw.githubusercontent.com/HKGx/repro/main/10mb-sample.json"
)
);
load_binary.addEventListener(
"click",
createDataLoader("https://raw.githubusercontent.com/HKGx/repro/main/file.bin")
);
Additionally, I've uploaded example files to github.
When presenting text-based files such as JSON or CSV, the display process is pretty smooth, taking just a second or two to render without noticeable stutters.
However, this smooth behavior changes when dealing with binary files. I've found only a partial solution by avoiding loading of the entire file, although it is still not perfect. It has a choppy feeling when scrolling through binary files (which doesn't happen with normal text files).
EDIT: I have noticed that the above works SIGNIFICANTLY better on Firefox. It is taking only a few seconds instead of minutes.
