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

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.,
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.
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

Summary

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