2

I'm building a large (multi gb) Blob from a large array of smaller blobs client side to upload to Firebase Storage. However, when I call the blob constructor on the array the Chrome tab freezes for a bit then crashes. It works fine when the Blob is smaller (hundreds of mb) The Chrome documentation suggests I shouldn't make the large blob as fast:

Creating Large Blobs Too Fast

Creating a lot of blobs, especially if they are very large blobs, can cause the renderer memory to grow too fast and result in an OOM on the renderer side. This is because the renderer temporarily stores the blob data while it waits for the browser to request it. Meanwhile, Javascript can continue executing. Transfering the data can take a lot of time if the blob is large enough to save it directly to a file, as this means we need to wait for disk operations before the renderer can get rid of the data.

How do I create it more "slowly" so it can be paged to disk?

Ryan Tremblay
  • 169
  • 1
  • 3
  • 12

1 Answers1

2

I realized the issue wasn't the size of the blobs in the array I was feeding the Blob constructor, it was the size of the array. There were millions of tiny blobs. I changed the timeSlice of the MediaRecorder that was making the array so it would make large blobs every 10 seconds instead of tiny ones every 10ms and that fixed it.

Ryan Tremblay
  • 169
  • 1
  • 3
  • 12
  • 1
    Thanks so much for coming back and adding your answer. This just saved me a ton of trouble – Greg Micek Jun 04 '21 at 17:58
  • For others, this is the link to the chrome documentation https://chromium.googlesource.com/chromium/src/+/HEAD/storage/browser/blob/README.md – Greg Micek Jun 04 '21 at 18:11