В общем, вы должны поместить файлы Javascript внизу вашего HTML-файла.
Это даже более важно, если вы используете «классические» файлы тегов <script>. Большинство браузеров (даже современных) блокируют UI thread и, следовательно, процесс рендеринга вашего HTML markup при загрузке и выполнении JavaScript.
Это, в свою очередь, означает, что если вы загружаете приличное количество Javascript вверху вашей страницы, пользователь прекратит «медленную» загрузку вашей страницы, потому что он увидит всю вашу разметку после весь ваш скрипт был загружен и выполнен.
Чтобы усугубить эту проблему, большинство браузеров не загружают файлы JavaScript в параллельном режиме. Если у вас есть что-то вроде этого:
<script type="javascript" src="/path/file1.js"></script>
<script type="javascript" src="/path/file2.js"></script>
<script type="javascript" src="/path/file3.js"></script>
ваш браузер будет
- загрузить file1.js
- выполнить file1.js
- загрузить file2.js
- выполнить file2.js
- загрузить file3.js
- выполнить file3.js
и при этом блокируется UI thread и процесс рендеринга.
Некоторые браузеры, такие как Chrome, наконец, начали загружать файлы сценариев в параллельном режиме, что делает эту проблему чуть менее важной.
Другой способ обойти эту проблему - использовать dynamic script tag insertion. Что в основном означает, что вы загружаете только один файл JavaScript через тег <script>. Этот скрипт (загрузчик) динамически создает теги <script> и вставляет их в вашу разметку. Это работает асинхронно и намного лучше (с точки зрения производительности).