HTML header link - 这些元素何时加载？
HTML header link - When are these elements loaded?
我正在开发一个新的 Web 项目，目前正在使用网站图标文件。前段时间这是一个简单的任务，但现在几乎完整的 HTML header 似乎都被这个话题占据了：
- 默认图标
- iOS 网站图标
- Microsoft 图标和磁贴
- Android 网站图标
- Safari 选项卡图标
- Chrome 图标
- ...
所有这些元素都使用标准 <link /> 标签引用。我现在想 何时 加载这些元素：
是 所有 <link /> 元素默认加载还是不同的浏览器足够聪明，只加载当前 platform/system 上真正使用的元素？ Windows 磁贴图标是否也加载到 iOS 上？
引用为<link />的其他元素也是如此吗？假设 header 中链接了 100 个不同样式的 sheet。理论上浏览器可以以相反的顺序加载这些文件（后面的样式会覆盖前面的一次）。如果当前文件中使用的所有样式都已经在最后一个样式中定义sheet那么就不需要加载其他99个文件了，是吗？
很可能在现实生活中，确定一种风格 sheet 是否处理 所有 可能的风格比下载和 parsing/combining 所有 100 个文件要难得多。
然而问题是一样的：似乎有很多情况不需要下载所有<link />个元素。浏览器是否足够智能以检测和使用这些案例？
假设响应来自：
How to prevent favicon.ico requests?
in Chrome and Android an IFRAME will generate 3 requests for favicons:
"GET /favicon.ico HTTP/1.1" 404 183 "GET
/apple-touch-icon-precomposed.png HTTP/1.1" 404 197 "GET
/apple-touch-icon.png HTTP/1.1" 404 189
来自：Will browsers request /favicon.ico or <link> first?
我猜浏览器首先请求<link>中的所有图标，如果没有指定，则在文件夹的根目录中搜索'favicon'。
仅供参考：您也可以查看：https://github.com/audreyr/favicon-cheat-sheet 以获取更多信息！希望对您有所帮助！
如今，您应该声明至少 3 或 4 个图标以支持所有浏览器，如果要实现所有可用图标，则最多应声明 20 多个图标。存在关于加载的已知问题：
- Firefox loads all PNG icons on the critical path (the
link rel="icon" icons; not the Apple touch icons). The root cause is that FF does not support the sizes attribute. If you feel concerned by this, please vote for this bug.
- Chrome loads more than one PNG icon, which is better than what it used to be, but still not perfect. Same root cause: Chromes does not support the
sizes attribute. But apparently the Chromium team feels concerned about this.
- iOS Safari 经常加载两个不同的 Touch 图标。这是我在测试带有 iPad 的图标时在服务器日志中多次观察到的内容，但我没有任何可靠的 material 可在此处提供。另请注意 iOS Safari regularly loads Touch icons in the root path by convention (for example,
/apple-touch-icon-120x120-precomposed.png)。因此，声明较少的 Touch 图标，甚至只声明一个 Touch 图标，可能不是最终的解决方案：Safari 可能会尝试加载一些图标并获得 404s。
我没有 Android Chrome 或 IE 的数据。
我正在开发一个新的 Web 项目，目前正在使用网站图标文件。前段时间这是一个简单的任务，但现在几乎完整的 HTML header 似乎都被这个话题占据了：
- 默认图标
- iOS 网站图标
- Microsoft 图标和磁贴
- Android 网站图标
- Safari 选项卡图标
- Chrome 图标
- ...
所有这些元素都使用标准 <link /> 标签引用。我现在想 何时 加载这些元素：
是 所有 <link /> 元素默认加载还是不同的浏览器足够聪明，只加载当前 platform/system 上真正使用的元素？ Windows 磁贴图标是否也加载到 iOS 上？
引用为<link />的其他元素也是如此吗？假设 header 中链接了 100 个不同样式的 sheet。理论上浏览器可以以相反的顺序加载这些文件（后面的样式会覆盖前面的一次）。如果当前文件中使用的所有样式都已经在最后一个样式中定义sheet那么就不需要加载其他99个文件了，是吗？
很可能在现实生活中，确定一种风格 sheet 是否处理 所有 可能的风格比下载和 parsing/combining 所有 100 个文件要难得多。
然而问题是一样的：似乎有很多情况不需要下载所有<link />个元素。浏览器是否足够智能以检测和使用这些案例？
假设响应来自：
How to prevent favicon.ico requests?
in Chrome and Android an IFRAME will generate 3 requests for favicons:
"GET /favicon.ico HTTP/1.1" 404 183 "GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197 "GET /apple-touch-icon.png HTTP/1.1" 404 189
来自：Will browsers request /favicon.ico or <link> first?
我猜浏览器首先请求<link>中的所有图标，如果没有指定，则在文件夹的根目录中搜索'favicon'。
仅供参考：您也可以查看：https://github.com/audreyr/favicon-cheat-sheet 以获取更多信息！希望对您有所帮助！
如今，您应该声明至少 3 或 4 个图标以支持所有浏览器，如果要实现所有可用图标，则最多应声明 20 多个图标。存在关于加载的已知问题：
- Firefox loads all PNG icons on the critical path (the
link rel="icon"icons; not the Apple touch icons). The root cause is that FF does not support thesizesattribute. If you feel concerned by this, please vote for this bug. - Chrome loads more than one PNG icon, which is better than what it used to be, but still not perfect. Same root cause: Chromes does not support the
sizesattribute. But apparently the Chromium team feels concerned about this. - iOS Safari 经常加载两个不同的 Touch 图标。这是我在测试带有 iPad 的图标时在服务器日志中多次观察到的内容，但我没有任何可靠的 material 可在此处提供。另请注意 iOS Safari regularly loads Touch icons in the root path by convention (for example,
/apple-touch-icon-120x120-precomposed.png)。因此，声明较少的 Touch 图标，甚至只声明一个 Touch 图标，可能不是最终的解决方案：Safari 可能会尝试加载一些图标并获得 404s。
我没有 Android Chrome 或 IE 的数据。