Javascript optimization tips

Posted: February 8, 2015 in General, HTML, PHP, Technology
Tags: ,

1. Minify Script Files: – Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time. There are many compression tools available in market. Even you can write own small script to minify java script, you just need to rename variable/remove extra space etc.

2. Use advantage of reference types: – JavaScript, much like other C-based languages, has both primitive and reference value types. Primitive types such as strings, Booleans and integers are copied whenever they are passed into a new function; however reference types such as arrays, objects and dates are passed only as a light-weight reference. You can use this to get the most performance out of recursive functions, such as by passing a DOM node reference recursively to minimize DOM traversal, or by passing a reference parameter into a function that executes within an iteration. Also, remember that comparing object references is far more efficient than comparing strings.

3. Avoid inline Script: – By default, external CSS and JavaScript files are cached by the user’s browser. When a user navigates away from the landing page, they will already have your style sheets and JavaScript files, which in turn saves them the need to download styles and scripts again. If you use a lot of JavaScript in your HTML document, you won’t be taking advantage of the web browser’s caching features.

4. Pay special attention event handlers that fire in quick succession like ‘mouseover’:- Browser events such as ‘mouseover’ and ‘resize’ are executed in quick succession up to several thousand times each minutes, this means that you need to ensure that an event handler bound to either of these events is coded optimally and can complete in less than 2-3 milliseconds. Any overhead greater than that will create a bad user experience, especially in browsers such as Internet explorer that have not good rendering capabilities.

5. Build DOM separately before adding it to the page: – Every DOM update requires the whole page to be refreshed, you can minimize the impact here by building DOM for your page ‘off-line’ and then appending your DOM structure in single time.

6. Use event binding carefully: – Event binding is great for creating responsive applications, and it can even improve the performance of your code by reducing the depth of the call stack (so you avoid having a chain function calling). However, because the flow of event execution cannot be traced easily, it is very important that you use event handlers separately, you walk through the execution and various user journeys to make sure they are not firing repetitive time, and you comment your code well so they next person (which may be you a few months down the line) can understand that what is happening.

7. Defer loading of Script File: – Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding up execution and rendering time of page. If the scripts import and calls are added before the body in the webpage, the processing of all elements below the script is blocked until the browser loads the code from disk and executes it. In some browsers the browser blocks all other resources from being downloaded, while JavaScript is being processed. The solution for this is putting the scripts at the bottom of the page. (Whichever is not required for first time loading like user click events etc.).

8. Take native functions and constructs as much as possible: – JavaScript provides a whole host of native constructs that save you having to write your own algorithms or rely on host objects. Some examples include Math.floor(), Math.round(), (new Date()).getTime() for timestamps, String.prototype.match() and String.prototype.replace() for regexes, parseInt(n, radix) for changing numeral systems, === instead of == for faster type-based comparsion, instanceof for checking type up the hierarchy, & and | for bitwise comparisons. And the list goes on and on. Make sure you use all these instead of trying to work out your own algorithms as you will not only be reinventing the wheel but affecting performance.


Leave a Reply

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

You are commenting using your 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