css - 有谁知道在 CSS 文件中使用查询字符串有任何问题吗?

标签 css caching

我们正在对主要 Sprite 进行更改,我正在讨论完全更改其名称或在末尾添加查询字符串的好处。

保留旧版本以支持 Google 缓存、archive.com 等是合乎逻辑的,但如果我只是编辑文件并向 CSS 图像添加查询字符串,它在我们的系统上也会更干净调用:

#element-id { background-image: url('my-sprite.png?version1'); }

我的问题是,有人知道在 CSS 文件中使用查询字符串缓存破坏器会导致浏览器问题吗?

我怀疑浏览器处理 css 图像请求的方式相同,无论是来自 CSS 文件还是通过 HTML,因此,只要我的服务器正确表达 header 信息,我就没问题。

最佳答案

tl;dr 使用查询参数不是 100% 的解决方案。

使用asset pipeline主要有两个问题:

  1. 确保您的资源在需要时得到缓存
  2. 修改文件时使缓存失效。

查询字符串参数有时会导致网络或浏览器根本不缓存您的资源。更重要的是,正如 Irish 先生所指出的,“查询字符串方法对于 Squid 代理服务器后面的客户端来说是不可靠的”,所以它也可能不可靠地破坏缓存。基本上您不想依赖其他人的配置。

几个引用:

  • Rails Guides: Asset Pipeline - Rails Assets 管道建立在 Sprockets 之上多年来一直专注于解决这些类型问题的元素。他们特别用粗体表示“并非所有缓存都能可靠地缓存文件名仅因查询参数不同而不同的内容。”

  • Steve Soulders Article on revving assets - Steve Souders 是 Web 性能大师,O'Reilly 书籍“高性能网站”的作者撰写了 Rails 指南中引用的这篇文章,建议使用文件名修订来避免代理服务器背后的人出现问题。

  • HTML5 Boilerplate Suggestion - 由可敬的 Paul Irish 和 Nicolas Gallagher 维护的 HTML5 Boilerplate 元素使用 .htaccess 实质上创建了一个过滤器来执行文件名修改。他们特别建议使用文件名修订代替查询字符串版本。

关于css - 有谁知道在 CSS 文件中使用查询字符串有任何问题吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7932413/

相关文章:

.net - 使用 .net 缓存提供程序类在数据库中的 Web 服务器上缓存数据库查询结果

javascript - 我可以依赖 ETags 进行缓存控制吗

javascript - 用户从列表中选择字体时呈现页面 - jQuery

javascript - 无法在html5 Canvas 上绘制文本

css - 使用 attr() 更新 CSS 变量

php - 来自 php 的 SQL 查询不使用 mysql 缓存

javascript - 如何更改 JavaScript 博客小部件中的帖子标题位置

HTML5 输入元素的 CSS Float 失败

Laravel 创建服务提供者参数 1 必须实现服务提供者

Android Volley ImageListener onResponse 行为