Означает ли ORDER файлов javascript, когда все они объединены в один файл?

В современной современной эпохе, где много (популярных) файлов javascripts загружаются извне и локально, делает порядок, в котором файлы javascripts называются, особенно когда все локальные файлы объединены (minified ) в один файл?

Кроме того, многие утверждают, что Javascript должен идти в в нижней части страницы, в то время как другие говорят, что javascript лучше всего оставить в голове. Что нужно делать, когда? Спасибо!

google cdn latest jquery js              | external
another cdn loaded javascript js         | external

TabScript  ...js          \
GalleryLightbox  ...js     \
JavascriptMenu  ...js       \
HTMlFormsBeautifier ...js    > all minified and combined into one .js file!
TextFieldResize  ...js      /
SWFObjects  ...js          /
Tooltips ...js            /
CallFunctions   ...js    /

Ответ 1

Вопросы заказа в возможно одной или нескольких следующих ситуациях:

Когда один из ваших скриптов содержит зависимости от другого script.
~~Если script находится в BODY, а не в HEAD.~~. ОБНОВЛЕНИЕ: HEAD vs BODY, похоже, не имеет значения. Вопросы для заказа. Период.
Когда вы запускаете код в глобальном пространстве имен, для которого требуется зависимость от другого script.

Лучший способ избежать этих проблем - убедиться, что код в глобальном пространстве имен находится внутри обертки $(document).ready(). Код в глобальном пространстве имен должен быть загружен в таком порядке, чтобы сначала был определен исполняемый код.

Проверка консоли ошибок JavaScript в Firebug или отладчике Chrome может рассказать вам, что происходит в script, и сообщить вам, что нужно изменить для вашей новой настройки.

Заказ вообще не имеет значения, вызываются ли функции на основе событий, таких как pageload, клики, вставленные или удаленные узлы и т.д. Но если вызовы функций выполняются вне событий в глобальном пространстве имен, то есть когда проблемы будут возникают. Рассмотрим этот код:

JS файл: mySourceContainingEvilFunctionDef.js

function evilGlobalFunctionCall() {
    alert("I will cause problems because the HTML page is trying to call " +
      "me before it knows I exist...  It doesn't know I exist, sniff :(  ");
}

HTML:

    <script>
        evilGlobalFunctionCall();  // JS Error - syntax error 
    </script>
    <!-- Takes time to load -->
    <script type="text/javascript" src="mySourceContainingEvilFunctionDef.js"></script>
...

В любом случае приведенные выше советы помогут предотвратить эти проблемы.

В качестве дополнительной заметки вы можете подумать, что есть определенные преимущества скорости использования асинхронного характера браузера для вытягивания ресурсов. Веб-браузеры могут одновременно открывать до 4 асинхронных подключений, что означает, что вполне возможно, что ваш один массивный script может занять больше времени, чем тот же script разбивается на куски! Существует также Yahoo Research, в котором показано, что сочетание скриптов дает более быстрый результат, поэтому результаты варьируются от одной ситуации к другой.

Поскольку это баланс между временем, затрачиваемым на открытие и закрытие нескольких HTTP-соединений, а также время, затрачиваемое на ограничение одного соединения вместо нескольких асинхронных подключений, вам может потребоваться провести некоторое тестирование на вашем конце, чтобы проверить, что работает лучше всего в вашей ситуации. Возможно, время, затраченное на открытие всех соединений, компенсируется тем фактом, что браузер может загружать все сценарии асинхронно и превышать задержки при открытии/закрытии соединений.

С учетом сказанного, в большинстве случаев объединение script, скорее всего, приведет к быстрому увеличению скорости и считается наилучшей практикой.

Ответ 2

Да, в зависимости от того, что вы делаете.

Например, если a.js имеет...

var a = function() {
   alert('a');
}

... и b.js имели...

a()

... тогда вы не хотели бы включать b.js до a.js, или a() не будет доступен.

Это относится только к выражениям функций; объявления поднимаются в верхней части их области.

Что касается того, следует ли вам комбинировать jQuery, я считаю, что лучше использовать копию, размещенную в Google, - добавив ее в ваш объединенный файл, она станет больше, если есть большой шанс, что файл уже кэширован для клиента.

Ответ 3

Прочитайте этот пост из команды webkit за ценную информацию о том, как браузер загружает и выполняет script файлы.

Обычно, когда парсер сталкивается с внешний script, синтаксический анализ приостанавливается, a запрос выдается для загрузки script, а синтаксический анализ возобновляется только после script имеет полностью загружен и выполнил.

Таким образом, обычно (без этих асинхронных или отложенных атрибутов) скрипты получают excuted в том порядке, в котором они указаны в исходном коде. Но, если теги script находятся в <head>, браузер сначала ждет, пока все сценарии загрузятся , прежде чем он начнет выполнение.

Это означает, что не имеет значения, если script разделен на несколько файлов или нет.

Ответ 4

Если я понимаю ваш вопрос, я думаю, вы спрашиваете, имеет ли значение, где в файле определена функция/метод, а ответ - нет, вы можете определить их в любом месте в одном исходном файле. Парсер JavaScript будет читать все символы перед тем, как попытаться запустить код.

Ответ 5

Если у вас есть два файла, которые определяют переменные или функции с тем же именем, то порядок, в который они включены, изменит тот, который фактически определен