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

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

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

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

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

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

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

最后的注释：

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

又名静态分析工具。 crawlers/bots 很可能看不到您的网站图标，因为 99% 的时间他们不会运行 javascript.
按您建议的顺序插入每个 link 可能会导致浏览器 failing/struggling 决定获取哪个资产（浏览器应等到函数结束，但没有规定)

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

Loading web page icons asynchronously - a cross-browser solution?

javascript

performance

icons

favicon

apple-touch-icon