Promises async/await and how to it affects performance

Here, I want to discuss how far the changes being made have improved performance

First of am going to start with the addition of promises async/await

While synchronous code is easier to follow and debug, async is generally better for performance and flexibility and they are non-blocking.

How it affects performance

Async/await allows us to not only avoid callback-hell but ensure that our code is clean and that errors are properly captured.It is built on top of promises which is non blocking and yet allows our code to be readable as if it was synchronous.

The use of a Task Runner : GULP

Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. At a high level, gulp reads files as streams and pipes the streams to different tasks.

How gulp improves performance

-Minification (Compress/Uglyfy)

- Watch files: watches file for any changes and then perform some kind actions on it for eg. assume you change the styles.css or block.js files which are used for development purpose and later you want to push it for production then you need to minify it manually, instead of you minifying it gulp does it for you.

- Compile Sass

- Combining multiple js/css files into single file respectively

From the https://developers.google.com/speed/pagespeed/insights/ and devtools it was seen that musicblocks file was very large an it needed to be bundled up that way it helps increase the app speed and performance .So in the development code we have our normal files plus the bundled ones but what is pushed into the production code should be the minified or bundled version.

The use of service worker and pwa

Service workers can make your site work offline, run faster, or both. Service workers essentially act as proxy servers that sit between web applications, and between the browser and network (when available).This is modern web API behind Progressive Web Applications. Where Musicblocks can be added as an offline app on the homescreen which makes it an easier and more convenient access for people after loading it and installing or adding it on homescreen it can be viewed offline. One of the significant benefits is it’s ability to proactively control the caching of assets. A web application that can cache all of its necessary resources should load substantially faster for returning visitors.

Chrome DevTools: performance and network tab

The chrome DevTools the performance tab is used to find performance bottlenecks I somehow explained the way to do so in my previous blog , it helps to analyze areas that need optimization while the network tab records all network request as long as the devtools are open.

My latest changes https://github.com/sugarlabs/musicblocks/pull/1803

I added promises to set timeout on line 1657 reverted the changes made on line 1833 cause some of the timeouts in the logo is used to ensure that the music timings are in sync. when I added the change on line 1833 the music timing went off.

Second change was on the loops reading the length of attributes of an array at every iteration can make the loops slow and one common way to avoid that is storing the length of value in a different variable
And when running a jsperf this method is faster

Third change their is a block that add new turtles on the file the code was modified a bit

My next week task

Will still continue on chrome analysis and look for areas for optimization and ways to optimize them.