非阻塞加载Favicon引发Chrome提示，该方案是否可行？

放心，这个方案完全可以正常使用，Chrome弹出的只是一个警告提示，不会影响功能的正常运行。

为什么会出现这个警告？ #

Chrome的preload资源检测逻辑会验证：预加载的资源是否在window.load事件触发后的几秒内被“明确使用”。咱们的代码是通过onload事件把<link>的rel从preload改成shortcut icon，浏览器的资源追踪机制没识别到这种“复用预加载资源”的操作，所以误报了这个警告——但实际上预加载的favicon已经被正确使用了。

这个方案的有效性没问题： #

• 对于支持JavaScript的浏览器：preload会以非阻塞的方式异步加载favicon，不会抢占其他核心资源的加载优先级；加载完成后，onload触发并将其设为网站图标，浏览器会直接使用预加载好的资源，不会重复发起请求。
• 对于禁用JavaScript的环境：<noscript>块里的代码会直接加载favicon，完美兼容这类场景。

你用到的代码如下：

<link rel="preload" href="/assets/favicon.ico" as="image" onload="this.rel='shortcut icon'" sizes="196x196"> 
<noscript><link rel="shortcut icon" sizes="196x196" href="/assets/favicon.ico"></noscript>

Chrome弹出的警告信息：

The resource http://.../assets/favicon.ico was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

如果想让这个警告消失，也可以尝试给<link>加上fetchpriority="low"属性，更明确地告诉浏览器这个资源的优先级较低，不过不加也完全不影响方案的功能。

内容的提问来源于stack exchange，提问作者Daniel W.