异步加载网页图标-跨浏览器解决方案？

Question

在当今混乱的网络图标环境中（令人惊讶的是） .svg图标尚未获得广泛支持，人们可能会倾向于在头部添加大量元素，以指向任意数量的

• favicons
• icons
• apple-touch-icons
• safari-pinned-tabs
• mstiles

等等

任何页面上的图标，图标，触摸图标，图块等的全面列表将是巨大的。

在某些情况下，这会极大地影响页面的初始化和加载时间。

goldilocks解决方案将能够根据需要添加尽可能多的图标<link>引用，而不会影响页面加载性能。

那么... 异步加载这些元素是否合法？

例如。

const favIcon = {'rel' : 'icon', 'href' : 'favicon.ico'};
const appleTouchIcon = {'rel' : 'apple-touch-icon', 'href' : 'apple-touch-icon.png'};

const myIcons = [favIcon, appleTouchIcon];

for (let i = 0; i < myIcons.length; i++) {

  let myIcon = document.createElement('link');
  myIcon.rel = myIcons[i].rel;
  myIcon.href = myIcons[i].href;
  document.head.appendChild(myIcon);
}

还是将这些<link>元素异步加载到DOMContentLoaded意味着各种用户代理都错过了他们正在寻找的图标？

Answer 1

从理论上讲，网站图标不会影响性能或加载速度，至少不会像您所想的那样。 如果设置正确，大多数浏览器将仅查找所需/受支持的图标，实际上这将是异步非阻塞操作。

此外，默认情况下，网站图标缓存策略非常保守（它们几乎总是被缓存）。 如果有时您看到多个不同格式/大小的请求，那是因为浏览器可能使用不同的图像（用于选项卡，书签，桌面快捷方式等）。

我的建议是将所有内容留给浏览器，并专注于其他更关键的性能注意事项。

请记住，如果您使用https在本地进行测试，则大多数浏览器都会禁用缓存。

最后，我不知道您如何准备网站图标，但是有很多在线工具可以为您优化图像并编写正确的元数据。 （我记得faviconit.com，但我敢肯定有一个更好的网站，尽管效果很好）。

• 最后说明：

如果尽管采取了所有措施，但您仍然决定自己控制情况，则将遇到一些问题：

1. 静态分析工具又名。 爬虫/漫游器很可能看不到您的网站图标，因为99％的时间它们不会运行javascript。

2. 按照您的建议按顺序插入每个链接可能会导致浏览器无法/努力确定要获取的资产（浏览器应等到函数结束时使用，但对此没有规定）