Which Javascript object structure uses less memory?

When it comes to JavaScript objects, arrays, and memory usage, which of the below structures is more memory efficient?

aa = [ {'a':1, 'b' : 2}, {'a':3, 'b' : 4} ]
bb = { 'a' : [1,3], 'b' : [2,4] }

aaa = [ {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2} ];
bbb = { 'a' : [1,1,1,1,1,1,1], 'b' : [2,2,2,2,2,2,2] };

It seems that it is quite difficult to get accurate measures of how much RAM an object uses in JavaScript due to a variety of reasons. However, Chrome’s new memory tab appears to possibly help us track down which of the above is better.

In the case of aa and bb, it appears that aa uses less memory (are we looking at retained or shallow size)? It’s hard to tell because the creation of that array of objects appears to create other objects at the same time.


Screenshot of Chrome’s Memory for Creation of AA


Screenshot of Chrome’s Memory for Creation of BB

In the case of aaa and bbb, it seems the object size of bbb is smaller than the array of objects of aaa, but then again, the total ram for all of the entries is less in aaa than bbb, so which one is truly more efficient?


Screenshot of Chrome’s Memory for Creation of AAA


Screenshot of Chrome’s Memory for Creation of BBB

Developers appear to prefer working with an array of objects because it’s easier to search (myself included), but I really only want to know which structure is more efficient in terms of memory.

I am not low level enough to understand what truly happens when JavaScript objects are stored in memory. Managing memory has been abstracted due to its complexity (thanks to all who made that possible… but poor Chromium developers).

Source: stackoverflow-javascript

Jquery find() selector order and performance

For jQuery find(), does the order of the selector matter in performance?

i.e. do the two below code snippets run in the same time with the order of the selector being the only difference?

    //Option 1

    //Option 2

</div> Source: stackoverflow-javascript

Looping queries to an API is really slow

I’ve heard that it is possible to loop JSON datas by using only one query and not doing querries for every loop. Any ideas how to make this from this code?
I really need to do it because it takes up to 3 minutes to successfully load the page..

* PHP *

<?php foreach ($return as $user) {

                        $link = "http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=$devkey&steamids=$user->SteamID";
                        $json = file_get_contents($link);
                        $decoding = json_decode($json);
                        $avatar = $decoding->response->players[0]->avatar;
                        <td id="addme"><img src="<?php echo $avatar; ?>" width="32" height="32"></td>
                        <td><?php echo $user->DisplayName; ?></td>
                        <td><?php echo $user->SteamID; ?>  <a href="http://steamcommunity.com/profiles/<?php echo $user->SteamID; ?>/" target="_blank"><span class="glyphicon glyphicon-new-window" id="gotosteamprofile"></span></a></td>
                        $ipredc = substr($user->Address, 0, -6);
                        echo $ipredc; ?></td>
                        $toconver = $user->ConnectedSeconds;
                        $hours = floor($toconver / 3600);
                        $mins = floor($toconver / 60 % 60);
                        $secs = floor($toconver % 60);
                        $timeFormat = sprintf('%02d:%02d:%02d', $hours, $mins, $secs);
                        echo $timeFormat;


Source: stackoverflow-php

Array.forEach() and closure

After I read an article about JavaScript optimization, I realize there is a need to remove closures in the code to optimize the memory use.

One code pattern of mine is to use Array.forEach() as much as possible, even in such situations:

  • modify an external object using items in an array

    function updateSomething(array, toChange) {
      array.forEach(item => {
        toChange[item] = ''; // do something to change the object
  • create nested Array.forEach()

    array1.forEach(item1 => {
      array2.forEach(item2 => {
        doSomething(item1, item2);

Apparently the callback function used in the Array.forEach() creates closures. So am I abusing the Array.forEach() in these cases? Should I go back to for loop in performance-sensitive projects?

Source: stackoverflow-javascript