異步加載網頁圖標-跨瀏覽器解決方案？

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. 按照您的建議按順序插入每個鏈接可能會導致瀏覽器無法/努力確定要獲取的資產（瀏覽器應等到函數結束時使用，但對此沒有規定）