Как правильно обслуживать CSS

Question

Скажем, по какой-то причине я хочу обслуживать свой CSS через PHP (из-за предварительной обработки, слияния и т. Д.). Что мне нужно сделать в моем PHP, чтобы это работало хорошо? Кроме самого очевидного:

header('content-type: text/css; charset=utf-8');

А как насчет заголовков, связанных с кэшированием, временем модификации, etags и т. Д.? Какие из них я должен использовать, почему и как? Как бы я анализировал входящие заголовки и отвечал соответствующим образом (например, 304 Not Modified)?

---

Примечание: Я знаю, что это может быть сложно, и было бы намного проще просто сделать то, что я хочу сделать с помощью CSS, прежде чем развернуть его как обычный файл CSS. Если бы я хотел сделать это таким образом, я бы не задал этот вопрос. Мне интересно, как это сделать правильно и хотелось бы узнать. То, что я делаю или могу сделать заранее с помощью CSS, не имеет значения; Я просто хочу знать, как правильно его обслуживать :)

Примечание 2: Я действительно хотел бы знать, как сделать это правильно. Я чувствую, что большая часть деятельности по этому вопросу превратилась в то, что я защищал, почему я хотел бы сделать это, а не получал ответы на вопросы, как это сделать. Был бы очень признателен, если бы кто-то мог ответить на мой вопрос, а не просто предлагать такие вещи, как SASS. Я уверен, что это круто, и я мог бы попробовать это когда-нибудь, но сейчас это не то, о чем я спрашиваю. Я хочу знать, как обслуживать CSS через PHP и научиться правильно обращаться с кэшированием и тому подобным.

Answer 1

похвальное усилие.Кеширование получает слишком мало доброй воли.Пожалуйста, наслаждайтесь моей короткой прозой, пытающейся помочь вам на вашем пути.

Резюме

Отправка заголовков ETag и Last-Modified позволит браузеру отправлять If-Modified-Since иIf-None-Match заголовок обратно на ваш сервер при последующих запросах.Затем вы можете, когда это применимо, ответить кодом состояния 304 Not Modified HTTP и пустым телом, например Content-Length: 0.Включение заголовка Expires поможет вам обслуживать свежий контент в один прекрасный день, когда контент действительно изменился.

Ученик

Звучит достаточно просто, но может быть немного сложно получить толькоправо.К счастью для всех нас, действительно хорошее руководство доступно.

Как только вы его запустите, пожалуйста, перейдите к REDbot , чтобы помочь вам сгладить любые неровные углыВы, возможно, ушли.

Эксперт

Для значения ETag вам понадобится что-то, что вы можете воспроизвести, но все равно будет меняться всякий раз, когда это происходит.В противном случае вы не сможете определить, совпадает ли входящее значение или нет.Хорошим кандидатом на воспроизводимое значение, которое все еще изменяется при изменении содержимого, является MD5-хэш mtime файла, передаваемого через кеш.В вашем случае это, вероятно, будет сумма для всех объединяемых файлов.

Для Last-Modified логический ответ - это фактическое mtime обслуживаемого файла.Почему пренебрегают очевидным.Или для группы файлов, как в вашем случае, используйте самый последний mtime в связке.

Для Expires, просто выберите соответствующий TTL или время жизни, дляактив.Добавьте это число к mtime актива или к значению, которое вы выбрали для Last-Modified, и у вас есть ответ.

Вы также можете включить Cache-Control заголовки, чтобы возможные прокси могли узнать об этом.как правильно обслуживать своих клиентов.

Ученый

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

• Какие заголовки я хочу отправить вместе с ответом 304?
• Получить браузер для отправки как If-None-Match и If-Modified-Since
• HTTP-разъяснение if-none-match и if-Modified-Since и 304 в PHP
• Является ли моя реализация ответов условного получения HTTP в PHP в порядке?

Answer 2

Самым простым способом обслуживания CSS (или JavaScript) через PHP будет использование Assetic , супер-полезного менеджера ресурсов PHP, похожего на Django contrib.staticfiles или Ruby's Jammit.Он обрабатывает кэширование и аннулирование кэша, динамическое минимизация, сжатие и все «хитрые биты», которые были упомянуты в других ответах.

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

Answer 3

Одним из распространенных шаблонов является включение бессмысленного параметра GET. Фактически, сайты обмена стека делают именно это:

<link ... href="http://cdn.sstatic.net/stackoverflow/all.css?v=0285b0392b5c">

v (версия) предположительно является хэшем, вероятно, самого файла CSS. Они не хранят старые листы, это просто способ заставить браузер загрузить новый файл, а не использовать кэшированный.

При такой настройке безопасно установить Cache-Control:max-age на большое значение.

ETag сделает ответ сервера 304, если файл не изменен, вы также можете использовать тот же хеш:

header('ETag: "' . md5("path to css file") . '"');

Answer 4

I просто закончил объяснение здесь почему я не думаю, что PHP-обработанный CSS - хорошая идея;Я полагаю, что большинство людей, которые реализуют это, будут лучше обслуживаться другой структурой приложения.Взгляните.

Если вы должны это сделать, для выполнения кэширования потребуется независимое отслеживание каждого варианта, и чтобы клиент отправлял параметр, который однозначно идентифицирует этот вариант (так что вы можете сказать «не изменен»).

Заголовок Content-Type - хорошее начало, но не хитрый бит ...

Answer 5

Вы должны добавить строку запроса в конце файла javascript, это хороший вариант, чтобы сказать, что это новый файл, пока браузеры не примут те же файлы CSS

www.example.com/css/tooltip.css?version1.0  

или

www.example.com/css/tooltip.css?12-01-2012

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