Dean Edwards has started a series on JavaScript tips, with the first explaining a more efficient way of object detection. His article shows us that code placed inside of a function is executed every time a function is called. So, if you perform object detection inside of a function 3 times, those 3 checks will be made every time the function is called. This is redundant because after the first call we already know what objects are available. His solution shows a function being created dynamically based off of object detection, rather than performing object detection inside of the function.

This is a line of thinking that I don’t often consider, which makes me want to learn and build on it. The beauty of the tip is seen when the page loads. Normally, we call addEvent() many times onload to initialize the page, so this tip will significantly cut down loading times while a normal function will not see such a noticeable performance increase. To try to optimize even further, would it be beneficial to create an object detection class that when initialized it determines what objects are available and gives you a handle on them for whenever they are needed?

At the same time, the further we push techniques such as this, the less readable our code becomes to someone looking at it for the first time. Would it be worth the performance decrease to have a simple function with embedded object detection instead of dynamically creating functions? Since this aspect of JavaScript is not talked about as much, I am extremely interested in hearing any thoughts (random ones too!) about the topic.

HTML Form Builder
Ryan Campbell

JavaScript Optimization by Ryan Campbell

This entry was posted 5 years ago and was filed under Notebooks.
Comments are currently closed.


  1. Mark Wubben · 5 years ago

    Yes, but does it actually help? Test case here:

  2. Peter Mescalchin · 5 years ago

    Interesting counter argument - true if you’re talking mere microseconds then it’s not a big deal - but I still think the general idea can be applied to repeat sections of code.

    I see it more as a general programming rule of thumb - regardless of language. For example I call a function foo(parameter) with the same parameter value in a chunk of code and each time and receive the same result I could do this :

    document.write foo(parameter); document.write foo(parameter); document.write foo(parameter);

    • or this -

    myValue = foo(parameter); document.write myValue; document.write myValue; document.write myValue;

    Sure they achieve the same result - but if to determine the return value of foo() takes a considerable timeslice - of course I would lean to method two. Simple optimisations are easy to make at coding time and do add up.

  3. Dean Edwards · 5 years ago

    The point of this tip was to get people to think about how often checks are made when executing code. It is a general programming tip that seasoned programmers will probably not look twice at. However, code branching such as this is quite common in web applications. Functions that are called from within loops should be optimised as much as possible. I hope that I have made people think a little more about increasing the responsiveness of their UIs. Every little helps! ;-)

  4. Wesley Walser · 5 years ago

    I have always followed the method where I code something with simple readable functions. I try to make them bulletproof, I try to make them work right, and I comment the heck out of them. What I don’t specifically try and think about is optimization.

    Optimization comes when you are done with an application, or in larger applications, a section of the application and you test it. While testing things, figure out what is running slowly, and fix those aspects of the program.

    Thinking of optimization during every second of programming will have your pulling all kinds of crap into your brain at all the wrong times. Sure it may be more optimized to have an array of characters instead of a string, but who does that. You will end up taking months to code what could be done in a week, and really you have saved milliseconds in most places. The key is after things are winding down in development to find the areas that you can save actual seconds.

    As far as easy to understand code goes, I think it’s almost always better to got with more readability over speed. If there is an exception to this I think it will be painfully obvious when it pops us (read: when you need to get a new computer to run your code).

    Here is a great post that covers some of this.

  5. Wesley Walser · 5 years ago

    Here is that link. Very sorry about, you can edit the previous one and delete this one if you care to do that much editing.

  6. Ryan Campbell · 5 years ago

    Dean - It has definitely got me thinking.

    Wesley - That is the approach I often take, but the problem I run into is that I rarely come back for the optimization part. This is mainly because when I am learning or testing personal projects they are done on localhost with no users except myself. I wonder if writing optimized code from project to project would eventually make it so commonplace that it was the natural way of thinking instead of being a time sucking distraction.