The Roots of the Common Issues
The Host Interactions
You can’t avoid interactions with the host but they can cause a series of issues if there are too many of them. From slow rendering of DOM objects to general performance lag, if you want to avoid issues of this sort, you should keep your interactions with the host to a minimum.
Event Handlers can be very useful when used smartly, but if you stop keeping track of them, there is a chance they will continue executing repeatedly without you even knowing that is happening.
A Lack of Organization with the Code
Define Your Variables Locally
Variables are used to define a function whenever you call a function certain. Local variables are those that are those that are defined within the variable while those used throughout the script are called global variables.
The browser has to do a scope lookup whenever you call a function and the amount of time needed to access variables increases with the number of scopes. As a result of that, accessing a local variable takes less time than accessing a global one.
Speed Up the Coding Process
Speaking up the coding process as much as possible is always the way to go and it doesn’t always have to be complicated to do. Start by creating shortcuts for the codes that are being used constantly so the longer scripts will code faster and save time in the overall process.
Tweak the Elements before adding them to DOM
Bind Your Functionality with Mouseup
A Click event fires after mouseup event so it is useful to bind your functionality with mouseup and get that little extra performance boost by ensuring that none of the interactions are missed in case that multiple rapid mouse clicks occur.
Cache Objects Whenever You Can
If you are familiar with programming, you probably know that it is pretty common to have a script repeatedly access certain objects. If you cache your objects, you will store them inside a certain variable and then continue to use that user-defined variable in subsequent references to the object which will significantly improve the performance.
Use Native Constructions and Functions
You can write your own algorithms, but using native functions and constructions is a safer way to go. Check out all the useful functions ECMAScript provides and you’ll see there is a lot to choose from.
Async and Defer Attributes
The async attribute is used for indicating that it is possible for the script to be executed asynchronously. However, async is available only for externally located script files.
The defer attribute indicates the browser to execute the script after the HTML document has been fully parsed.
Keep Code Small and Clean
More and more people are using their mobile phones and/or tablets where the performance of the apps is critical which is one of the main reasons to keep your code as small and clean as possible.
So whenever you stray from making a compact code, always ask yourself if there is a simpler way to do it and if there is – in the end, you will be glad you chose that direction to go.
Use the Latest HTTP Protocol
Keep track with important updates and enhancements that are introduced into the new versions of the HTTP protocol.
One of the great new features is multiplexing which allows multiple requests and responses to be sent at the same time. Logically, that will speed up your site in general which is something every developer should aim for.
Avoid Library Dependencies Whenever Possible
One of the things that should be limited or even avoided altogether whenever possible is library dependencies. On external libraries, that means relying more on the in-browser technology. If you have only 1 feature in your library, simply add it separately.
Also, try using Sizzle.js instead of jQuery if you need complex CSS selectors.
Shorter Scope Chains
We talked already about local and global variables and why it is better to use the local ones whenever possible. When you use global variables, it takes more time to climb up the scope chain so you should cut the scope chain shorter whenever possible.
Avoid Unnecessary Loops
In the developers’ experience, too much looping has proven itself not to be a good thing. You should try to get as much work done outside of loops as possible because the less you loop, the faster your loops get.
Unnecessary loops will put an additional strain on your browser and slow down the entire process.
Place the Scripts as Low as Possible
When you look at those tips individually, they might seem small an insignificant, but if you implement them all together, it will result in a noticeable performance improvement.