Ответ 1
Как и во всех новых функциях HTML5, я считаю, что лучший способ найти ответы - проверить их как можно больше современных браузеров. Как правило, старые браузеры должны полностью игнорировать флаг async, поэтому код должен работать как ожидалось, разбираться сверху вниз по порядку.
Пока браузеры несовместимы в их обработке, вам следует избегать использования их в производственном коде, если вы не уверены, что они будут работать.
Основной вопрос с этой функцией - браузеры, которые ее поддерживают, в каком порядке запускаются события, например, если вы определяете функцию jQuery ready в загруженном асинхронном script, собирается ли она быть запущена? Загружено ли готовое событие до или после сценариев асинхронного сканирования?
Я создал пару тестовых файлов, вы вполне можете поиграть с ними в разных браузерах, чтобы посмотреть, как они себя ведут.
Краткий ответ
О предположении @Dave:
Для любого кода в блоке
$(document).ready(function(){}я могу быть уверен, что все async script уже загружены.
Пока это не похоже, это довольно противоречиво. В Chrome основное событие готовности запускается перед загрузкой файла async, но в Firefox он запускается после него.
Разработчики jQuery должны будут подумать об этом, если они будут (и могут) поддерживать его в будущем или нет.
Страница тестирования
Мой тест script выплескивает строку, которая показывает вам, в каком порядке выполнялись разные части. Его можно построить следующим образом:
-
D: Это означает, что блок script в главном файле был выполнен. Может быть а затем
:ok, если функция в асинхронная загрузка script, если она определена, или:undefined, если это не так. -
R: Это означает, что событие jQuery ready в главном файле было выполнено. За ним может следовать
:ok, если функция в загруженном асинхронном режиме script если определено, или:undefined, если это нет. -
L: Запущен файл с асинхронной загрузкой script.
-
AR: Событие jQuery ready в загруженном async script было выполняется.
Результаты испытаний
Браузеры, поддерживающие async:
-
Google Chrome 11.0.696.68: D: undefined R: undefined L AR
-
Firefox 4.0.1: D: undefined L R: ok AR
Браузеры, поддерживающие async, но протестированные без async (ожидающие одинаковые результаты):
-
Google Chrome 11.0.696.68: L D: ok AR R: ok
-
Firefox 4.0.1: L D: ok AR R: ok
Браузеры не поддерживают async (ожидающие одинаковые результаты):
-
Internet Explorer 9: L D: ok AR R: ok
-
Opera 11.11: L D: ok AR R: ok
Тест 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 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);
});