空src会触发真实http请求:chrome/safari请求当前页面url,firefox≤3.5同理有循环风险,firefox≥3.5不发请求但卡在加载中,ie请求当前目录路径。

空 src 会触发什么请求?不同浏览器行为不一致
空 src 不是“不加载”,而是触发一个真实、不可控的 HTTP 请求。浏览器会按各自逻辑补全 URL,结果五花八门:
- Chrome / Safari:向当前页面 URL 发起一次 GET 请求(比如访问
/user/profile,就再请求一次/user/profile) - Firefox ≤3.5:同样重复请求当前页,有循环风险
- Firefox ≥3.5:不发请求,但 DOM 中该
img或iframe仍处于“加载中”状态,onload不触发,error也不抛出 - IE:拼成当前目录路径,比如页面在
/admin/,就请求/admin/
这意味着你根本没法靠“它看起来没报错”来判断是否安全。只要 HTML 里写了 <img src="">,服务器日志里就可能出现大量 200 或 304 的无效请求。
href="" 在 <a></a> 和 <link> 中的后果完全不同
<a href=""></a> 点击时会跳转到当前页面 URL(相当于刷新),而 <link rel="icon" href=""> 则会让浏览器尝试请求当前路径下的 favicon.ico —— 即使你没写这个文件,也会产生 404。
- 更隐蔽的是
<link rel="shortcut icon" href="#">:点击链接时,浏览器会把#当作相对路径去解析,最终发起对当前 URL 的二次 GET(比如从/login跳转后又请求一次/login) - 用
javascript:void(0)替代空href是常见做法,但它会清空状态栏提示;更好的方式是用e.preventDefault()配合有意义的href值(如/#section-1) -
<link>标签的href绝对不能为空或#,否则图标加载失败且污染网络面板
动态设置 src 时,为什么 iframe.src = "" 比 img.src = "" 更危险?
iframe 对 src 变更极其敏感:哪怕只是赋值为空字符串再设回原地址,浏览器也会无条件销毁旧实例、创建新实例并重发请求。这和 img 的懒加载机制不同,没有缓存协商或状态复用。
- 典型诱因:SPA 路由切换时未销毁
iframe,仅改写src;或组件 re-render 导致innerHTML +=重建整个子树 - 定位方法:在 Chrome DevTools 的 Network 面板中,若看到同一 URL 出现两个请求,且 Initiator 显示为
iframe和script,基本可断定是重复挂载 - 硬性约束:动态创建的
iframe必须只append一次;后续更新前务必先判断iframe.src === newUrl,相等则跳过赋值
如何用最小改动修复已有代码中的空属性问题?
不需要重写整套模板,几处关键替换就能切断大部分无效请求:
- HTML 中所有
<img src="">改为<img src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==">(1×1 透明 GIF 占位) -
<a href=""></a>改为<a href="javascript:void(0)"></a>或更推荐的<a href="#void"></a>+e.preventDefault() -
<link rel="icon" href="">必须指向真实存在的图标文件,如/favicon.ico;若暂无,先删掉整行,不要留空 - JavaScript 动态创建时,避免
img.src = ""或iframe.src = "",初始化直接设为占位符或延迟赋值
真正容易被忽略的不是“怎么修”,而是“谁在默默写空值”——Emmet 插件生成的 img 默认带空 src,Vue/React 的 JSX 中 src={someUrl || ''} 也会掉坑里。检查构建产物的 HTML 源码,比看源代码更可靠。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











