Making Your Javascript Fast Without Getting Furious
For better or worse, Javascript is a language that can run applications full-stack. A new Javascript library pops up every week, promising to change your workflow forever. But no matter what library or framework you settle on, it can’t be used as a crutch for bad practices and inefficient functions.
In fact, inefficient Javascript can cause even more problems when it’s fed through a framework or library, and those issues only compound for mobile users.
Start by re-evaluating how you handle basic Javascript tasks. Here are a few examples for you:
Limiting DOM Requests
Accessing the Document Object Model is one of the slowest functions in Javascript. With DOM-oriented libraries like jQuery, it can be tempting to access and manipulate several parts of the DOM at once.
But the best practice is only making a DOM request when either “setting” or “getting” a value, or removing/appending elements. For example:
If you need to get a value, perform some calculations then set it again, make sure you’re only making a DOM request twice:
If you need to access that element’s value again at any point, you can call on the variable within your Javascript.
This is also why in Vanilla Javascript, it’s common to declare all your DOM elements at the beginning of a JS file. This avoids searching the DOM in the middle of a function.
Instead of using `$(‘li’).forEach`, you’d be better off storing that collection locally, then iterating over it:
Also, when you’re removing or appending elements, it’s always better to build a list of items in your JS file and then append them all at once rather than append each one as a final step in a loop.
Making Smarter Loops
For a long time I would insist on setting up my loops as:
`for (i = 0; i < array.length; i++)`
just because it was the way I was taught how loops work, and the setup was fairly self-explanatory.
What I didn’t realize until later was that for each loop, this has to check the length of the array or object that you’re iterating over. Instead, you can set up a loop as:
This provides two immediate benefits: Your code starts faster because you’re not having to set and get several variables, and you reduce the number of variables that need to be accessed through each iteration.
You’re even removing the “less than” operator by doing this, and letting “zero” act as the end condition
Avoid Adding Inline CSS Styles
Whenever making a style change to the DOM, you’re subjected to “browser reflow”. So if you’re showing/hiding elements, it’s always better to give it a class like “menu-active,” rather than styling it inline.
This is because whenever you make a style change, the browser has to recalculate the layout of your page. This also means that your “menu-active” class should make as few changes as possible, so even your CSS can determine performance.
The performance difference is even more crucial for mobile, where browser reflow can have a huge impact.
Monitor Your Javascript’s Performance
In an article I saw recently, the writer gave an example where someone made a button on their portfolio page that said “Contact Me”, and it would take them to the end of the page.
After checking the “performance” tab in Chrome Developer Tools, he saw a huge spike in the memory usage, and realized it wasn’t the best choice for his site. On mobile, it would even lag as it was trying to scroll past the middle section of the page.
Monitoring performance in Dev Tools is an easy way to find which pieces of your code are getting bogged down. And in your Dev Tools Console, you can also turn on “verbose” warnings, which will throw errors such as “some function took more than 300ms to complete”.’
Just check out this helpful GIF from DevTooltips:
With the right monitoring tools and the best practices in mind, you should be able to find and smooth out any low-performing Javascript in your project and start seeing immediate benefits.
Do you have an app idea or software product you want to launch? We’re here to help you think through it. Feel free to email me about your venture or checkout some of our recent projects.
