I'm working on an Ajax library that I plan to use on several upcoming
projects. Everything seems to work just great...
Now I want to get into the finer aspects of checking things... How
much memory am I using, are my objects making themselves available for
garbage collection adequately, etc.
Are there tools you can recommend (especially for IE and Firefox) that
I can use to get this information?
I've written some functions that seem to be able to handle parallel AJAX requests. However, I am not sure if they would work under all circumstances.My idea was to create a separate object for each AJAX request in order to bind the right handler function to the appropriate .onreadystatechange. I have used an array to store references to the created objects so that they would not be garbage collected as long as needed (see the lines commented out below). I have noticed, however, that everything works nicely even if I don't save these references -- so, with these lines commented out.
My question basically is whether it is safe to do so, and what prevents these objects from being deleted by the garbage collector. As both the event and the handler function appear to be in the same object, I think it will not stop the garbage collector.
In my code, ajax_req() is called to make a request; it will create the new ajax_abs object whose constructor takes care of the rest.
// ajaxrequests=new Array();
function ajax_abs(method,page,str,dest,todo,myno){
function init(){
[code]....
Furthermore, is it possible to tell the interpreter after the request succeeds, that now it should garbage-collect the object?
What is the best way to prevent memory leaks in IE6 and IE7?
I'm working on an internal web app that just gets slower and slower, using more and more CPU load and memory, unless and until you close the browser and start, again.
I have the AJAX-script. It eats memory about 4Kb per one callback.
Script reflects messages from server application in real-time. I form
messages, and put them into the iframe. If mesages more than 40 last
message delete. Can you check the script and say about my mistakes? Code:
I have a question regarding how to prevent memory leaks in Internet
Explorer when using closures. I already knew about the circular
reference problem, and until now was able to prevent memory leak
problems. But I needed to store DOM elements and can't solve it
anymore. So I search the group archive to see if I missed any
valuable information. I found some interesting articles, but somehow
could not apply it to my problem or I did not understand it fully.
In particular the articles that talked about setting variables to
NULL seemed as an easy solution, but I think I didn't understand it,
because it didn't seem to work.
So, let me explain my problem in more detail. I am working on some
very dynamic and complex page. It uses AJAX (XMLHttpRequest) to alter
different parts of the page. This already disqualifies the finalize
method solution to cleanup memory leak problems. I use several
"component classes" to do the work of creating DOM elements in some
container element and provide an easy to use interface for
manipulation the content. For example I can call
component.setBackgroundColor("red")
and the component takes care of changing the style on the correct
DOM element that is encapsulated in the component. In reality the
component uses more complex interface method, but I hope you
get the picture of why I do this.
Let me show you some example code:
function MyComponent()
{
var div;
var handler = null;
this.generate = function generate()
{
div = document.createElement("div");
div.onclick = MyComponent.createClickHandler(this);
// normally more elements are created here
return div;
}
this.setBackgroundColor = function setBackgroundColor(value)
{
div.style.backgroundColor = value;
}
this.getHandler = function getHandler()
{
return handler;
}
this.setHandler = function setHandler(value)
{
handler = value;
}
}
MyComponent.createClickHandler = function createClickHandler(component)
{
return function(event)
{
var handler = component.getHandler();
if (handler != null)
handler(event);
}
}
This "component class" can be used like this:
var container = document.getElementById("container");
var component = new MyComponent();
container.appendChild(component.generate());
....
component.setBackgroundColor("red");
component.setHandler(function(event) {alert("Stop touching me!")});
The problem, of course, is that this code will create a memory leak
in Internet Explorer. I need the component in the event handler to
get the handler dynamically, but the div is stored there too,
creating a circular reference.
One of the things I tried doing is making a DOMStorage "class" like
this:
function DOMStorage()
{
var map = new Object();
this.get = function get(id)
{
return map[id];
}
this.put = function put(id, obj)
{
map[id] = obj;
}
}
var storage = new DOMStorage(); //global
Instead of storing the div element directly in the component, I store
it under an id in the DOMStorage and use it to retrieve it later.
This actually prevented the memory leak. I don't really understand
why, because I still see a circular reference. Maybe Internet
Explorer does not count references in the global scope as a circular
reference? When I move the global storage to inside the container
object I get the memory leak again.
Unfortunately I am unable to use a global DOMStorage, because the
"component class" in instantiated many times, and they must all have
their seperate DOM elements.
Perhaps I have to generate unique ID's when I put a DOM element into
the global storage? It seems so over-the-top for something that works
perfectly fine in Firefox.
What are my alternatives?
I have a table, 10 cols, 200 rows. Using tablesorter causes a memory leak on every page refresh of almost 2mB. A smaller table causes a proportionately smaller memory leak. Is there way to clear this memory? I've tried setting inner html of the table to '', but it makes no difference. Is there even a universal method i can call to remove any trace of any jquery plugin I have on the page?
View 3 Replies View RelatedI have a jquery based system with ajax calls instead of page refreshes. Every time I return some ajax content, it replaces the content on the main div.
function execcmdcallback(data, textStatus, XMLHttpRequest)
{
$("#divmain").html(data);
data = null;
}
Each time this executes, the browser memory increases by about 600-900kb. Can anyone suggest a way of doing this where the old memory is freed so there is no significant increase in browser memory on each ajax call ?
I've studied this a bit, [URL]..., but I have to admit I don't quite understand it I see the same issue on IE8, FF and Chrome. FF comsumes less memory per ajax call and frees some memory seconds later, but still the total working set is increasing on each call by 300k in FF and 600 to 900 in chrome and IE
I'm building a JavaScript-based calendar for a client that will require me to replace the page's HTML based on the user's input. For example, if the user clicks on a particular date, then the month/week calendar will be replaced with the day calendar. Needless to say, there are several event listeners involved. However, if I suddenly swap out the month calendar for a day calendar, does that mean that there are several event listeners in memory for elements that no longer exist? Or are those listeners destroyed when the elements are destroyed? Basically my question is, every time I swap out the HTML, do I have to detach all of the old events too?
View 3 Replies View RelatedI've been searching the web for a while now, and I haven't come across a conclusive solution for memory leaks due to replacing nodes with frequent AJAX updates. I wrote a class that pulls an RSS feed frequently (e.g. every 5 seconds) and updates an HTML element with new information. In the process, it removes the old nodes and replaces them with new ones. It works fine visually. The only problem is that it has terrible memory leak complications; when I put the script on to run, it increases the memory usage by about 1MB every few seconds at an accelerated 1000-ms delay between updates!
(That's 100MB every few minutes!) I discovered this when I let the script run for a few hours straight, not thinking anything of it, and when I returned to my computer, it was frozen up Opera seems to be the worst at its memory management on this script, Safari and Chrome are in the middle, and Firefox seems to handle it the best, but nonetheless there are memory leaks in all four. (I haven't tested IE yet, but based on what I read, I would expect that it might even be worse than Opera!)
[Code]....
The problem is, the extension tend to crash when there is no internet connection, and sometimes, the http requests fail to communicate with gmail server, they got built up over time and end up flooding the memory.
[Code]...
I have this sites: index.html with this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
[Code].....
what I need is set an image title with given index (1)withvalue of span with given index (1). I tried some laborations with gt(), index(), but there is no success.
What do you think it would be the best way in Javascript to clear / delete / unset a variable after usage so that the garbage collector can free some extra memory?
Im just setting variables to null like this:
HTML Code:
var useless = "Tomato: 2Kg";
useless = null;
var DIV = document.createElement("DIV");
DIV = null;
I don't know if this is exactly the best way but at least the variable is set to null and maybe it becomes eligible for the garbage collector (correct my if I'm wrong, I'm just guessing).
If I use delete() the variable is not actually deleted and the value is still accesible.
First the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function TextScroll(scrollname, div_name, up_name, down_name, top_name){
[Code]...
When I use mouse wheel in Firefox to scroll contents of the DIV, memory usage in Firefox goes through the roof. Code above is a fully working page, if anyone would like to see what's up, just load it up, and start moving your mouse wheel in the area with text. You don't actually have to scroll the text, just moving the wheel back and forth in that DIV will do. Memory usage will start going up quite fast, and after you stop moving the wheel, it will finally come down a bit after a short while. I've highlighted in red the line where mousewheel event is registered for Firefox. I'm not sure if it's really a problem, but since Opera and IE don't have any strange memory usage, and Firefox does, maybe I did something wrong. In everyday use it shouldn't matter [don't expect to have kilometers of content to scroll], but anyway, it is a bit unsettling.
I have a form wherein there are around 200-300 rows of homogenous
data, each having around 30 input fileds of its own.So totally, there
are more than 6000 input fields . Now, when the user submits this page,
i need to loop through the checkboxes and identify the ones that are
checked. I can't use the getElementsByName() since the checkbox names
are different. I'm using getElementsByTagName("input"). Because of the
huge amount of data, this method takes around 4-5 secs to evaluate
before submitting the form. Is there some way to get the collection of
checkboxes without having to loop through all the input fields?
I've been working on a dynamic script using the DOM and wanted a routine that would parse out the element attribute collection. I came up with a routine that works in FireFox 1.5 and Opera 8, but it doesn't work in IE 6. Any ideas? Code:
View 3 Replies View RelatedI have a .net application that I am trying to add some javascript code
to for a client-side execution. What I want to do is resize all the
HTML text fields on my web form, but instead of writing a line for
each text box I would like to loop through a collection of controls
and resize the control if it is a text field. Is there a way to do
this in javascript? The function below is what I have been toying with
for the past couple of hours. Another idea was to use a css, but I
can't find an element for the text field.
function Test()
{
Tarray = new Object;
Tarray = document.Form1.children
for (var prop in Tarray)
{
//document.writeln(Tarray.toString);
var s;
s = prop
if (Left(s, 3) == "btn")
{
prop.height = "20px";
}
}
}
I have collection: var collection = $(input);
var i = 3;
Is there easier way to get third jquery object from collection. Currently I'm using method like
$(collection.get(i)) or $(collection[i])
But I think something like this could be more comfort:
example: collection.get(i).addClass('....');
Here's one that I don't understand:
<script type="text/javascript">
fso = new ActiveXObject("Scripting.FileSystemObject");
myCollection = new Collection();
[code]....
During execution, I get a "Object not a collection" error when I try to pass "MyCollection" to the Enumerator function. What am I missing?
I am a visiting researcher at a laboratory this summer and my
current task is investigating javascript obfuscation techniques. I am
trying to get a relatively large sample of website containing
javascript code so I can analyze it and determine if it is:
1) obfuscated
2) malicious
I have a fairly decent inference what the result will be, but it would
be nice to have statistics on my side. Having said that, I believe it
will be necessary to have a very large sample size to perform my
analysis.
Now for my question, does anyone know if there are any ways to utilize
a web browser or other component to automatically find javascript
samples? Google has not yielded any results, and the code search
merely searches repositories; not exactly what I need.
Short of rolling my own crawler, can anyone offer any suggestions that
will aid me in my task?
I have a structure of similar blocks
- all containig a clickable image
- each identified by a unique hidden index
I want to find the value of that index when clicking on the image The code is something like :
<div class="bloc">
<p class="enTete">
<img class="modif" src="monImage">
<input type="hidden" value="1" />
[Code].....
How can i write the selector to read the right index when one the image is selected ?
Somethig like : (The '?' means I dont find how to do !!!!)
$(' ? .modif').click(function() {
test = $(' ? .index').val();
alert(test);
});
How can I validate a collection of fields, instead of validating the whole form? I'm using asp.net which uses one form element, which I even don't use. I have a tab panel with on each tab a couple of fields. I only want to validate the fields on a tab.
View 3 Replies View Related'm having a very hard time making this work and be happy in both IE and Firefox. Basically, I'm setting a timeout to get an array of the form values if not present, or compare against if they are present, and if any change in values, submit the form to auto-save it.
below is my coding, basically I am using document.forms[thisformname].elements - but that gives me a lot of things that are NOT form fields and I just need to read input:text, input:checkboxk, input:radio, textarea, and select elements - nothing more. I'm open to any suggestions and some of you smart guys could probably write this in half the lines I did.
Code:
//auto-save coding
var autosaveTimelapse=0;
var autosaveTimeout=3; //every n seconds
[code]...
I have the following nested javascript collection (below) and I'm trying to access the information within the collection using prototype so I can properly style and layout the data.
var teams = {
"team1:" {
"QB": "Alexander Hamilton",
"RB": "John Jay",
[Code]....
I'm using .parent on a draggable table row and need to check the contents of every cell in a particular column in the table. $(ui.draggable.parents("table")[0]) This gives me the table.. how do I get say the collection of cells in column 2. I thought about something like this: $(ui.draggable.parents("table")[0](tr td[1]))
View 2 Replies View RelatedLet's say $pages is a collection containing all div elements that have an id of page1 or page2. From this, I wish now to select now only the page div (i.e page1 or page2) that contains a descendant with a class of 'A'. Tried lots of things, just can't get the format right.
View 5 Replies View RelatedI have small webBrowser1 and I have the 3 Buttons(Back, Forward,Go) also I have the ComboBox1 with the Items Collection of different website url using MSVB 2008 in C++.My question:
1) How could I make my mouse click on each url with timer between the first url and the second and so on and let's say time between the 1st url and scroll down to the second with timer of 3 second .
2) How to make also the mouse click on certain button on that website what is the command code for that.
