0

在当今破碎的网络图标环境中（令人惊讶的是）.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意味着各种用户代理会错过他们正在寻找的图标？

4

1 回答 1

2

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

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

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

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

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

  • 最后注：

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

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

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

于 2019-09-03T11:26:35.183 回答