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
- Reload and do not show any alert box.
- Reload and show blocking alert box without CollectCalls.
- Reload and show non-blocking alert box using CollectCalls.
- 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.