Подтвердить что ты не робот

Элемент HTML5 script - атрибут async - когда (и как лучше всего) использовать?

Можете ли вы подтвердить мое понимание атрибута HTML5 <script async>?

  • Любые библиотеки, на которые ссылается другой код на странице, не должны указывать атрибут async.

Например, мои ссылки script могут выглядеть следующим образом:

<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 -->
  • Для любого кода в блоке $(document).ready(function () { } я могу быть уверен, что все async script уже загружены.

Есть ли у меня это право?

4b9b3361

ОТВЕТЫ

Ответ 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);
});

Ответ 2

Этот вопрос беспокоил меня тоже для спокойствия некоторое время.

Итак, я только что закончил писать "jqinit.js". Целью этого является управление зависимостями таким образом, что вы можете просто поместить их в свой html, как и вы. И вы можете загрузить jquery с помощью async.

Он работает главным образом путем проверки загрузки jquery и задержки выполнения вами script до его появления. В качестве бонуса вы также можете управлять зависимостями между вашими сценариями. И он может быть загружен async сам.

Посмотрите, подходит ли оно вашим потребностям (приветствуется обратная связь): https://github.com/ScheintodX/jqinit.js