Атрибут defer тега <script> — відкласти виконання
автор: с3с
Загальний опис
автор: NagarD
- Порада
-
Не використовуйте одночасно атрибут
автор: с3сasyncіdefer, сучасні браузери в цьому випадку будуть використовувати тількиasync. - Нотатка
-
Браузер Internet Explorer підтримує цей атрибут тільки з версії 10.0.
автор: с3с
Синтаксис
<script defer>...</script>Атрибут defer може отримувати єдине значення:
-
defer -
Значення атрибута потрібно тільки в XHTML (
автор: с3с<script defer = "defer">).
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3.5 | 3 | 15 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання атрибуту <defer> тегу <script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>defer</title>
<script defer src="scripts/defer.js" ></script>
<body>Що робить браузер зі звичайним скриптом, з async і з defer
HTML
<div class="shkala">
<div class="riadok">
<div class="pidpys"><code><script src></code><br><small>без атрибутів</small></div>
<div class="smuha">
<span class="rozbir" style="width:22%">розбір HTML</span><span class="chekannia" style="width:34%">чекання + виконання</span><span class="rozbir" style="width:44%">розбір HTML</span>
</div>
</div>
<div class="riadok">
<div class="pidpys"><code>async</code><br><small>щойно приїхав</small></div>
<div class="smuha">
<span class="rozbir" style="width:40%">розбір HTML</span><span class="vykonannia" style="width:16%">виконання</span><span class="rozbir" style="width:44%">розбір HTML</span>
</div>
</div>
<div class="riadok">
<div class="pidpys"><code>defer</code><br><small>після розбору</small></div>
<div class="smuha">
<span class="rozbir" style="width:84%">розбір HTML</span><span class="vykonannia" style="width:16%">виконання</span>
</div>
</div>
<div class="riadok">
<div class="pidpys"><small>завантаження файлу</small></div>
<div class="smuha">
<span class="zavantazhennia" style="width:56%">качається паралельно — і з <code>async</code>, і з <code>defer</code></span>
</div>
</div>
</div>CSS
.shkala {
max-width: 640px;
font-size: 13px;
}
.riadok {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.pidpys {
flex: 0 0 130px;
line-height: 1.3;
}
.pidpys small {
color: #6b6b6b;
}
.smuha {
flex: 1;
display: flex;
height: 26px;
border: 1px solid #d0d0d0;
border-radius: 3px;
overflow: hidden;
}
.smuha span {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
white-space: nowrap;
color: #fff;
}
.rozbir {
background: #0172ad;
}
.chekannia {
background: #b3261e;
}
.vykonannia {
background: #1b7a3d;
}
.zavantazhennia {
background: #7a5cad;
}Коментарі
Коментарів ще немає — будьте першим!