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

Question

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

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

等等

任何页面上的网站图标、图标、触摸图标、磁贴等的综合列表都会非常庞大​​。

这会影响页面初始化和加载时间，在某些情况下会非常显着。

金发姑娘的解决方案是能够根据需要添加尽可能多的图标 <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);
}

或者在DOMContentLoaded 上异步加载这些<link> 元素意味着各种用户代理会错过他们正在寻找的图标？

Answer 1

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

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

我的建议是将这一切留给浏览器，并专注于其他更关键的性能考虑因素。

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

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

• 最后注：

如果尽管如此，你仍然决定自己控制局面，你会遇到一些问题：

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

2. 按照您的建议按顺序插入每个链接可能会导致浏览器失败/难以决定获取哪个资产（浏览器应该等到函数结束，但没有这样的规则）