64 lines
No EOL
4 KiB
Markdown
64 lines
No EOL
4 KiB
Markdown
# Оптимизация скриптов: dom, async, defer [в работе]
|
||
|
||
Скрипт может быть размещен в любом месте HTML.
|
||
|
||
Здесь мы разберём то, как его местоположение влияет на скорость загрузки страницы.
|
||
|
||
[cut]
|
||
|
||
|
||
## Перемещение скрипта в HEAD
|
||
|
||
Если нужно, чтобы скрипт обязательно выполнился до того, как страничка будет отображена, то самое подходящее место -- это `HEAD`:
|
||
|
||
```html
|
||
<!--+ run height=100 -->
|
||
<html>
|
||
|
||
<head>
|
||
*!*
|
||
<script>
|
||
function count_rabbits() {
|
||
for (var i = 1; i <= 3; i++) {
|
||
alert( "Кролик номер " + i );
|
||
}
|
||
}
|
||
</script>
|
||
*/!*
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<h3>Нажмите на кнопку, чтобы начать</h3>
|
||
|
||
<input type="button" onclick="count_rabbits()" value="Считать кроликов!" />
|
||
|
||
</body>
|
||
|
||
</html>
|
||
```
|
||
|
||
## Скрипты в конце BODY
|
||
|
||
Скрипт может быть и в конце документа, например перед закрывающим `</body>`. В таком случае он выполняется *после* отрисовки страницы.
|
||
|
||
[compare]
|
||
+ Это хорошо, т.к. пользователь не должен ждать, пока загрузятся скрипты. Он увидит страницу быстро.
|
||
- Страница будет лишь частично работать, т.к. для инициализации интерфейсов нужен JS. Нужно это учесть, например, закрасить серым нерабочие интерфейсы, показать на них индикатор загрузки.
|
||
[/compare]
|
||
|
||
[smart header="Рендеринг и CSS"]
|
||
По стандарту, CSS-стили могут располагаться только внутри тега `HEAD`, и они тоже блокируют отображение.
|
||
|
||
В принципе, их можно для оптимизации перенести вниз документа -- всё будет работать. Но пока они не загрузятся, страница будет показываться без стилей, это обычно непрезентабельно. Поэтому так не делают.
|
||
[/smart]
|
||
|
||
## Итоги
|
||
|
||
Скрипты могут быть внутренними и подключаться напрямую в тег `SCRIPT` и внешними, в виде отдельных файлов, подключаемых с помощью атрибута `src="path/to/file.js"` тега `SCRIPT`
|
||
|
||
В любом случае, отрисовка HTML-страницы блокируется, пока скрипт не будет скачан и исполнен. Большинство браузеров умеют качать несколько скриптов параллельно, что несколько убыстряет процесс, но представьте -- у посетителя медленный канал (смотрит с телефона). Он открывает сайт. Если в `HEAD` стоит большой внешний скрипт, то пока он не загрузится -- страница не отобразится.
|
||
|
||
Поэтому, чтобы убыстрить процесс открытия, скрипты добавляют в конец `BODY` или ставят им атрибуты `async` или `defer`. В таком случае страница будет показана до загрузки скрипта.
|
||
|
||
Но при этом посетитель может тут же куда-нибудь нажать, а скрипты для этой кнопки ещё не загрузились. Эту особенность взаимодействия нужно предусмотреть в интерфейсе (это вполне возможно), и все будет здорово. |