Databases
StackOverflow2013
Postsdbo
POHave I reached the limits of the size of objects JavaScript in my browser can handle?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHave I reached the limits of the size of objects JavaScript in my browser can handle?
    primarykey
    data
    text
    <p>I'm embedding a large array in <code>&lt;script&gt;</code> tags in my HTML, like this (nothing surprising):</p> <pre><code>&lt;script&gt; var largeArray = [/* lots of stuff in here */]; &lt;/script&gt; </code></pre> <p>In this particular example, the array has 210,000 elements. That's well below the theoretical maximum of 2<sup>31</sup> - by <strong>4 orders of magnitude</strong>. Here's the fun part: if I save JS source for the array to a file, that file is >44 megabytes (46,573,399 bytes, to be exact).</p> <p>If you want to see for yourself, you can <a href="https://github.com/downloads/mjball/Stack-Overflow-Q-A/largeArray.js.zip" rel="noreferrer">download it from GitHub</a>. (All the data in there is canned, so much of it is repeated. This will not be the case in production.)</p> <p>Now, I'm really not concerned about <em>serving</em> that much data. My server gzips its responses, so it really doesn't take all that long to get the data over the wire. However, there is a really nasty tendency for the page, once loaded, to <strong>crash</strong> the browser. I'm not testing at all in IE (this is an internal tool). My primary targets are Chrome 8 and Firefox 3.6.</p> <p>In Firefox, I can see a reasonably useful error in the console:</p> <blockquote> <p><strong><code>Error: script stack space quota is exhausted</code></strong></p> </blockquote> <p>In Chrome, I simply get the sad-tab page:</p> <p><img src="https://i.stack.imgur.com/QsHwD.png" alt="enter image description here"></p> <h2>Cut to the chase, already</h2> <ul> <li>Is this <em>really</em> too much data for our modern, "high-performance" browsers to handle?</li> <li>Is there anything I can do* to gracefully handle this much data?</li> </ul> <p>Incidentally, I was able to get this to work (read: not crash the tab) on-and-off in Chrome. I really thought that Chrome, at least, was made of tougher stuff, but apparently I was wrong...</p> <hr> <h2>Edit 1</h2> <p>@Crayon: I wasn't looking to justify <em>why</em> I'd like to dump this much data into the browser at once. Short version: either I solve this one (admittedly not-that-easy) problem, or I have to solve a whole slew of other problems. I'm opting for the simpler approach for now.</p> <p>@various: right now, I'm not especially looking for ways to actually reduce the number of elements in the array. I know I could implement Ajax paging or what-have-you, but that introduces its own set of problems for me in other regards.</p> <p>@Phrogz: each element looks something like this:</p> <pre><code>{dateTime:new Date(1296176400000), terminalId:'terminal999', 'General___BuildVersion':'10.05a_V110119_Beta', 'SSM___ExtId':26680, 'MD_CDMA_NETLOADER_NO_BCAST___Valid':'false', 'MD_CDMA_NETLOADER_NO_BCAST___PngAttempt':0} </code></pre> <p>@Will: but I have a computer with a 4-core processor, 6 gigabytes of RAM, over half a terabyte of disk space ...and I'm not even asking for the browser to do this quickly - I'm just asking for it to work <em>at all!</em> ☹</p> <hr> <h2>Edit 2</h2> <p><strong>Mission accomplished!</strong></p> <p>With the spot-on suggestions from <a href="https://stackoverflow.com/questions/4833480/is-this-asking-too-much-of-a-browser/4833756#4833756">Juan</a> as well as <a href="https://stackoverflow.com/questions/4833480/is-this-asking-too-much-of-a-browser/4833631#4833631">Guffa</a>, I was able to get this to work! It would appear that the problem was just in <em>parsing</em> the source code, not actually working with it in memory.</p> <p>To summarize the comment quagmire on Juan's answer: I had to split up my big array into a series of smaller ones, and then <code>Array#concat()</code> them, but that wasn't enough. I <strong>also</strong> had to put them into separate <code>var</code> statements. Like this:</p> <pre><code>var arr0 = [...]; var arr1 = [...]; var arr2 = [...]; /* ... */ var bigArray = arr0.concat(arr1, arr2, ...); </code></pre> <p>To everyone who contributed to solving this: <strong>thank you.</strong> The first round is on me!</p> <hr> <p><sub>*other than the obvious: sending less data to the browser</sub></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USMatt Ball
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHave I reached the limits of the size of objects JavaScript in my browser can handle?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHave I reached the limits of the size of objects JavaScript in my browser can handle?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHave I reached the limits of the size of objects JavaScript in my browser can handle?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIMO the first step to solving the problem is giving good reason why you really need to do something like this in the first place... just sayin'...
      singulars
      1. POHave I reached the limits of the size of objects JavaScript in my browser can handle?
      1. USCrayon Violent
    2. COWhat are these 210,000 'elements'? Integers? Multi-dimensional arrays? Objects with many named properties representing the results of a database query?
      singulars
      1. POHave I reached the limits of the size of objects JavaScript in my browser can handle?
      1. USPhrogz
    3. CO@MattBall download the chromium source. Compile it, run it locally and turn the debugger on.
      singulars
      1. POHave I reached the limits of the size of objects JavaScript in my browser can handle?
      1. USRaynos
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload