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"/>

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

从我读过的所有内容看来，主要浏览器中的网址解析代码处理元标记的方式与处理所有其他链接的方式相同，因此额外的参数在那里不应该成为问题。但也许我忽略了一个有不同哲学的人？

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

当然我可以尝试一下，但如果你对这种方法有任何经验，它可能会让我盲目地走错了轨道。

Answer 1

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

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

这就是说，我看到这种技术存在一些缺点：

因为您将图标尺寸指定为参数，所以我了解您计划应用单个，适合所有人的转换来生成各种图标。我想你在某个地方有一个高分辨率的图像，当你想要一个你还没有生成的32x32版本时，你只需缩小它。这可能不是一个好主意。不同平台需要不同的图标设计。虽然iOS几乎可以防止透明图标（它应用了黑色背景，这几乎不是你想要的），但Android更倾向于透明（看看Google原生应用图标）。您应该更好地创建每个平台的图标平台。
您提到了计算图标访问频率的能力。如果你谈到这一点，我建议你依靠一个可信赖的分析工具，它将以正确的方式，图形和所有。当别人为你努力工作时，不要自己编写半支持解决方案。
名称惯例很重要。无论您在HTML中声明什么，iOS Safari都会尝试访问某些图标，例如/apple-touch-icon.png。 /favicon.ico是另一个经典之作。不要误会我的意思：如果你把所有事情都搞定了（按照你的计划），一切都会奏效。您只会在日志中注意到404。什么都没有害。

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

可以/我应该在链接到favicon，瓷砖等的参数中使用参数吗？

1 个答案: