为什么Chrome在页面加载完成后还会请求当前页面的img类型资源？

问题原因 #

这个img类型的重复请求，核心触发逻辑是浏览器遇到空资源地址的图片引用时，会默认使用当前页面URL作为资源地址发起请求，常见的触发场景有这几种：

• 代码中存在src属性为空、或者未赋值的<img>标签，包括JS动态创建后插入DOM的img元素
• CSS规则中存在background-image: url() 括号内为空的配置
• 极少数情况是第三方脚本动态生成了错误的图片资源引用

你场景里请求类型明确为img，基本可以排除favicon配置错误的可能（favicon请求类型一般为icon）。

排查方法 #

最快的定位方式是打开DevTools的Network面板，选中那条img类型的report.test.php请求，查看「Initiator（发起者）」标签，就能直接定位到触发请求的具体代码行。
也可以全局扫描项目代码做自查：

• 搜索所有模板和JS逻辑里的<img>标签、new Image()相关逻辑，检查是否存在空src的情况
• 搜索所有CSS文件里的url()配置，检查是否存在空值

解决方案 #

• 补全所有img标签的有效src地址，不需要展示的img直接删除，临时占位可以用1像素透明图的base64地址：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
• 清理所有CSS里的空url()配置
• 动态创建的img元素，确保完成src赋值之后再插入DOM树

修改完成后刷新页面即可验证：Network面板只会保留1次document类型的页面请求，标签页加载动画会在页面渲染完成后立刻停止，跨标签页的请求阻塞问题也会同步解决。

内容的提问来源于stack exchange，提问作者Vincent