0

Пытаюсь разобраться в логике работы атрибута async, но возникли некоторые трудности.

Есть html страница с подключаемым в теге head скриптом(с атрибутом async) который содержит следующий код:

console.log(document.querySelector('#one').innerHTML);

Насколько я понимаю, атрибут async загружает(а потом сразу же выполняет) скрипт параллельно с разбором DOM и если из него обратиться к какому-либо элементу на странице, то можно получить ошибку. Всё правильно? В Хроме в консоль вылетает ошибка(что логично, так ведь?), но в Файрфоксе скрипт исполняется без ошибок и выводит содержимое элемента.

Кто-нибудь может объяснить такое поведение FF? Или это всем известный баг? С этим можно как-то бороться?

1 ответ 1

2

Само значение слова async (асинхронный) – не параллельно, неодновременно.

Firefox, раньше всех остальных браузеров начал поддерживать данный атрибут, ещё с версии 3.6+ - если верить htmlbook.

Я провел маленький тест драйв этого атрибута, и он подключается только после полной отрисовки DOM.

Как Я могу судить:
Во 1х - атрибут не действует на сам тег srcipt, а ссылается непосредственно на скрипт указанный в атрибуте src. То есть, когда Я просто вписал команды между тегами srcipt, никакого эффекта не было! Ни в одном браузере (из поддерживаемых).
Во 2х – того же эффекта можно достичь задав window.onload, и его большой + в том, что он кроссбраузерный.

P.S: Насчет проблем с кроссбраузерностью атрибута async, их очень много: поддержка мобильных устройств, от Apple, аж с версии 5. Да и Android-ы ниже 3го тоже пролетают, а они до сих пор занимают большое количество пользователей. Ну и не обходится без упрямства “ослика” (IE), поддерживается аж с версии 11 – хотя, лично у меня, в 10той всё отлично сработало.

Вы можете сами в этом убедится:

Файл tmp_table.js:

console.log("ID Таблицы = "+document.getElementById("h_base_row"));

Файл tmp_td.js:

console.log("ID Столбца = "+document.getElementById("holdOnline"));

Сама страничка HTML:

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html" />
  <meta name="author" content="HA3IK" />

  <title>ASYNC Тест драйв</title>
<style type="text/css">
    *{ margin: 0; padding: 0; font-size: 100%; }
    #h_base_row { margin: 0 auto; width: 300px; border-collapse: collapse; border: none;}
    tr{ height: 10px; background: #eaeaea; }
</style>
<script type="text/javascript" src="tmp_table.js" async="true"></script>
<script type="text/javascript" src="tmp_td.js" async="true"></script>
</head>
   <body>
      <h1>Тест драйв атрибута async</h1>
      <table id="h_base_row">
          <script type="text/javascript">
              console.log("Прошли ID таблицы");
          </script>
          <tr><td></td><td></td></tr>
          <tr><td colspan="2"></td></tr>
          <tr><td id="holdOnline"></td><td></td></tr>
          <script type="text/javascript">
              console.log("Прошли ID столбца");
          </script>
          <tr><td></td><td></td></tr>
      </table>
      <p>Конец странички</p>
      <script type="text/javascript">
          console.log("Другой JS код");
      </script>
   </body>
</html>

Итог из консоли:

Прошли ID таблицы scrjs.php:20
Прошли ID столбца scrjs.php:26
Другой JS код scrjs.php:32
ID Таблицы = [object HTMLTableElement] tmp_table.js:1
ID Столбца = [object HTMLTableCellElement]
3
  • Спасибо за разъяснение, но кое-что уточню. Я подгружаю скрипт из файла с помощью src, а не прописываю его в коде страницы. И меня удивляет разное поведение Хрома и ФФ. Кстати, по той ссылке, что вы дали находится следующее: "При наличии атрибута async браузер при возможности запускает скрипт асинхронно. Это означает, что указанный в атрибуте src файл будет выполняться [b]без ожидания загрузки и отображения веб-страницы.[/b] ...", а вы говорите, что он только подключается после полной отрисовки DOM. Кому верить?) Мб я просто что-то не понял(?)
    – LightShock
    24 дек 2013 в 19:22
  • @LightShock, Получается, что Мне!) Я лично проверил и отписался. Обновил свой ответ (добавил пример для проверки)
    – HA3IK
    24 дек 2013 в 19:59
  • Спасибо ещё раз.
    – LightShock
    24 дек 2013 в 20:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.