HTML5 script element - async attribute - when (and how best) to use?
Can you confirm my understanding of HTML5's <script async> attribute?
- Any libraries referenced by other code in the page sho开发者_StackOverflowuld not specify the async attribute.
For example, my script references might appropriately look like:
<script src="jquery..." /> <!-- async not used - ensure that this is loaded before JQuery UI and my code -->
<script src="jquery.ui..." /> <!-- async not used - ensure that this is loaded before my code -->
<script src="my_code1.js" async /> <!-- async used, for page load performance -->
<script src="my_code2.js" async /> <!-- async used, for page load performance -->
- For any code in a
$(document).ready(function () { }block, I can be assured that all async script have already loaded.
Do I have this right?
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
:okif the function in the async loaded script if defined, or:undefinedif it's not.R: It means the jQuery ready event in the main file got executed. It can be followed by
:okif the function in the async loaded script if defined, or:undefinedif 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:
Google Chrome 11.0.696.68: D:undefined R:undefined L AR
Firefox 4.0.1: D:undefined L R:ok AR
Browsers supporting async but tested without async (expecting same results):
Google Chrome 11.0.696.68: L D:ok AR R:ok
Firefox 4.0.1: L D:ok AR R:ok
Browsers NOT supporting async (expecting same results):
Internet Explorer 9: L D:ok AR R:ok
Opera 11.11: L D:ok AR R:ok
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);
});
This question has bothered me too for quiet some time now.
So I just finished writing "jqinit.js". The purpose of it is managing the dependencies in a way that you can just put them into your html as you did. And you can load jquery with async, too.
It works mainly by checking if jquery has been loaded and delaying execution of you script until it has. As a bonus you can manage dependencies between your scripts, too. And it can be loaded async itself.
Have a look if it fits your needs (feedback welcome): https://github.com/ScheintodX/jqinit.js
加载中,请稍侯......
精彩评论