Can/should 我在网站图标、磁贴等链接中使用参数？
Can/should I use parameters in links to favicon, tiles and the like?
如今，我们可以在我们网站的头部部分指定针对不同设备的大量图标、启动图像、磁贴图像等。几乎每个版本都需要自己的元标记来指定其目标和分辨率，例如。
<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"/>
这是一些样板文件，但模板可以解决这个问题。但是让我们假设我使用的网络服务器稍微复杂一点，并且实际上需要所有这些路由的代码。也许我想动态地对图像做一些事情，比如在第一次请求它们时懒惰地生成图标分辨率，或者计算它们被请求的频率或类似的东西。做到这一点的最简单方法是拥有一个仅通过获取参数获取详细信息的处理程序。所以链接现在看起来像这样：
<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 解析代码处理元标记的方式与处理所有其他链接的方式相同，因此额外的参数应该不是问题。但也许我忽略了一个有着不同哲学的人？
那么缓存呢？理论上，参数不会改变，所以图标应该仍然是可缓存的——但我能理解为什么浏览器会选择不这样做。另一方面，也许图标缓存有不同的规则，因为它是如此重要？
当然可以试一试，如果你有过这种做法的经验，我就不会盲目走错路了。
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之类的工具来生成这些资产位于 "compile time"，因此您的项目不会一团糟。
如今，我们可以在我们网站的头部部分指定针对不同设备的大量图标、启动图像、磁贴图像等。几乎每个版本都需要自己的元标记来指定其目标和分辨率，例如。
<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"/>
这是一些样板文件，但模板可以解决这个问题。但是让我们假设我使用的网络服务器稍微复杂一点，并且实际上需要所有这些路由的代码。也许我想动态地对图像做一些事情，比如在第一次请求它们时懒惰地生成图标分辨率，或者计算它们被请求的频率或类似的东西。做到这一点的最简单方法是拥有一个仅通过获取参数获取详细信息的处理程序。所以链接现在看起来像这样：
<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 解析代码处理元标记的方式与处理所有其他链接的方式相同，因此额外的参数应该不是问题。但也许我忽略了一个有着不同哲学的人？
那么缓存呢？理论上，参数不会改变，所以图标应该仍然是可缓存的——但我能理解为什么浏览器会选择不这样做。另一方面，也许图标缓存有不同的规则，因为它是如此重要？
当然可以试一试，如果你有过这种做法的经验，我就不会盲目走错路了。
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之类的工具来生成这些资产位于 "compile time"，因此您的项目不会一团糟。