Since you are reading this article, you’re already familiar with the miracles that JavaScript can do. And most importantly, you are the one making them happen. These 10 JavaScript performance optimization tips will help you do your job even more professionally. Let’s dive in:
#1 Reduce library dependencies
Loading time depends a lot on library dependencies, so it’s advised to use them as less as possible and avoiding them is even better. A brilliant way to reduce external library dependency is to take advantage of in-browser technology. In case you need to use complex a CSS selector, then go with Sizzle.js.
#2 Minify JavaScript
Removing redundant and unnecessary data from your code without affecting the way a browser processes the resource is minification. For instance, removing unused code, shortening function and variable names, code comments and formatting. A popular code minification tool is Google Closure Compiler.
#3 Minimize scope chain
The immediate scope chain, the arguments of a function and any locally-declared variables are instantiated when any function is executed in JavaScript. So, to access a globally-declared variable, it takes time for climbing up the scope chain. Using ‘this’ keyword and reducing the call stack’s dept will speed up execution.
#4 Using ‘this’ keyword
this keyword works as a local chain and the way it helps is, it reduces the dependency on global variables as well as closures that are in higher scope chains. On the contrary, it’s advised to avoid with keyword. Because it can modify the scope chain. To rewire the scope variable follow this example:
var Car = Object.create({
init: function(brand) {
this.brand = brand;
},
do: function(callback) {
callback.apply(this);
}
});
var audi = new Car('audi');
audi.do(function() {
alert(this.brand); // 'audi' is alerted because 'this' was rewired
});#5 Use Async and Defer
Synchronous loading needs to wait until the previous asset finishes loading but asynchronous loading can be loaded simultaneously. So to take advantage of asynchronous loading use async attributes. For example:
<script src="/example.js" async></script>
//load example.js without interrupting webpage rendering#6 Cache as much as possible
Caching is the best way to reduce the loading time. Leveraging browser caching along with caching mechanisms like a content delivery network is a brilliant move. This helps a previous visitor as well as a first-time visitor load assets quickly.
#7 Taking advantage of native functions
Using native functions and constructs will optimize the JavaScript performance more than writing own algorithms or relying on host objects. ECMAScript is a very large directory of native constructs.
#8 Make a batch of DOM changes
It’s advised to prevent repeated screen rendering so whenever any DOM change is made, batch them up. In case of style changing, make all modifications at once instead of changing styles separately.
#9 Trim HTML
The loading time of a query and modified DOM objects largely depend on the webpage’s HTML. Cutting half HTML of an application can double the DOM speed. It’s tough but removing unnecessary <div> and <span> tags would be a great start.
#10 Using throttle debounce when necessary
The last tip is about fine-tuning the performance of your application. Setting a maximum limit of how much JavaScript will execute at once is a great way to do so. Throttling sets the max number of times a function can be called and debouncing makes sure that a function can’t be recalled within a certain period of time.
So there you have it: the top 10 performance optimization tips on JavaScript. Start following them right away to boost up your career. Thanks for being with Askbootstrap. Happy coding 🙂
Source: Themehunt
Leave a Reply