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

Sumit Jolly
8y
4.2k
0
0
100
Article

JavaScript is a language of the Web. This series of articles will talk about my observations, learnt 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 a 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 script tag, 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 bottom. To the contrary, if JavaScript as written in your webapp is of priority then put it at top.

Minify JavaScript

To compress / minify your JavaScript code is best practice before production release. The smaller the file, 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 good extent.

Example- my script was compressed by 33%,

There are many command line utilities available also, which you could use, 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.,

<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="script.js"></script>

It is recommended to combine JavaScript files. The advantage is to reduce number of requests at 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.,

<script type="text/JavaScript" src="library_1.0.17.js"></script>
<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 size of 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 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 Performance interface to access certain functions for measuring performance of web pages and web applications.

now() method: browser returns the timestamp, which is DOMHighResTimeStamp. It is a 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 buffer. The advantage is that we can name a timestamp in memory.

window.performance.mark('script_started_loading');
// script goes here
var req = new XMLHttpRequest();
req.open('GET', '/data/v1/geoLocation', true); //replace your URL here
req.onload = function(e) {
do_something(e.responseText); //some anonymous function
}
req.send();
window.performance.mark('script_fully_loaded');
// 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