It’s worth it.
1. Interactions with Host
All interactions between the browser and the user introduce unpredictability and increase performance lag. Well, it cannot be avoided completely but we can definitely keep it minimum.
2. Too Many Dependencies
Having too many poorly managed dependencies in the application can have a big impact on the performance. The users will have to wait for longer period especially the mobile users with low bandwidth.
3. Poor Event Handling
Using event handlers properly can improve the performance of the app to a great extent by reducing the depth of the call stack.
4. Inefficient or Unwanted Iterations
Loops increase the processing time of your application. Removing unwanted or inefficient loops seem to be the first step while optimizing your code.
Using JQuery it becomes quite easy to select DOM elements using tags, classes or ids. But this approach involves several iterations as JQuery loops through DOM elements to find a match. You can speed it up by using
// Using JQuery
var container = $(“#container”);
var container = document.getElementById(“container”);
2.Compress your files
Unwanted refers to comments, semi-colons, whitespace etc. While cumbersome refers to shortening function and variable names, reducing an if-else into ternary etc. It can be achieved with build tools like UglifyJs, Google Closure compiler or online tools like JS Compress, JS minifier etc.
mouseup instead of
Users interaction via mouse or keyboard fires several events in a specific order. It is better to bind your functionality with the
mouseup event which fires before
click event, this can provide performance boost especially in the older browser such as IE. This ensures that none of the interactions are missed if a user makes several mouse clicks in rapidly.
5.Cache as much as possible
6.Favor native functions and constructs
Rather than writing your own algorithms, it’s better to use native functions and constructs. ECMAScript provides lot of native functions like
String.prototype.match()and many others.
7. Use async and defer attributes
defer are attributes can be added to script tags to make them either load asynchronously to the page or defer until the page has completely loaded. Using either of these attributes doesn’t block the DOM from rendering, which makes the application faster.
<! — load example.js asynchronously to the page →
<script src=”example.js” async></script>
<! — load example.js after the page has loaded →
<script src=”example.js” defer></script>
8.Recycle the DOM
If you look at Facebook, Instagram, Twitter and other sites that have infinite scrolling enabled then you can understand that more and more elements are getting added to the DOM. These can cause problems since we have to now query more elements. Therefore performance decreases and browser slows down by consuming RAM.
This problem can be solved by recycling DOM elements. Allocate some elements to use for displaying content to the DOM and when that elements exit the viewport, you take it back to the bottom.
Infinite scrollers are a common UI pattern. Here we explore how to implement this pattern in a memory conservative way…developers.google.com
9.Switch to HTTP/2
// code to move the box to the left