Несколько файлов javascript/css: лучшие практики?

Сейчас у меня есть около 7 файлов Javascript (благодаря различным плагинам jQuery) и 4-5 файлам CSS. Мне любопытно, как лучше всего справляться с ними, в том числе, где в документе они должны быть загружены? YSlow сообщает мне, что файлы Javascript должны быть - по возможности - включены в конце. Конец тела? В нем упоминается, что, по-видимому, делиметр заключается в том, записывают ли они контент. Все мои файлы Javascript - это функции и код jQuery (все делается, когда готово()), так что это должно быть ОК.

Итак, я должен включить один CSS и один Javascript файл, а остальные включить остальные? Должен ли я объединить все мои файлы в один? Должен ли я помещать Javascript в теги в самом конце моего документа?

Изменить: FWIW да, это PHP.

Ответ 1

Я бы предложил использовать PHP Minify, который позволяет вам создать один HTTP-запрос для группы JS или файлы CSS. Minify также обрабатывает заголовки GZipping, Compression и HTTP для кэширования на стороне клиента.

Изменить: 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, чтобы узнать, как настроить вашу страницу.

Ответ 2

Вот что я делаю: я использую до двух файлов JavaScript и, как правило, один файл CSS для каждой страницы. Я выясню, какие JS файлы будут распространены на всех моих страницах (или их достаточно, чтобы они закрылись - файл, содержащий jQuery, был бы хорошим кандидатом), а затем я объединю их и уменьшу их с помощью jsmin-php, а затем я кэширую комбинированный файл. Если есть какие-то JS файлы, оставшиеся только для одной страницы, я объединяю, уменьшаю и кэширую их в один файл. Первый JS файл будет вызываться по нескольким страницам, второй - только одному или, возможно, нескольким.

Вы можете использовать ту же концепцию с CSS, если хотите, css-min, хотя я считаю, что обычно использую только один файл для CSS, Еще одна вещь, когда я создаю файл кэша, вначале создаю небольшой PHP-код, чтобы служить ему в качестве файла GZipped, который на самом деле позволяет получить большую часть ваших сбережений. Вы также захотите установить заголовок срока действия, чтобы браузер пользователя имел больше шансов кэшировать файл. Я считаю, что вы также можете включить GZipping через Apache.

Для кэширования я проверяю, установлено ли время создания файла больше, чем время, которое я установил. Если это так, я воссоздаю файл кеша и обслуживаю его, иначе я просто получу существующий файл в кэше.

Ответ 3

Вы не указали явным образом, что у вас есть доступ к серверному решению, но, предполагая, что вы это делаете, я всегда старался использовать 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, если они всегда разветвлены.

Ответ 4

Я бы не рекомендовал использовать решение на основе javascript (например, PHP Minify), чтобы включить ваш css, поскольку ваша страница станет непригодной, если посетитель отключен javascript.

Ответ 5

Идея минимизации и комбинирования файлов великолепна.

Я делаю что-то подобное на своих сайтах, но для облегчения разработки я предлагаю код, который выглядит следующим образом:

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>"
}

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

Определенно посмотрите, включая js внизу, а css наверху в соответствии с рекомендациями YUI, так как сохранение минимума JS оказывает ощутимое влияние на внешний вид остальной части страницы и чувствует себя намного быстрее.

Ответ 6

Я также хочу скопировать + вставить все мои jquery-плагины в один файл: jquery.plugins.js, затем ссылку на

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">

для реальной библиотеки jquery.