Load external JS file in non-blocking mode

Loading external JavaScript file in blocking mode could cause bottleneck of application’s performance. Normal behavior of Browser is to wait until all JS file load the reason is, any JS code in any file may change the design or content.

Anyway, there is couple of ways to load external JS file asynchronously or non-blocking way. In this article, we will discuss on by one of them.

Using “defer”

defer attribute makes promise to browser. When we are using defer and browser consider this attribute as expected, we should not include any DOM processing JS file in this. The reason is browser will not wait until the file load.

The syntax is like this.

<script src="~/js/js1.js" defer></script>

When browser encounter “defer” it consider the script as parallel loadable object. Now , the question is when defer code will execute ?

In theory, it should happen after the DOM has completely loaded, shortly before the DOMContentLoaded event. In practice, it depends on the OS and browser, whether the script is cached, and what other scripts are doing at the time.

Using “async”

This attribute has introduced in HTML5. async is identical to defer, except that the script executes at the first opportunity after download (an optional onload attribute can be added to run a specific function). You can’t guarantee that scripts will execute in sequence, but they will have loaded by the time the window onload event fires.There’s support for async in Firefox 3.6, Opera 10.5, and the latest WebKit build, so it should appear in the next versions of Chrome and Safari. IE9 is yet to support async, but the IE team could easily add it as an alias for defer. You can use both async and defer to support all browsers — even IE4.Perhaps within a few months, we’ll finally have a native, non-blocking JavaScript loading method that works in all browsers.

Let us see the loading sequence of async. In this example we are loading four external JS files and the sequence is like this.

Please note than “Raphael-min.js” is loading asynchronously.  Here is screen of loading in reality.

We are seeing that “Raphael-min.js” is loading in second position but in sequence, it is in third position. Again, this sequence of loading for some trial, it may vary time to time.

Console.log() Vs console.table() in JavaScript

To debug JavaScript application we use console.log() every now and then. We know that it logs the object in console of browser window what we pass as argument of log() function.  In this post we will learn the difference of console.log() and console.table().  I hope by seeing function name everyone can able to guess that console.table() will give some formatted output where console.log() does not. So, let’s see it in example.

Example of Console.log()

We have created one JavaScript object and trying to log the object in console of browser. In this example I am using chrome browser , If you are using old version if IE then you might get error where it will tell that “console is not defined”

       <script>

           var person = [

                        { name: 'sourav', surname: 'kayal' },

                        { name: 'foo', surname: 'bar' }

                        ];

           console.log(person);

       </script>

Here is the output; two objects are there but not in neat and clean presentation. 

Example of Console.table()

Now, we will use console.table() function to see the difference. The JavaScript is code is same as above.

       <script>

           var person = [

{ name: 'sourav', surname: 'kayal' },

{ name: 'foo', surname: 'bar' }

   ];

           console.table(person);

       </script>

The output is like below.  We are seeing that the data is presenting in table stricture. It’s easy to read and understand.

Not only formatted data, console.table gives more control on JavaScirp object presentation. If we want to print only one column, we can do it in this way.

         <script>

           var person = [

{ name: 'sourav', surname: 'kayal' },

{ name: 'foo', surname: 'bar' }

          ];

           console.table(person,"name");

       </script>

Here is output with only name column.

This trick may useful when you are working with large JavaScript object and analyze data for debugging purpose.