Должен ли весь код JavaScript быть помещен в голову с HeadJS?
Я использую 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 });
2 ответа
Правильная практика заключается в параллельной загрузке ресурсов, чтобы ни один ресурс не блокировал загрузку других ресурсов, таких как сценарии, которые блокируют рендеринг контента. В идеале вы должны сначала загрузить 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 (не говоря уже о чем-либо еще), я подумал о том, чтобы дать разработчику моего первенца.
Вы всегда должны пытаться поместить свои скрипты внизу перед закрывающим тегом body.