Несколько файлов javascript / css: рекомендации?

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

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

Edit: FWIW да это PHP.

6 53
javascript html css jquery php

6 ответов:

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

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

36

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

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

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

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

2

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

2

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

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

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

0

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

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

для фактической библиотеки jquery.

0