sholsinger.com

External and even internal script tags can slow down page loading. The quickest way to alleviate that problem is by making them load after all rendering has taken place. It is important to note that scripts that are loaded asynchronously and that modify the DOM after the DOM has finished loading can cause "render thrashing" where the browser renders, and re-renders parts of the page due to DOM manipulations.

Updated 2015-06-12: Ilya Grigorik has provided a much better write-up about loading scripts asynchronously.

A quick and dirty example is the popular AddThis JS social sharing plugin. Notice in the standard implementation how there's that external script reference?

<!-- ADDTHIS BUTTON BEGIN -->
<script type="text/javascript">
    var addthis_config = {
        pubid: "YOUR-PROFILE-ID"
    }
</script>

<a href="http://www.addthis.com/bookmark.php?v=250" 
    class="addthis_button"><img 
    src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" 
    width="125" height="16" border="0" alt="Share" /></a>

<script type="text/javascript" 
    src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- ADDTHIS BUTTON END -->

This reference to addthis_widget.js can often cause a significant delay in the page rendering anything immediately following the placement of the script tag. If you are using jQuery you can easily fix that by changing that line to this:

<script type="text/javascript">
    jQuery(function($){
        $.getURL('http://s7.addthis.com/js/250/addthis_widget.js');
    });
</script>

Notice how I've also removed the protocol from the beginning of the URL? That causes the browser to use whatever the current protocol is for requesting that URL. This allows you to use AddThis on secure pages. I wouldn't recommend using it on secure pages unless you absolutely must.