Getting JavaScript to Speed Up

Has anyone ever told you that your application on their mobile device is “very slow” or “slow to load?” Is there anything you can do about it? You can always blame the server-side programmers and suggest that they use inefficient database queries as the source of the problem.

Is there anything you can do to increase the load time of you app? Can you speed up the browser’s reaction to user-activated events?

Here are some steps I follow that can seriously improve application performance.

Minify? Minimize and Combine your Code.
It takes longer to load multiple files than it does to load a single file because we are making fewer HTTP requests. Minimize, or minify, your code removes unnecessary spaces and line breaks and removes comments. All of those things are essential for the developer, but not essential for the user.

Reduce DOM. Keep the DOM Light.
I was working on a Sencha Touch project that was in its final stages. The performance was decent in a computer browser, but when it was run as an application on a Droid, after the user hit about 4 to 5 screens, the application would just stop responding. I went back and made sure that every time the user left a screen, that screen view was removed from the DOM. The improvement was immediate.

The fact is that if your application has clean separation of business logic and display code, it should not be too hard to continually remove views from the DOM without losing important information. If you can’t do that, you are relying too much on the DOM to do things that it was never intended to do. Always remove anything that is not currently being displayed.

Make less Calls. Minimize Calls to Servers.
Every time you hit the server for data, your application has to wait to retrieve it. If you can get all the data you need in one Ajax call, do not waste your users’ time making two calls.

Once you get data, if it is appropriate, have your application remember it. That way, it doesn’t have to ask for it again during the same session. Of course, that won’t work if you need to retrieve live data, but otherwise, it makes sense.

CSS3 is awesome, but it can be overused.
This is especially applicable to the CSS that relies on transparencies. Depending on the browser, things like drop shadow and opacity can slow things down considerably.

Great animations that rely on these can be very costly to the usability of your application on some devices. I would not say to totally avoid them, but be mindful of how taxing these cool effects have on performance.

Follow the Rules and Avoid Bad Choices.
JavaScript is a very flexible language, but some choices are better than others. There are sites out there outlining things not to do with JavaScript, so get up to speed on the latest techniques. Avoid bad choices like the use of the eval() function or creating functions inside infinite loops.

I hope that it helps to start thinking in the direction of writing JavaScript for speed. Believe me, your users will appreciate it!

Advertisements

I am a software engineer whose has many interests. My current distractions are ontology, mobile device technology, medical bioinformatics, and micro-robotics.

Posted in Uncategorized

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: