Improving Application Performance and Responsiveness on the Client
Performance and responsiveness on client side applications are very important topics which usually don’t receive much attention until they are an obvious problem. At Ubiqua, as we began to increment the number of features our product offered, we started to experience the following problems:
- Application reloaded too often in mobile devices.
- Application took too long to reload.
- UI thread performed heavy computations which resulted in bad UX.
- Overall application performance was poor.
In this blogpost, I’ll show some of the techniques we used to enhance the performance and responsiveness of our application.
Measure Then Act
The very first thing we have to make sure we do before attempting to fix anything, is to measure what we believe is causing the application to perform poorly. Chrome DevTools offer a variety of tools which facilitate this:
console.profile([label])can turn out to be helpful here as it allows you to measure user actions from specific places in the code and make comparisons.
- Timeline Analysis: The Timeline panel records and analyzes all the activity in an application as it runs. Timeline analysis was convenient for discovering what was making our application take so long when reloading. We learned that is was garbage collection and then proceeded to take heap snapshots to further investigate the issue.
Freeing up the UI Thread
To battle against the UI thread being blocked by heavy computations we decided to use Web Workers. A Web Worker provides an API to delegate work to a different thread such that the main UI thread is free to receive user interaction. An important observation to make when using Web Workers is that a new variable has to be added to the time taking to execute a script:
communication. In addition to the time taken by the script to execute, we must add the time it takes for the application to send the message to the Web Worker, and the time it takes to the Web Worker to send the result back to the application. Because of this, when working with Web Workers always make sure to only pass and return from the Web Worker the information that is needed.
- Use small view components: When data changes small parts of the DOM have to be re-rendered as opposed to re-rendering large parts of it.
- Map child views of a collection and then append to DOM instead of appending each child view individually.
In the past months we have learned a lot about improving client side application performance, and many of the techniques described above have now become implicit in our development workflow. Application performance and responsiveness should always be a high priority task in your team, as it directly relates with the main stakeholder of your application: the user.