可以/应该使用参数链接到网站图标，图块等？

Question

这些天我们可以指定在我们网站头部的不同设备专用的图标，启动图像，平铺图像等特定的船载。几乎每个版本都需要自己的元标签来指定其目标和分辨率，例如。

<link rel="icon" type="image/png"  href="/icons/icon-32.png" sizes="32x32" /> 
<link rel="apple-touch-icon-precomposed" href="/icons/icon-152.png" sizes="152x152"/> 
<link rel="apple-touch-icon-precomposed" href="/icons/icon-180.png" sizes="180x180"/> 
<meta name="msapplication-TileImage" content="/icons/tile-270x270.png"/> 

这是一些样板，但模板可以处理。但是让我们假设我使用了一个稍微复杂一点的网络服务器，并且实际上需要所有这些路由的代码。也许我想动态地对图像做些事情，比如第一次请求时懒懒地生成图标分辨率，或者计算它们被请求的频率或者有点像这样的东西。最简单的方法是使用一个只需通过get-parameters获取细节的处理程序。所以链接现在看起来像这样：

<link rel="icon" type="image/png"  href="/icon.png?h=32&w=32" sizes="32x32" /> 
<link rel="apple-touch-icon-precomposed" href="/icon.png?h=152&w=152" sizes="152x152"/> 
<link rel="apple-touch-icon-precomposed" href="/icon.png?h=180&w=180" sizes="180x180"/> 
<meta name="msapplication-TileImage" content="/icon.png?h=270&w=270&s=tile"/> 

从后端程序员的角度来看，这个解决方案看起来非常优雅。但是，如果没有重写规则，以这种方式公开实现细节实际上是个好主意吗？

从我看过的所有文章看来，主要浏览器中的url解析代码处理元标记与处理所有其他链接相同，所以额外的参数应该不会成为问题。但也许我忽视了一个哲学不同的人呢？

那么缓存呢？理论上，参数不会改变，所以图标仍然可以缓存 - 但我可以理解为什么浏览器会选择不这样做。另一方面，图标缓存可能有不同的规则，因为它非常重要？

当然，我可以尝试一下，但如果你有这种方法的经验，它可以防止我盲目走下错误的轨道。

Answer 1

TL; DR您的解决方案将起作用，但它有一些缺点。你可能不应该这样做。

你打算做什么（即icon.png?h=32&w=32和朋友）应该工作。浏览器支持图标的这种路径。实际上，添加后缀（例如，icon.png?v=2）是强制浏览器重新加载图标的文档化技术，例如在网站改造过程中更新它们时。关于缓存我没有确定的答案。虽然众所周知浏览器往往不刷新图标（这是网页开发人员在挑选最终版本之前玩图标的麻烦的经典来源），但这并不意味着浏览器确实可以很好地处理图标和缓存。

此说，我看到几个这种技术的缺点：

• 因为您指定的图标尺寸参数，据我所知，您打算申请单，一个尺寸适合所有的变换，生成各种图标。我想你有一个高分辨率的图像，当你需要一个你还没有生成的32x32版本的客户端时，你只需将它缩小。这可能不是一个好主意。不同平台需要不同的图标设计。尽管iOS实际上阻止了透明图标（它应用了黑色背景，这几乎不是您想要的），但Android支持透明度（查看Google本机应用程序图标）。你应该更好地创建你的图标平台每平台。
• 您提到能够统计图标被访问的频率。如果你认识到这一点，我建议你依靠一个可靠的分析工具，它将以正确的方式，以图形和所有方式进行操作。当别人为你辛苦工作时，不要自己编写一个半支持的解决方案。
• 名称惯例很重要。无论您在HTML中声明什么，iOS Safari都会尝试访问某些图标，如/apple-touch-icon.png。 /favicon.ico是另一个经典。不要误会我的意思：如果你拖延了一切（如你打算那样），一切都会奏效。您只会在日志中注意到404。没有害处。

如果您不想简单地获取一些HTML代码和相应的图像并将它们放在项目中，我建议您在“编译时”使用Gulp或Grunt等工具生成这些资源，所以你的项目不是一团糟。