Have I reached the limits of the size of objects JavaScript in my browser can handle?

by

Here’s what I would try: you said it’s a 44MB file. That surely takes more than 44MB of memory, I’m guessing this takes much over 44MB of RAM, maybe half a gig. Could you just cut down the data until the browser doesn’t crash and see how much memory the browser uses?

Even apps that run only on the server would be well served to not read a 44MB file and keep it in memory. Having said all that, I believe the browser should be able to handle it, so let me run some tests.

(Using Windows 7, 4GB of memory)

First Test
I cut the array in half and there were no problems, uses 80MB, no crash

Second Test
I split the array into two separate arrays, but still contains all the data, uses 160Mb, no crash

Third Test
Since Firefox said it ran out of stack, the problem is probably that it can’t parse the array at once. I created two separate arrays, arr1, arr2 then did arr3 = arr1.concat(arr2); It ran fine and uses only slightly more memory, around 165MB.

Fourth Test I am creating 7 of those arrays (22MB each) and concatting them to test browser limits. It takes about 10 seconds for the page to finish loading. Memory goes up to 1.3GB, then it goes back down to 500MB. So yeah chrome can handle it. It just can’t parse it all at once because it uses some kind of recursion as can be noticed by the console’s error message.

Answer Create separate arrays (less than 20MB each) and then concat them. Each array should be on its own var statement, instead of doing multiple declarations with a single var.

I would still consider fetching only the necessary part, it may make the browser sluggish. however, if it’s an internal task, this should be fine.

Last point: You’re not at maximum memory levels, just max parsing levels.

More Related Contents:

  1. If I set only a high index in an array, does it waste memory?
  2. Does an array contain a specific item? [duplicate]
  3. Cartesian product of multiple arrays in JavaScript
  4. Counting the occurrences / frequency of array elements
  5. How to get the difference between two arrays of objects in JavaScript
  6. How to delete an item from state array?
  7. Check if every element in one array is in a second array
  8. Completely removing duplicate items from an array
  9. How to get objects value if its name contains dots?
  10. How to find the array index with a value?
  11. How to remove element from an array in JavaScript?
  12. sort Javascript array by two numeric fields
  13. Merge Two Arrays so that the Values Alternate
  14. Merge duplicate objects in array of objects
  15. appending array to FormData and send via AJAX
  16. Javascript – remove an array item by value [duplicate]
  17. Sorting on a custom order
  18. Index an array of arrays with an array of indexes in javascript
  19. Javascript: take every nth Element of Array
  20. Array map function doesn’t change elements
  21. How to store a byte array in Javascript
  22. push() a two-dimensional array
  23. How can I remove a specific item from an array in JavaScript?
  24. Using lodash to compare jagged arrays (items existence without order)
  25. Best way to flatten JS object (keys and values) to a single depth array
  26. JavaScript foreach loop on an associative array object
  27. Why can’t I check if an array is empty with array == []?
  28. javascript – find unique objects in array based on multiple properties
  29. How do I get the last 5 elements, excluding the first element from an array?
  30. JavaScript is in array [duplicate]

Leave a Comment