Атрибут async тега <script> — асинхронне завантаження
автор: с3с
Загальний опис
автор: NagarD
- Порада
-
Не використовуйте одночасно атрибут
автор: с3сasyncіdefer, сучасні браузери в цьому випадку будуть використовувати тількиasync. - Нотатка
-
Браузер Internet Explorer підтримує цей атрибут тільки з версії 10.0.
автор: с3с
Синтаксис
<script async>...</script>Атрибут async може отримувати єдине значення:
-
async -
Значення атрибута потрібно тільки в XHTML (
автор: с3с<script async = "async">).
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3.6 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута <async> теґа <script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>async</title>
<script async src="scripts/async.js"></script>
</head>
</html>Три смуги часу для одного й того самого зовнішнього скрипта, підключеного в head: звичайний, з defer і з async. Наведіть на будь-який відрізок — він підсвітиться. Видно головне: звичайний скрипт розриває розбір сторінки навпіл, defer відкладає виконання до кінця розбору і тримає порядок, async виконується щойно завантажився — будь-коли, і порядку не обіцяє.
HTML
<div class="chart">
<h4>1. <script src="app.js"> — розбір спиняється</h4>
<div class="track">
<i class="seg parse" style="left:0;width:22%">розбір HTML</i>
<i class="seg wait" style="left:22%;width:30%">чекаємо файл</i>
<i class="seg run" style="left:52%;width:12%">виконання</i>
<i class="seg parse" style="left:64%;width:36%">розбір HTML далі</i>
</div>
<p class="hint">Сторінка стоїть увесь час завантаження. Саме через це
скрипти колись переносили в кінець body.</p>
<h4>2. <script defer src="app.js"> — після розбору, у порядку розмітки</h4>
<div class="track">
<i class="seg parse" style="left:0;width:58%">розбір HTML</i>
<i class="seg load" style="left:22%;width:30%;top:26px">завантаження паралельно</i>
<i class="seg run" style="left:58%;width:12%">виконання</i>
<i class="seg dcl" style="left:70%;width:30%">DOMContentLoaded</i>
</div>
<p class="hint">Розбір не переривається; порядок кількох defer-скриптів
гарантований. Це варіант за замовчуванням для коду сторінки.</p>
<h4>3. <script async src="app.js"> — щойно завантажився</h4>
<div class="track">
<i class="seg parse" style="left:0;width:38%">розбір HTML</i>
<i class="seg load" style="left:4%;width:30%;top:26px">завантаження паралельно</i>
<i class="seg run" style="left:38%;width:12%">виконання</i>
<i class="seg parse" style="left:50%;width:20%">розбір далі</i>
<i class="seg dcl" style="left:70%;width:30%">DOMContentLoaded</i>
</div>
<p class="hint">Момент виконання плаває: він залежить від мережі й кеша,
тому зелений прямокутник «виконання» може опинитися будь-де на смузі —
навіть після DOMContentLoaded. Порядку між кількома async немає.</p>
</div>
<p class="legend"><b>Пам'ятка.</b> async без src не робить нічого. document.write
з async-скрипта мовчки зникає. Динамічно створений скрипт уже асинхронний.</p>CSS
.chart {
max-width: 640px;
}
h4 {
margin: 22px 0 8px;
font-size: 1em;
}
.track {
position: relative;
height: 52px;
border: 1px solid #c9ced6;
border-radius: 4px;
background: repeating-linear-gradient(90deg, #f6f9ff 0 9.9%, #eef3fb 10% 10%);
}
.seg {
position: absolute;
top: 0;
height: 24px;
box-sizing: border-box;
padding: 0 6px;
border-radius: 3px;
color: #fff;
font: 600 11px/24px system-ui, sans-serif;
font-style: normal;
white-space: nowrap;
overflow: hidden;
}
.seg:hover {
outline: 2px solid #12203a;
z-index: 2;
}
.parse {
background: #2f6fd0;
}
.wait {
background: #d64545;
}
.run {
background: #3a9a4f;
}
.load {
background: #f2b134;
color: #4a3300;
}
.dcl {
background: transparent;
border-left: 3px dashed #7a4fbf;
color: #5a3a99;
top: 26px;
}
.hint {
max-width: 600px;
margin: 8px 0 0;
color: #5a6472;
font-size: .9em;
}
.legend {
max-width: 640px;
margin: 24px 0 0;
padding: 8px 12px;
border-left: 6px solid #d64545;
background: #fff4f4;
font-size: .9em;
}Різниця між HTML 4.01 та HTML5
Атрибут вважається новим в HTML 5.
Коментарі
Коментарів ще немає — будьте першим!