Post
Ask Question

Voice of a Developer: JavaScript Web App Performance Best Practices - Part 31

Introduction

 
JavaScript is a language of the Web. This series of articles will talk about my observations, learned during my decade of software development experience with JavaScript.

Before moving further let us look at the previous articles of the series
Our applications should be high performance for good user experience. Users do not prefer working on slow web applications. Our objective is to make our web apps faster. This article has two sections,
  • Section 1: Best practices about handling JavaScript files to make our web app fast.
  • Section 2: Measure JavaScript performance using APIs.
Section 1: Best practices

Put JavaScript at the bottom?


Most browsers make multiple connections to a server at the same time. Press F12 (developer tool) and goto Network tab and observe connection stream. Example,

example

As soon as the browser encounters a script tag, the browser will not start any other download. JavaScript blocks parallel download. This is suggested by YSlow (a tool by Yahoo). In current times, it is a debatable topic because many developers do not agree.

I think if your web app is more content-focused and less dependent on JavaScript then place JavaScript at the bottom. On the contrary, if JavaScript as written in your web app is of a priority then put it at top.

Minify JavaScript


To compress/minify your JavaScript code is a best practice before the production release. The smaller the file, the better would be download speed and your page load time will be better too. There are various online tools available to minify your JavaScript code.

You can paste JavaScript code and it will compress it to a good extent.

Example- my script was compressed by 33%,

compressed

There are many command-line utilities available also, which you could use, for example, Grunt Minify files with UglifyJS.

To talk about grunt task runner minify recipe is beyond the scope of this article.

Combine JavaScript files into one


During development, we leverage multiple JavaScript files & libraries, e.g.,
  1. <script src="navbar.js"></script>    
  2. <script src="component.js"></script>    
  3. <script src="page.js"></script>    
  4. <script src="framework.js"></script>    
  5. <script src="script.js"></script>   
It is recommended to combine JavaScript files. The advantage is to reduce the number of requests at the server and faster

webapp- The lesser number of <script> tags are better in production code.

You can leverage grunt concat https://github.com/gruntjs/grunt-contrib-concat to do so

In practice, we combine and minify Javascript files for better performance

Remove duplicate Javascript files


Sometimes you may notice developers add duplicate JavaScript files with different versions. One or multiple versions may not be required, but it went unnoticeable. Hence, client is making wasteful HTTP request to the server, e.g.,
  1. <script type="text/JavaScript" src="library_1.0.17.js"></script>    
  2. <script type="text/JavaScript" src="library_1.1.0.js"></script>   
Hence, in the above scenario, one library is redundant and adding payload to the network, which slows down the performance of web application. Identify such cases and remove extra files.

Reduce Cookie Size


We know HTTP cookies are used to keep information about the user. It is recommended to keep the size of the cookie small. The reason is cookie gets transferred in each server request and response. In case the cookie is heavy, it increases the size of the HTTP request and consumes more time. Be mindful of setting the cookie size and set expiry accordingly.

Note: considering security threats like CSRF (in top 10 threat) I prefer session cookies to persistent cookies.

Section 2: Performance APIs

You can use the Performance interface to access certain functions for measuring the performance of web pages and web applications.

now() method: browser returns the timestamp, which is DOMHighResTimeStamp. It is double to store a time value. The unit is milliseconds.

var currentTime = window.performance.now(); //ex- 4135.333

mark() method: browser creates a timestamp, which is DOMHighResTimeStamp in the buffer. The advantage is that we can name a timestamp in memory.
  1. window.performance.mark('script_started_loading');    
  2. // script goes here    
  3. var req = new XMLHttpRequest();    
  4. req.open('GET', '/data/v1/geoLocation', true); //replace your URL here    
  5. req.onload = function(e) {    
  6. do_something(e.responseText); //some anonymous function    
  7. }    
  8. req.send();    
  9. window.performance.mark('script_fully_loaded');    
  10. // we will mark difference between 'script_fully_loaded' & 'script_started_loading'   
measure() method: it calculates elapsed time between two marks. So to calculate difference between two marks you can define code like below:

window.performance.mark('measure1','script_started_loading','script_fully_loaded');

getEntriesByName() method: you can read data created in above using this method

method

method

Summary


You could use APIs to calculate your JavaScript performance. Please share comments/feedback.


Similar Articles