As with all new HTML5 features, I think the best way to find answers is to test them on as many current browsers as we can. As a general rule, old browsers should completely ignore the async flag, so code should work as expected, parsed from top to bottom in order.
As long as browsers are inconsistent in handling them, you should avoid using them in production code if you're not sure they will work.
The main question with this feature is, browsers that do support it, in what order do events get fired, for example if you define a jQuery ready function in an async loaded script, is it going to get fired? Does your ready event fire before or after async scripts have loaded?
I have created a couple of test files, you are quite welcome to have a play with them on different browsers to see how they behave.
Short Answer
About @Dave's assumption:
For any code in a $(document).ready(function(){} block, I can be assured that all async script have already loaded.
It doesn't look like it so far, it's pretty inconsistent. In Chrome the main ready event fires before the async file has loaded, but in Firefox it fires after it.
jQuery developers will have to make up their minds about this, if they will (and can) support it in the future or not.
Test Page
My test script spits out a string which shows you in what order were different parts of it executed. It can be built by the following:
D: It means the script block in the main file got executed. It can be
followed by :ok if the function in
the async loaded script if defined,
or :undefined if it's not.
R: It means the jQuery ready event in the main file got executed.
It can be followed by :ok if the
function in the async loaded script
if defined, or :undefined if it's
not.
L: Async loaded script file has been executed.
AR: jQuery ready event in the async loaded script has been
executed.
Test Results
Browsers supporting async:
Browsers supporting async but tested without async (expecting same results):
Browsers NOT supporting async (expecting same results):
Test Script
test.html
<!DOCTYPE HTML>
<head>
<title>Async Test</title>
<script type="text/javascript">
var result = "";
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="test.js" async></script>
<script type="text/javascript">
try{
myFunc();
result += "D:ok ";
} catch(ex) { result += "D:undefined "; }
$(function(){
try{
myFunc();
result += "R:ok ";
} catch(ex) { result += "R:undefined "; }
$('body').text(result);
});
</script>
</head>
<body>
</body>
</html>
test.js
// Fires straight away when this file is loaded.
result += "L ";
$('body').text(result);
// A test function to see if it's defined in certain parts of the main file.
function myFunc(){
return;
}
// A ready function to see if it fires when loaded async.
$(function(){
result += "AR ";
$('body').text(result);
});
