I am looking for the proper way for cach busting images inside CSS.
我正在寻找cach在CSS中破坏图像的正确方法。
It is easy to apply versioning to css,js and images links in PHP, using several methods like suggested here: How to force browser to reload cached CSS/JS files?
使用如下建议的几种方法将版本控制应用于PHP中的css,js和图像链接很容易:如何强制浏览器重新加载缓存的CSS / JS文件?
But I can't figure out how to give a dynamic version to reference links inside the css file, or any other method for enforcing refresh of css references.
但我无法弄清楚如何给动态版本引用css文件中的链接,或任何其他强制刷新css引用的方法。
1 个解决方案
#1
Most of the solutions that are out there are for versioning of .html and not .php pages.
大多数解决方案都是针对.html而不是.php页面进行版本控制。
In PHP you do not have to use:
在PHP中,您不必使用:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
With PHP you can include your CSS.
使用PHP,您可以包含CSS。
And you can set your Cache-Control: max-age
Your CSS will cache the same amount of time as your HTML.
Even if you used versioning with the LINK REL the Browser would not get the HTML to find you changed the LINK to the CSS.
您可以设置Cache-Control:max-age您的CSS将缓存与HTML相同的时间。即使您使用LINK REL进行版本控制,浏览器也无法获取HTML,因此您发现已将LINK更改为CSS。
Saves HTTP Round TTFB
保存HTTP Round TTFB
The Cache Does not matter very much on the CSS if it is "included". You do not have the HTTP Round trip connect and wait time which unless you have excessive amount CSS the content trnsfer time is usually smaller than the connect Time to First Byte.
缓存如果“包含”,则对CSS无关紧要。您没有HTTP往返连接和等待时间,除非您有过多的CSS,否则内容转发时间通常小于连接第一个字节的时间。
GoDaddy Example
This page would have loaded over 2 seconds sooner if the CSS and Fonts were contained in the HTML transfer.
如果HTML和字体包含在HTML传输中,则此页面将加载超过2秒。
CSS File Content Transfer time 1 millisecond Total Time 589 milliseconds
CSS文件内容传输时间1毫秒总时间589毫秒
URL: https://cloud.typography.com/7914312/697366/css/fonts.css
Loaded By: https://www.godaddy.com/:15
Host: cloud.typography.com
Client Port: 0
Request Start: 1.404 s
DNS Lookup: 103 ms
Initial Connection: 36 ms
SSL Negotiation: 90 ms
Time to First Byte: 359 ms
Content Download: 1 ms
<?php
ob_start("ob_gzhandler");
header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: max-age=86400');
// 86400 caches for one day, 604800=week, 2592000=30 days
echo <<<EOT
<!DOCTYPE html>
<html lang="en"><head><title>PHP Testbed</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
EOT;
ob_flush();
include('css.inc');
echo <<<EOT
</style></head><body><div id="page"><h1>TEST</h1>
</div></body></html>
EOT;
ob_end_flush();
?>
#1
Most of the solutions that are out there are for versioning of .html and not .php pages.
大多数解决方案都是针对.html而不是.php页面进行版本控制。
In PHP you do not have to use:
在PHP中,您不必使用:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
With PHP you can include your CSS.
使用PHP,您可以包含CSS。
And you can set your Cache-Control: max-age
Your CSS will cache the same amount of time as your HTML.
Even if you used versioning with the LINK REL the Browser would not get the HTML to find you changed the LINK to the CSS.
您可以设置Cache-Control:max-age您的CSS将缓存与HTML相同的时间。即使您使用LINK REL进行版本控制,浏览器也无法获取HTML,因此您发现已将LINK更改为CSS。
Saves HTTP Round TTFB
保存HTTP Round TTFB
The Cache Does not matter very much on the CSS if it is "included". You do not have the HTTP Round trip connect and wait time which unless you have excessive amount CSS the content trnsfer time is usually smaller than the connect Time to First Byte.
缓存如果“包含”,则对CSS无关紧要。您没有HTTP往返连接和等待时间,除非您有过多的CSS,否则内容转发时间通常小于连接第一个字节的时间。
GoDaddy Example
This page would have loaded over 2 seconds sooner if the CSS and Fonts were contained in the HTML transfer.
如果HTML和字体包含在HTML传输中,则此页面将加载超过2秒。
CSS File Content Transfer time 1 millisecond Total Time 589 milliseconds
CSS文件内容传输时间1毫秒总时间589毫秒
URL: https://cloud.typography.com/7914312/697366/css/fonts.css
Loaded By: https://www.godaddy.com/:15
Host: cloud.typography.com
Client Port: 0
Request Start: 1.404 s
DNS Lookup: 103 ms
Initial Connection: 36 ms
SSL Negotiation: 90 ms
Time to First Byte: 359 ms
Content Download: 1 ms
<?php
ob_start("ob_gzhandler");
header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: max-age=86400');
// 86400 caches for one day, 604800=week, 2592000=30 days
echo <<<EOT
<!DOCTYPE html>
<html lang="en"><head><title>PHP Testbed</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
EOT;
ob_flush();
include('css.inc');
echo <<<EOT
</style></head><body><div id="page"><h1>TEST</h1>
</div></body></html>
EOT;
ob_end_flush();
?>