demo —CollectCalls

CollectCalls is open source software by Joel Purra, senior team lead node.js remote.

This page demonstrates, in a blunt way, how scripts can block load/execution/display of other content/scripts/stylesheets/images on the page. There are two alert() boxes shown - one blocking and one non-blocking. Both of them are initialized in the middle of the page's contents, between the "first half" and the "second half". Using CollectCalls, the alert() can be deferred until the rest of the page and jQuery has been loaded.

In case you wonder why jQuery and CollectCalls are not loaded at the top of the page, it is because it is best practice to load scripts asynchronously and deferred at the bottom of the page, near </body>. There are also other techniques/optimizations/combinations that make it hard to predict exactly when a script has loaded and executed, but CollectCalls can help manage all of them.

Demo modes

  1. Reload and do not show any alert box.
  2. Reload and show blocking alert box without CollectCalls.
  3. Reload and show non-blocking alert box using CollectCalls.
  4. Reload and show both blocking and non-blocking alert box.

First half of the page has loaded

Some content above both inline script blocks. If you have chosen to see the blocking alert(), you can see how this demonstrates that some scripts are better to execute after the page/all scripts (or just the right scripts) have loaded.

Second half of the page has loaded

Some content below both inline script blocks. If you have chosen to use CollectCalls to show the non-blocking alert(), you can see that the entire page has loaded before it is popping up - even though the inline script using jQuery was defined above this paragraph.

End of page

The javascript libraries jquery.js and collectcalls.joelpurra.js are loaded below this paragraph.