Как файлы JavaScript загружаются и выполняются?
Я не часто вижу разговор или исследование в области порядка загрузки/выполнения файла JavaScript. Я интересуюсь сайтами, объясняющими, как JavaScript обрабатывается. В частности, если я имею
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
Я предполагаю, что a.js загружается сначала, тогда b.js и наконец c.js, или они загружают одновременно? Что относительно выполнения? Сценарии в заголовке предпочтены по в теле?
Главная причина, почему я так интересуюсь этой темой, состоит в том, потому что я пишу программное обеспечение JavaScript, которое использует динамическую загрузку этих сценариев, и иногда я добираюсь, ошибки как x не определено (это не было загружено перед другими сценариями), но обычно не будут происходить те ошибки. Я не понимаю почему.
2 ответа
Скрипты загружаются параллельно, но анализируются и выполняются в том порядке, в котором они появляются в HTML, блокируя другие действия на странице (включая отрисовку) до тех пор, пока они не будут выполнен. Скрипты могут быть неблокирующими, если они добавляются кодом JavaScript, например, через DOM, или если асинхронный атрибут присутствует в последних версиях Firefox.
Загрузку JavaScript контролирует в основном ваш браузер. Если вы загружаете их все из одного и того же домена, как вы это делали выше, они будут загружаться один за другим, поэтому загружаются в указанном вами порядке.
В качестве простого теста вы можете просто попробовать указать функции для каждого файла и попытаться вызвать их из следующего файла в списке, чтобы увидеть порядок их загрузки.
Что касается приоритета загрузки, большинство книг по оптимизации веб-сайтов советуют загружать файлы js в самом низу, так как это ускорит загрузку страницы, а файл js будет загружен как последний необходимый ресурс. Это нужно делать осторожно, если ваши страницы полагаются на JavaScript непосредственно при загрузке, вы можете столкнуться с бесконечными ошибками js.
Библиотеки, такие как jquery, очень помогут в этом, поскольку они позволяют выполнять действие js только после того, как DOM станет доступным, поэтому ошибок js не будет, когда js загружается в нижней части HTML.
Еще одна интересная вещь: убедитесь, что ваши js-файлы правильно минимизированы, и придерживайтесь минимума q файлов, так как при этом вы выполняете только несколько запросов к серверу, и я с готовностью получу ваш JavaScript доступно за меньшее время.
Надеюсь, это вам поможет.