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

Question

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

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

Редактировать: FWIW да, это PHP.

Answer 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>

Edit: Вы также можете использовать Cuzillion , чтобы увидеть, как должна быть настроена ваша страница.

Answer 2

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

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

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 оказывает ощутимое влияние на внешний вид остальной части страницы и ощущается намного быстрее.