Javascript

Web Performance Done Right

Sharing my views on my favourite and most interesting topic in the web industry. My views on this post are mostly derived from FrontEnd Masters web performance workshop. So to start with I will state performance golden rule by steve souders which is

80-90% of the end-user response time is spent on the fronted. Start there

Below is the backend frontend split waterfall diagram from linkedin and again I took this from steve souders blog.

Screen Shot 2015-08-15 at 9.36.24 PM

From the graph we can easily conclude that we should spent most of our resource for optimization on frontend. Web is all about measurement and perception and we should know how to balance between these two. If our site loads quickly but our user hate the experience of the way our site loads then we have not actually won. Then the user will start hating us more because may we are loading bizarre content first. So we need to properly balance measurement and perception.

We need to focus on improving the efficiency, speed, memory. We need to focus on how well its doing its job the way it was supposed to do. It doesn’t matter that site loads in 6 seconds but what matters is how much bandwidth it takes to load. Measure your website performance, benchmark it and find out where we need optimization and work on it to make it better.

Optimization is all about critical versus non critical. In our software we can find out which part needs optimization and which didn’t. I will state another quote from Donald Knuth

Programmers waste enormous amount of time … worrying about the speed of noncritical parts of their programs… we should forget about small efficiencies, say about 97% of the time … Yet we should not pass up our opportunities in that critical 3%

Non critical optimization or optimization done wrongly is the root of all evil. This article focuses on mature optimization. Most of the frontend optimization happens in the middle-end (term coined by kyle simpson) which is url routing, templating, headers, caching, ajax, etc. and optimizing middle-end is all about focussing on YSlow, resources (Images, CSS/JS), architecture, communication.

YSlow:

  1. Fewer HTTP Requests
  2. Use a CDN
  3. Expires/Cache-control Header
  4. Gzip
  5. Stylesheets at top
  6. scripts at bottom
  7. Avoid CSS Expressions
  8. External CSS/JS
  9. Fewer DNS lookups
  10. Minify JS/CSS
  11. Avoid Redirects
  12. Avoid Duplicate Scripts
  13. ETags
  14. Cacheable Ajax

Don’t use Expires/Cache-control header and ETags both at the same time, you will end up putting extra headers. Some useful tips on fewer HTTP requests are below:

Fewer HTTP Requests:-

  1. Image Sprites – Combine all images into one and optimize it. Remember horizontal sprites are more performant than vertical sprites because CPU takes more time to process vertical sprites.
  2. Concat JS/CSS – Concatenate (combine all files into one) JS and CSS
  3. GZip – gzip your content. Test if gzipping is done correct or not.

This article contains detailed description about all the above rules.

Resources:

  1. Image – Compress(lossless) images and sprite it.
  2. Minification – Minify your JS and CSS files. You can use google closure compiler for the same. This article has the list of tools for concatenating and minifying CSS and JS files based on the development environment.

Architecture:

The architectural approach should be like doing the least amount of work for making something visible on the page. Single Page Architecture (SPA) is performant for web applications as it reduces round trips to the server. Take an example of gmail which is a huge single page application, it has lots of data but its performant.

Communication:

  1. JSON – When it comes to data transfer, JSON size should be optimal. Don’t put duplicate entries, don’t put data which can be easily derived with the help of existing properties. If you put redundant data, it will increase the JSON size and will take more time for transfer.
  2. Web Sockets and Ajax – Use web sockets  over Ajax. Ajax requests are heavier because on every connection it uses extra resources like HTTP packets over the wire, server side resources, connection resources. On the other hand web sockets connection happens only once in the request response cycle. There are 1600 overhead bytes in the request response cycle, so why you want these bytes again and again by using ajax.

That was all about middle-end optimization. There is some useful information that I want to share:

Resource loading:

  1. Preloading Images – Preload your content by using the below code:

    <link rel=”prefetch” href=”image.jpg”>

    <script>
      var img = new Image();
      img.src = “image.jpg”;
    </script>

  2. Lazy load – (On demand loading or post loading)
    Use script loaders like LABjs or you can do the following:

    function scriptLoaded(){
      //done
    }

    var script = document.createElement(“script”);
    script.src = “abc.js”;
    document.head.appendChild(script);

    script.onload = scriptLoaded; // not supported in some browsers so have to use onreadystatechange

    script.onreadystatechange = function(){
      if(script.readyState === “loaded” || script.readyState === “complete”)   {
        scriptLoaded();
      }
    }

  3. Reduce abstractions in your JavaScript code.
  4. Use CSS animation over JS animations.
  5. Use websites like jsperf to test performance of your JS code.
  6. Do every UI operation in less than 100 ms because user can perceive an action which takes more than 100 ms. According to research if an action(on button click etc.) takes more than 100 ms then user can treat it as a slow operation. Perceived performance matters.

There are lot of things you need to focus when it comes to optimizing web application. I listed some of them, hope it helps.

My efforts to solve “Travelling salesman problem” through JavaScript

Some days back I was searching for NP hard problems and I found out this “Travelling salesman problem”. I read about this on Wiki and I thought of solving it through JavaScript. I knew about google distance matrix api and got an idea of solving this problem by using this api. I read on wikipedia about some mathematical formulation and all the theories related to this.

Statement:-

“Given a list of cities and the distances between each pair of cities, what is the shortest possible route that visits each city exactly once and returns to the origin city?”.

Solution:-

Suppose we have three cities A, B and C. So by distance matrix api we will get distances of A-A, A-B, A-C, B-B, B-A, B-C, C-A, C-B, C-C. I will thank google for this. Now I will create a matrix of the distances, like this:

|[A-A  A-B  A-C]|       |[0  A-B  A-C]|
|[B-A  B-B  B-C]|  =    |[B-A  0  B-C]|
|[C-A  C-B  C-C]|       |[C-A  C-B  0]|

Just check that the distance from A-B and B-A are not equal because it is the distance related to road. It’s not necessary that the path for A-B will be same for B-A that’s why distances are not equal. So going ahead I will calculate the permutations of all the cities and will store it in an array, like this:
I will name city A as 1, B as 2 and C as 3.
then the permutations will be
[1,2,3]
[1,3,2]
[2,1,3]
[2,3,1]
[3,1,2]
[3,2,1]

and I append “1” at the front and at the end of each permutation. So now our new permutation array will become like this:
[1,1,2,3,1] -> So it will be 1 to 1 to 2 to 3 to 1
[1,1,3,2,1]
[1,2,1,3,1]
[1,2,3,1,1]
[1,3,1,2,1]
[1,3,2,1,1]

After this, I will proceed with the mapping of these permutations and the distance matrix which we created above. So by doing this I will calculate all the distances related to every permutation and the permutation with shortest distance will be your shortest route.

I created a npm package which you can check out here and GitHub repo which you can visit here.  I uploaded the demo on appfog and you can visit it on this link  http://short-route-demo.ap01.aws.af.cm/.

To solve NP hard problems we have to follow some combinatorial optimization and computational complexity theories. Actually I don’t know about these two phrases mentioned above but this is my approach through JavaScript. I didn’t solved this problem fully, need some optimization though in mapping algorithm I wrote because I think it will fail for large no. of cities.

You are fully welcome to state your own views and comments and if this helped you then I will be touched. 🙂

Hackathon : A portray of hard work and dedication

Having passion and dedication about something drives us in many directions. The same happened with us when me and my friend Joji Augustine, “a team of two” laid our steps in hackathon organised by tnooz at cleartrip office bangalore. We figured out an idea last night and went for it with lot of enthusiasm. After reaching there all of us gathered in a seminar room, there were about 60-70 people and all of them were from reputed companies like Amadeus, Nibodha Technologies, C-soft Technologies, TripThirsty, OLA Cabs, Cleartrip, Yahoo, Armor Technologies, FindMyCarrots, PayPal and we added redBus.in to the list.

After the seminar we started working on our idea. Our idea was to built a real time group trip planning service that will bring people who wish to travel together into a closed group where they can discuss their travel ideas, details and can also create a travel plan. All these things will happen realtime so that the group users can get update. We were coding, discussing, optimizing and doing all the things possible for creating an effective and optimized solution for the end users. We were not there to just finish our project but we were there to build it in an optimized way as Joy is not in finishing the activity but in doing it. 

We used technologies like Node.js and Redis for realtime communication between users. Also wikipedia pages were scraped and google api like search, images, maps, places were used. We also wrote some algorithms like finding the best possible order of cities based on distance. We will open source some of the algorithms shortly so don’t worry.

So our coding journey was going on a smooth track but half an hour prior to the ending time accidentally our main file got reverted. We got panicked and lost at that time as we were afraid that our hard work will go to waste. But somehow we managed and fixed all the things.

The price of success is hard work, dedication to the job at hand and the determination that whether we win or lose, we have applied the best of ourselves to the task at hand. So at last we won the 2nd prize. We were so happy and had an amazing feeling at that time.

This was our first hackathon. We had an amazing experience and we are looking forward to participate in more and more hackathons. This is just the beginning.

PS Photos will be uploaded soon in this post itself.

Call and apply Invocation Pattern in JavaScript

So I think most of the guys have confusion about call and apply invocation pattern in Javascript. Let me clear all your confusion. First I will talk about apply invocation pattern which I love the most .. 

Apply Invocation Pattern:-

As Javascript is functional object oriented language , Here functions can have methods. The apply invocation pattern allow us to create an array of arguments to use to invoke the function. The apply invocation pattern takes two parameters :-

  1. The value that should be bounded to this pointer
  2. Array of parameters

For example:-

var add=function(a,b){

return a+b;

}

var array=[2,3]

add.apply(null,array);

In above example this pointer is bound to null because here the function add is not an object, so it is not needed. Now Let me show you the way we can change ‘this’ pointer.

var display=function(){

alert(this.property);

}

var greeting={

property:”Hi Good Morning”

}

display.apply(greeting);

 

Here the value of the ‘this’ pointer is bound to an object called ‘greeeting’. So we can explicitly change the value of ‘this’ pointer here.

 

Call Invocation Pattern:-

So here we can’t create array of parameters. We have to pass all the parameters. So call invocation pattern has a signature like this:-

function.call(this pointer,parameter1,parameter2,…)

For Example:-

var display=function(obj){

alert(this.property);

}

var person={

property:”Me”

}

display.call(person);

Here the value of this parameter is bound to the person object. So lets take another example of call invocation pattern.

var display=function(text1,text2){

alert(text1+”,”+text2+”,”+this.name1+”,”+this.name2);

}

var person={

name1:”Me”,

name2:”Awesome”

}

display.call(person,”Hi”,”Bye”);

So the output for the above code will be Hi,Bye,Me,Awesome. 

So this is all about call and apply invocation patterns in javascript. The major difference is that apply invocation pattern allow us to create an array of parameters and pass it as an argument. Thats why I love apply pattern the most.