Должен ли весь код JavaScript быть помещен в голову с HeadJS?

Question

Я использую HeadJS для загрузки всего моего кода JavaScript в заголовке моего сайта. Должен ли я делать следующее, загружая весь мой JavaScript в голове с помощью HeadJS?

<script src="/-/js/head.js"></script>

<script>
    head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js")
        .js("/-/js/slideshow.js")
        .js("/-/js/modernizr.js")
        .js("/-/js/cookie.js")
        .js("/-/js/thumbs.js")
        .js("/-/js/infinitescroll.js")
        .js("/-/js/manual-trigger.js")
        .js("/-/js/easing.js")
        .js("/-/js/thumbs.js")
        .js("/-/js/popup.js")
        .js("/-/js/sharre.js")
        .js("/-/js/selectivizr.js")
        .js("/-/js/scripts.js");
</script>

Кроме того, файл "scripts.js" - это все мои собственные сценарии jQuery, которые используют другие сценарии JavaScript в голове. Это лучший способ запустить это для оптимизации?

Я использую, чтобы обернуть весь код в этом файле:

head.ready(function() { my code });

Answer 1

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

Опять же, неважно, когда они начинают загружаться, если они не блокируют другие ресурсы (то есть CSS и контент).

На OP, из моего быстрого изучения, ваш подход кажется правильным. Из того, что я прочитал, headjs можно загружать параллельно, но выполнять по порядку (вы можете указать порядок). Подход, который вы использовали, будет выполняться независимо от того, какой сценарий прибудет первым. Вы очень авантюрный! ^_^

К сожалению, я не знаю функциональной важности каждого из ваших скриптов, но я бы предложил переупорядочить что-то вроде:

<script>
head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js",
    "/-/js/modernizr.js",
    "/-/js/selectivizr.js",
    "/-/js/cookie.js",
    etc...
    );
</script>

Это будет загружать сценарии параллельно, но выполняется в этом порядке. Вы должны разделить каждый скрипт , использовать подход "скачать параллельно, выполнить по порядку".

Я ДУМАЮ: Продолжаю расследование - у вас также есть возможность включить условные загрузки, используя:

head.browser.ie(insert scripts);

Проверьте удивительность.

Когда я увидел условную нагрузку для Internet Explorer (не говоря уже о чем-либо еще), я подумал о том, чтобы дать разработчику моего первенца.

Answer 2

Вы всегда должны пытаться поместить свои скрипты внизу перед закрывающим тегом body.