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
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
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.
- 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
alert(), you can see how this demonstrates that some scripts
are better to execute after the page/all scripts (or just the right scripts)
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.