How To - Save Precious Memory On Ajax Requests

Needs Cleanup

This article needs cleanup to meet our writing standards:

  • Spelling and punctuation
  • Code clarity
  • Avoid first person

Can you help? Click edit below!

Today i will be showing you how to save precious memory when using ajax requests.

Consider the following code

Event.observe(window,'load', function() {
    Event.observe('start','click',function() {
     i=0;
        interval=setInterval(function() {
            if(i<=60) {
                new Ajax.Updater('status','/periodical.php', {
                    evalScripts:true,
                    method : 'post',
                    parameters :     {
                                value: i
                                },
                    onComplete : function() {
                                i++;
 
                    },
                    insertion: Insertion.Bottom
                });
            } else { clearInterval(interval); }
        },1000);
    });
});

and in the <body>

<input type="submit" value="Start test" id="start" />
<div id="status"> </div>

and on the server side :

<?php
echo("<pre>");
        echo("<h1>    ".$_POST['value']." </h1>");
echo("</pre>");
 
?>

Okay we can see that this code calls an Ajax.Updater sending the value of the javascript variable ‘i` to the server - which the server echo’s back to the browser … nothing complicated there.. the code runs for 61 itterations once a second (so just over a minute) …

Okay so what i did was record my windows task manager output for firefox.exe when running this code …

With the code above the memory started at around 53,040k (give or take a byte) and ended on 55,112k (when the script had finished processing)

Okay now here is the code for the second unit test

Event.observe(window,'load', function() {
    Event.observe('start','click',function() {
     i=0;
        interval=setInterval(function() {
            if(i<=60) {
                var req=new Ajax.Updater('status','/periodical.php', {
                    evalScripts:true,
                    method : 'post',
                    parameters :     {
                                value: i
                                },
                    onComplete : function() {
                                i++;
 
                    },
                    insertion: Insertion.Bottom
                });
                req=null;
            } else { clearInterval(interval); }
        },1000);
    });
});

Notice that not only assign the object to a variable but i also null the request out (req=null) when it has taken place… aside this the rest of the code is the same (html & php) as described earlier..

Here is the comparison

Code Example 1:-
Start Memory: 53,040k
End Memory: 55,112k
Total Script / page usage for the test: 2,072k

Code Example 2:-
Start Memory: 52,904k
End Memory: 54,116k
Total Script / page usage for the test: 1,212k

Saving 860k in the page - not sure what sort of percentage that is, but on large pages and ones that use preiodicals for chat scriptsit will save a hell of alot of memory

Hope you can put this to good use

/Alex

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License