JavaScript Performance Tips

Coding guidelines for JavaScript Starters

It’s not a complete list, I am just listing stuff that I thought overlooked.

1. Keep the code readabble, Indent well, try using some editor which supports auto-indent.

2. Keep function/method names descriptive. Don’t try to save bytes here, if it is a handler call out what that handler handles. Saving bytes can be easily done in minification, you don’t have to do that while writing code.

3. JSHint/JSLint your JS code before commiting to git, most probably your code will get concatinated with other JS files in near future, JSHint/Lint will make sure your code live well with others’. There are some editors which support “check as you type”.

4. Comment as much as possible. We are yet to agree on a company wide JS documentation tool/standard, but commenting now will help us when we agree and adopt one. It will also help you to remember reasons behind design decisions when you come back later.

5. When concluding on the solutions, always ask “Does it scale?”. We are moving towards SPAs every where and whole applications will get rendered/managed in single page, if your solution doesn’t scale there is no point in having it.

6. Keep model and view seperate, If we are using Backbone, CanJS or any MV* framework, we choose it for a reason,that is keeping model and view separate. Thumb rule is, interaction on one dom element should not update another dom element directly, flow should be dom-element1=>model and then model=>dom-element2

7. Keep your methods/functions small, if you have to write more than 2 lines to describe what that function does, that’s an indication that one function needs some splitting.

8. Adopt DRY as much you can, if you are copy pasting between modules, there is some thing wrong in you approach.

9. Add Event listeners only when needed. make sure you remove all listeners you added

10. When passing more than 1 arguments, pass it as argument object, this will let you scale function easily, also it’s easy to write fallback for missing argument

11. If widgets/components have dependency for data, make sure you handle loading state, letting user know that data is being loaded is very important

12. If you are combing dom elements to read the state of a widget, this could become slow as your application scale, always maintain a Model, whenever data needed out of widget, read it from Model, while updating update both model and view.

13. Minimize DOM queries, use local variables whenever you make same query multiple times.

14. Keep an eye on what is getting added to global namespace, lesser is better here.

Finally if you have not yet read “JavaScript Good Parts (from Douglas Crockford)”, get a copy right away, and read it once. You should be able to finish that in couple of hours, but it will save loads of debugging time for you in future. If you are coding JS you should know what you should not do, and this book just tell you that.

JavaScript to generate lorem ipsum data

var lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum";

var loremArray = lorem.split(/s/);

function getWordlist(count, wordcount) {
    var toreturn = []
    var loremlength = loremArray.length
    wordcount = wordcount || 1;
    for (var i = 0; i < count; i++) {
        var s = []
        for (var j = 0; j < wordcount; j++) {
            s.push(loremArray[Math.ceil(Math.random() * loremlength)]);
        }
        toreturn.push(s.join(' '));
    }
    return toreturn;
}

function logArray(arr) {
    for (var i = 0, l = arr.length; i < l; i++) {
        console.log(arr[i]);
    }
}
logArray(getWordlist(10, 3))
logArray(getWordlist(10, 1))