У меня сейчас около 7 файлов Javascript (благодаря различным плагинам jQuery) и 4-5 CSS-файлам. Мне любопытно, как лучше всего справляться с ними, в том числе, где в документе они должны быть загружены? YSlow сообщает мне, что файлы Javascript должны быть – по возможности – включены в конце. Конец тела? В нем упоминается, что, по-видимому, делиметр заключается в том, записывают ли они контент. Все мои файлы Javascript – это функции и код jQuery (все делается, когда готово ()), так что все должно быть в порядке.
Так что я должен включить один CSS и один Javascript-файл и включить в него остальные? Должен ли я объединить все мои файлы в один? Должен ли я помещать Javascript в мои теги в самом конце моего документа?
Изменить: FWIW да, это PHP.
Я бы предложил использовать PHP Minify , который позволяет вам создать один HTTP-запрос для группы JS или файлов CSS. Minify также обрабатывает GZipping, Compression и HTTP Headers для кеширования на стороне клиента.
Изменить: Minify также позволит вам настроить запрос, чтобы на разных страницах вы могли включать разные файлы. Например, основной набор файлов JS, а также пользовательский JS-код на определенных страницах или только основные JS-файлы на других страницах.
В то время как в разработке есть все файлы, как обычно, а затем, когда вы приблизитесь к переключению на производственный прогон, уменьшите и присоедините все файлы CSS и JS в один HTTP-запрос. Это очень просто настроить и работать.
Также да, файлы CSS должны быть установлены в голове, а файлы JS – внизу, так как файлы JS могут записываться на вашу страницу и могут вызывать серьезные проблемы с тайм-аутом.
Вот как вы должны включать ваши JS-файлы:
</div> <!-- Closing Footer Div --> <script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> </body> </html> Изменить: вы также можете использовать Cuzillion, чтобы узнать, как настроить вашу страницу.
Вот что я делаю: я использую до двух файлов JavaScript и, как правило, один файл CSS для каждой страницы. Я выясню, какие JS-файлы будут распространены на всех моих страницах (или их достаточно, чтобы они были близки – файл, содержащий jQuery, был бы хорошим кандидатом), а затем я объединяю их и уменьшаю их с помощью jsmin-php, а затем я кэширую комбинированный файл. Если есть какие-то JS-файлы, оставшиеся только для одной страницы, я объединяю, уменьшаю и кэширую их в один файл. Первый JS-файл будет вызываться по нескольким страницам, второй – только одному или, возможно, нескольким.
Вы можете использовать ту же концепцию с CSS, если хотите с помощью css-min , хотя я считаю, что обычно использую только один файл для CSS. Еще одна вещь, когда я создаю файл кэша, вначале создаю небольшой PHP-код, чтобы служить ему в качестве файла GZipped, который на самом деле позволяет получить большую часть ваших сбережений. Вы также захотите установить заголовок срока действия, чтобы браузер пользователя имел больше шансов кэшировать файл. Я считаю, что вы также можете включить GZipping через Apache.
Для кэширования я проверяю, превышает ли время создания файла больше времени, которое я установил. Если это так, я воссоздаю файл кеша и обслуживаю его, иначе я просто получу существующий файл в кеше.
Вы явно не сказали, что у вас есть доступ к серверному решению, но, предполагая, что вы это делаете, я всегда старался использовать PHP, чтобы сделать следующее:
jquery.js.php:
<?php $jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata'); foreach($jquery as $file) { echo file_get_contents('jquery.' . $file . '.js'); } ?>
Когда снимок выше на месте, я затем вызываю файл так же, как обычно:
<script type="text/javascript" src="jquery.js.php"></script>
и тогда, если я когда-либо узнаю о точной функциональности, в которой я нуждаюсь, я просто передаю свои требования в виде строки запроса ( jquery.js.php? r = core, effects ). Я делаю то же самое для своих требований CSS, если они когда-либо разветвлены.
Я бы не рекомендовал использовать javascript-решение (например, PHP Minify), чтобы включить ваш css, поскольку ваша страница станет непригодной, если у посетителя отключен javascript.
Идея минимизации и комбинирования файлов великолепна.
Я делаю что-то подобное на своих сайтах, но для облегчения развития я предлагаю код, который выглядит следующим образом:
if (evironment == production) { echo "<style>@import(/Styles/Combined.css);</style>" } else { echo "<style>@import(/Styles/File1.css);</style>" echo "<style>@import(/Styles/File2.css);</style>" }
Это должно позволить вам хранить ваши файлы отдельно во время dev для упрощения управления и использовать объединенный файл во время развертывания для более быстрой загрузки страниц. Это предполагает, что вы можете комбинировать файлы и изменять переменные как часть процесса развертывания.
Определенно посмотрите, включая ваши js внизу, а css наверху в соответствии с рекомендациями YUI, поскольку сохранение минимума JS оказывает ощутимое влияние на внешний вид остальной части страницы и чувствует себя намного быстрее.
Я также склонен копировать + вставлять все мои jquery-плагины в один файл: jquery.plugins.js, затем ссылаться на
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
для реальной библиотеки jquery.