关于chrome浏览器无法正确处理favicon.ico返回的问题

[xtx1130]

起因

今天在开发的过程中，在chrome下遇到一个很奇葩的问题，favicon.ico如果不返回404且不能正常返回的情况下会阻塞页面加载，再刷新一次就会ok。接下来直接上图：


可以发现，我在第一次加载页面的时候，卡住了，下面都是白屏了，接下来看一下charles捕获的请求：


wtf?????请求到favicon就停止了，然后......就没有然后了！这个返回看似是200，是因为我在服务端设置的，而body的返回其实是错误的

why

在网上找了半天，也没找到很好的解释，百度有一篇文章写的比较详细在这里分享一下，主要得出的结论就是服务器建立连接时被Shut down了,而结果就是:浏览器与服务器的连接不正常断开。注意一点，这里没有说是哪里的问题，也就是说，暂时没有十分明确的说法，到底是传输过程中哪里出现了问题。而为什么再次刷新就好了，在查看请求的时候发现再次无缓存刷新的情况下，不会发起favicon的请求，至于为什么，我也没有去深究。

解决办法

正确返回favicon或者对favicon做404处理，都可以让页面正常显示，在对favicon处理返回的时候，需要注意一点就是content-type一定记得单独处理一下，或者直接用现成的包来做处理就好了，npm上很多，就不一一列举了。