I am working with a web application which is really memory-hungry, because the original coders put a lot of business logic in the client (JavaScript, jQuery). So it happens that web browsers crash due to lack of memory when users work with many objects in the application.
Moving business logic to the server side is no short-term option. So I’ve been searching the net for ideas as to how to quickly reduce the memory footprint of an existing web page, but came out empty handed.
Are there any general tips? (For example, could shortening the names of JavaScript variables result in a significant improvement?)
This is a very broad question as we can’t see the Javascript code that performs this business logic. I’d hope that this web site is hosted in a controlled environment because obviously script blockers / just having javascript disabled would render it useless. I suppose some things to suggest would be:
Have all of your Javascript in a single .js file and minify it. You wouldn’t do this to the development version, only the production version as minifying a file will make it completely unmaintainable – see http://code.google.com/p/minify/ for more info. Having all your Javascript in a single file would reduce the amount of HTTP connections the client needs to make to download the scripts.
Have your SCRIPT tags at the bottom of the page and not at the top. This will improve the rendering time for the client (however, it wouldn’t reduce memory utilisation as the code is still there). Parsing SCRIPT blocks locks the browser until it has completed, it can’t load these asynchronously.
There are quite a few ways you could improve this without having to rewrite the whole thing – although I’d certainly look at refactoring as the “overall solution” to this problem. I’m basically regurgitating tips from this article http://developer.yahoo.com/performance/rules.html