Home > Coding, Development Tools > That’s why the call us ‘Software Engineers’

That’s why the call us ‘Software Engineers’

A memory leak is when you obtain some storage for something, but it never gets released back to the OS, even when you are done with it. You wouldn’t think that browser based applications would suffer from this being that they are in a browser but it has been my experience on a couple of occasions recently that they do suffer from a form of this problem.

In the case of browser based applications the problem manifests itself in the form of a DOM leak.

The DOM (Document Object Model) is the structure of the page within the browser. In the ‘old’ days, the DOM was pretty static and what was in the DOM was what was on the screen. Think of simple HTML pages.

Today, toolkits like Dojo and JQuery enable you to dynamically modify the DOM contents. In addition, it is often the case that a lot of the DOM is actually not visible to the user. Take tabbed pages for example (see previous post). The user is viewing elements of the current tab but this does not mean that the page elements of the other tabs are not there, they are just hidden.

Because of this ‘out of sight, out of mind’ model, it is very easy to forget that the hidden elements are still there and are part of the DOM.

Thus your application may create a page element on the fly. When the user moves to another tab or closes the element it’s very easy just to hide the element. However, it is still part of the DOM within the browser.

Do that type of activity often enough without removing the redundant elements from the DOM and it can grow to the point where the increased size can seriously affect the browser’s ability to process and render the page.

A side effect of not removing elements from the DOM is the creation of duplicate elements. Toolkits like Dojo and JQuery can use an elements ‘id’ to locate it. However ‘id’s must be unique within the DOM because the raw javascript ‘selectelementbyid’ function only returns the first element with the specified id that it finds, which is reasonable because there should only be ONE instance of such an id within the DOM.

However if some functionality of your web page is causing the creation of elements with duplicate ids then the select by id method could well be returning the wrong element within the DOM since it will return the first one it finds.

You can use tools such as the DOM Inspector add on in FireFox and the Web Inspector component of Safari to examine a page’s DOM to see if it is suffering from this problem.

As web applications become more and more prevalent and the browser sessions remain open for longer and longer, I suspect this is going to become more and more of an issue. Whilst it’s easy to put together rich web applications today using toolkits like Dojo and JQuery, it’s also just as easy to screw up badly with problems like this, especially if your web application will remain running for any length of time.

Developing web applications (or any for that matter) is not just about the user interface experience. That’s why it’s called software ‘ENGINEERING’!

Categories: Coding, Development Tools
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: