Javascript 更改时加载web资源[js、css、图像]的最佳方式是什么

Javascript 更改时加载web资源[js、css、图像]的最佳方式是什么,javascript,html,css,optimization,web,Javascript,Html,Css,Optimization,Web,我面临一个关于浏览器缓存资源的问题。有一些javascript文件,css文件是不断变化的,尽管时间不是固定的 在服务器上更新这些文件时,不会加载新文件,需要清除浏览器缓存才能加载新文件 在加载资源时,是否有一种方法、服务器或浏览器设置告诉浏览器,如果服务器文件中有任何更改,请从服务器加载,否则请使用存储在浏览器缓存中的现有文件 我正在寻找一种解决方案,它需要一些基于浏览器/服务器的配置,而不是每次更新时都需要手动执行的操作,只需在url的末尾添加?[一些唯一/随机数字],它每次都会得到文件 比

我面临一个关于浏览器缓存资源的问题。有一些javascript文件,css文件是不断变化的,尽管时间不是固定的

在服务器上更新这些文件时,不会加载新文件,需要清除浏览器缓存才能加载新文件

在加载资源时,是否有一种方法、服务器或浏览器设置告诉浏览器,如果服务器文件中有任何更改,请从服务器加载,否则请使用存储在浏览器缓存中的现有文件


我正在寻找一种解决方案,它需要一些基于浏览器/服务器的配置,而不是每次更新时都需要手动执行的操作,只需在url的末尾添加?[一些唯一/随机数字],它每次都会得到文件

比如说


时间刻度可能是最好的选择之一,而不是随机数

只要在url的末尾放上[一些唯一的/随机数],它每次都会得到文件

比如说


时间刻度可能是最好的选择之一,而不是随机数。设计站点时,客户端只需获取一次外部JavaScript和CSS,这是一种很好的做法

将外部资源设置为在未来1年到期。在每个文件名后面附加一个版本号,因此使用stylesheet-1.2.4.css代替stylesheet.css,然后当您想要更新客户端的css时,增加版本号

增加版本号会强制客户端下载更新的文件,因为它被视为一个完全独立的资源

如果您不想要此解决方案,请执行以下操作:

<link rel="stylesheet" type="text/css" href="/stylesheet.css?foo=<?php echo rand(); ?>"/>


设计站点是一种很好的做法,这样客户端只需要获取一次外部JavaScript和CSS

将外部资源设置为在未来1年到期。在每个文件名后面附加一个版本号,因此使用stylesheet-1.2.4.css代替stylesheet.css,然后当您想要更新客户端的css时,增加版本号

增加版本号会强制客户端下载更新的文件,因为它被视为一个完全独立的资源

如果您不想要此解决方案,请执行以下操作:

<link rel="stylesheet" type="text/css" href="/stylesheet.css?foo=<?php echo rand(); ?>"/>

在加载资源时,是否有一种方法、服务器或浏览器设置告诉浏览器,如果服务器文件中有任何更改,请从服务器加载,否则请使用存储在浏览器缓存中的现有文件

试着用cookies检查一下

在加载资源时,是否有一种方法、服务器或浏览器设置告诉浏览器,如果服务器文件中有任何更改,请从服务器加载,否则请使用存储在浏览器缓存中的现有文件

试着用cookies检查一下

是否有一种方法,服务器或浏览器设置可以告诉浏览器何时 加载资源时,如果服务器文件中有任何更改,请加载 从服务器,否则使用浏览器中存储的现有文件 缓存

要实现上述目标,您可以。但这并不能像缓存文件那样避免http请求击中服务器的成本

更新

从现在起,你可以做这样的事情

<?
function get_filename_with_version($fname)
{
    return "?filename=" . $fname; // Generate the hash of the content and append it here as a query string
}
?>

<link rel="stylesheet" href="resrc.php<?php echo get_filename_with_version('a.css');?>" />
是否有一种方法,服务器或浏览器设置可以告诉浏览器何时 加载资源时,如果服务器文件中有任何更改,请加载 从服务器,否则使用浏览器中存储的现有文件 缓存

要实现上述目标,您可以。但这并不能像缓存文件那样避免http请求击中服务器的成本

更新

从现在起,你可以做这样的事情

<?
function get_filename_with_version($fname)
{
    return "?filename=" . $fname; // Generate the hash of the content and append it here as a query string
}
?>

<link rel="stylesheet" href="resrc.php<?php echo get_filename_with_version('a.css');?>" />

如果使用PHP,可以使用以下解决方案:

//Just add the timestamp as parameter to your filename.
<link rel="stylesheet" type="text/css" href="css/stylesheet.css?<?php echo time(); ?> />
<script type="text/javascript" src="scripts/script.js?<?php echo time(); ?>"></script>
<img src="image.png?<?php echo time(); ?>" />

如果使用PHP,可以使用以下解决方案:

//Just add the timestamp as parameter to your filename.
<link rel="stylesheet" type="text/css" href="css/stylesheet.css?<?php echo time(); ?> />
<script type="text/javascript" src="scripts/script.js?<?php echo time(); ?>"></script>
<img src="image.png?<?php echo time(); ?>" />

仅使用查询字符串来中断缓存并不能100%保证:例如,一些代理服务器将删除从html链接的文件上的任何查询字符串

更好的方法是修改uri或文件名。我在apache中使用重写规则,以便:

my.app.com/12345/js/file.js

寄往:

htdocs/js/file.js

在文件系统中

然后,我的应用程序根据源代码管理更新版本号,但您可以在html中手动完成此操作。有了这个解决方案,并设置了一个遥远的未来expires http 1.0和max age http 1.1头,我通过一个新的uri获得了永久客户机缓存的好处,并且文件在文件系统上的相同位置易于开发

Steve Souders关于遥远未来的标题:


仅使用查询字符串来中断缓存并不能100%保证:例如,一些代理服务器将删除从html链接的文件上的任何查询字符串

更好的方法是修改uri或文件名。我在apache中使用重写规则,以便:

my.app.com/12345/js/file.js

寄往:

htdocs/js/file.j

在文件系统中

然后,我的应用程序根据源代码管理更新版本号,但您可以在html中手动完成此操作。有了这个解决方案,并设置了一个遥远的未来expires http 1.0和max age http 1.1头,我通过一个新的uri获得了永久客户机缓存的好处,并且文件在文件系统上的相同位置易于开发

Steve Souders关于遥远未来的标题:



这里有10多个资源,我认为每次我更新资源时都要记录数字的变化是很困难的。你不必记住数字?在它被浏览器忽略之后,您可以在服务器端使用随机数方法,其中包括不需要跟踪的文件。只要在URL末尾使用随机生成的数字,您就可以在服务器上每小时/天/周/月/任何适合您的时间自动生成该数字。它实际上也不必是随机数,您可以在上次编辑文件时进行脚本检查并附加该日期。我会避免使用查询字符串,因为代理缓存通常不会在URL中缓存资源。有10多个资源,我认为每次我更新资源时都要记录数字的变化是很棘手的。你不必记住数字,是吗?在它被浏览器忽略之后,您可以在服务器端使用随机数方法,其中包括不需要跟踪的文件。只要在URL末尾使用随机生成的数字,您就可以在服务器上每小时/天/周/月/任何适合您的时间自动生成该数字。它实际上也不必是随机数,您可以在文件上次编辑时进行脚本检查并附加该日期。我会避免查询字符串,因为代理缓存通常不会在URL中缓存资源。您能告诉我如何为单个资源文件(如.js)添加标题吗,在phpi中,我阅读了关于ETag和上次修改的头的内容,但是我有点困惑如何将其用于特定的资源文件我不想在根文件上进行检查,而是在单个资源文件上进行检查。。这是否意味着我需要像动态加载一样加载它们并在那里添加头文件。为什么静态文件通过resrc.php提供服务?嘿,这是我的问题,如何将Etag,上次修改的头文件设置为静态资源文件你能告诉我如何在phpi中为单个资源文件(如.js)添加头文件阅读关于Etag和上次修改的头文件,但是我有点困惑如何将它用于特定的资源文件我不想检查根文件,而是单个资源文件。。这是否意味着我需要像动态加载一样加载它们并在那里添加头文件。为什么静态文件通过resrc.php提供?嘿,这是我的问题,如何将Etag,上次修改的头文件设置为静态资源文件为什么要包含随机数?这难道不会导致额外的下载,完全违背了缓存资源的目的吗?我想你没有读过这个问题吧?主席先生,这正是问题所需的答覆。请回顾并尝试理解问题。问题是当文件发生更改时如何下载文件。使用随机数意味着无论文件是否更改,每次都会下载。先生,答案有两个。如果您阅读第一个,正如您所说的,第二个选项是有条件的,正如我在帖子中所说的,如果您不需要此解决方案,请执行此操作。为什么要包含随机数?这难道不会导致额外的下载,完全违背了缓存资源的目的吗?我想你没有读过这个问题吧?主席先生,这正是问题所需的答覆。请回顾并尝试理解问题。问题是当文件发生更改时如何下载文件。使用随机数意味着无论文件是否更改,每次都会下载。先生,有两种解决方案可以回答如果您阅读第一种,正如您所说的,第二种选择是有条件的,正如我在帖子中所说的,如果您不想要此解决方案,请执行此操作。