# Оптимизация скриптов: dom, async, defer [в работе]
Скрипт может быть размещен в любом месте HTML.
Здесь мы разберём то, как его местоположение влияет на скорость загрузки страницы.
[cut]
## Перемещение скрипта в HEAD
Если нужно, чтобы скрипт обязательно выполнился до того, как страничка будет отображена, то самое подходящее место -- это `HEAD`:
```html
*!*
*/!*
Нажмите на кнопку, чтобы начать
```
## Скрипты в конце BODY
Скрипт может быть и в конце документа, например перед закрывающим `
`. В таком случае он выполняется *после* отрисовки страницы.
[compare]
+ Это хорошо, т.к. пользователь не должен ждать, пока загрузятся скрипты. Он увидит страницу быстро.
- Страница будет лишь частично работать, т.к. для инициализации интерфейсов нужен JS. Нужно это учесть, например, закрасить серым нерабочие интерфейсы, показать на них индикатор загрузки.
[/compare]
[smart header="Рендеринг и CSS"]
По стандарту, CSS-стили могут располагаться только внутри тега `HEAD`, и они тоже блокируют отображение.
В принципе, их можно для оптимизации перенести вниз документа -- всё будет работать. Но пока они не загрузятся, страница будет показываться без стилей, это обычно непрезентабельно. Поэтому так не делают.
[/smart]
## Итоги
Скрипты могут быть внутренними и подключаться напрямую в тег `SCRIPT` и внешними, в виде отдельных файлов, подключаемых с помощью атрибута `src="path/to/file.js"` тега `SCRIPT`
В любом случае, отрисовка HTML-страницы блокируется, пока скрипт не будет скачан и исполнен. Большинство браузеров умеют качать несколько скриптов параллельно, что несколько убыстряет процесс, но представьте -- у посетителя медленный канал (смотрит с телефона). Он открывает сайт. Если в `HEAD` стоит большой внешний скрипт, то пока он не загрузится -- страница не отобразится.
Поэтому, чтобы убыстрить процесс открытия, скрипты добавляют в конец `BODY` или ставят им атрибуты `async` или `defer`. В таком случае страница будет показана до загрузки скрипта.
Но при этом посетитель может тут же куда-нибудь нажать, а скрипты для этой кнопки ещё не загрузились. Эту особенность взаимодействия нужно предусмотреть в интерфейсе (это вполне возможно), и все будет здорово.