The very meaning of the word async (asynchronous) is not parallel, non-simultaneous.
Firefox , before all other browsers, began to support this attribute, since version 3.6+ - according to htmlbook .
I did a little test drive of this attribute, and it connects only after the DOM is fully rendered.
How can I judge:
In 1x , the attribute does not act on the srcipt tag itself , but refers directly to the script specified in the src attribute. That is, when I just entered the commands between the srcipt tags, there was no effect! None of the browsers (supported).
In 2x - the same effect can be achieved by setting window.onload , and its big + in that it is cross-browser.
PS: As for the problems with the cross-browser async attribute, there are a lot of them: support for mobile devices from Apple , as much as version 5. Yes, and Androids below the 3rd fly too, and they still occupy a large number of users. Well, it does not do without the stubbornness of the “donkey” ( IE ), it is supported even from version 11 - although, personally for me, everything worked perfectly in the 10th.
You can see for yourself:
File tmp_table.js :
console.log("ID Таблицы = "+document.getElementById("h_base_row"));
File tmp_td.js :
console.log("ID Столбца = "+document.getElementById("holdOnline"));
HTML page itself:
<!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>
Summary from the console:
Прошли ID таблицы scrjs.php:20 Прошли ID столбца scrjs.php:26 Другой JS код scrjs.php:32 ID Таблицы = [object HTMLTableElement] tmp_table.js:1 ID Столбца = [object HTMLTableCellElement]
