background-image:url为空引发的两次请求问题

Posted 2021-03-25 xiaozhumaopao

参考文章： https://blog.csdn.net/jsjhushilei/article/details/51101014

 

1.Nicholas 在 2009 年就开始推动各浏览器厂商，现在看起来就 IE 修复得还可以，Firefox 依旧会从本地缓存中读取一次（重复读取有可能会导致 js/css 的再次 parse + execute，浪费呀）。对于#值，则目前所有浏览器都未考虑周全。
改变代码习惯。严禁代码中，url/href/src 值为空或 # . 这应该是目前最好的一种方式。
经验教训：对于开放 CSS 的系统，源码检查时，要加入对 background/background-image: url()/url(#) 的检查。
2.避免空链接属性空的链接属性是指img、link、script、ifrrame元素的src或href属性被设置了，但是属性却为空。如，我们创建了一个图片，并且暂时设置图片的地址为空，希望在未来动态的去修改它。但是即使图片的地址为空，浏览器依旧会以默认的规则去请求空地址：
Internet Explorer 8及以下版本浏览器只在img类型元素上出现问题，IE会把img的空地址解析为当前页面地址的目录地址。例如：如果当前页面地址为http://example.com/dir/page.html，IE会把空地址解析为http://example.com/dir/地址并请求。
早些版本的Webkit内核浏览器 与Firefox 会把空地址解析为当前页面的地址。如果页面内有多个空链接属性元素，当前页面的服务器则会被请求多次，增加服务器的负载。相较桌面浏览器对内核的更新升级较积极，这个问题在ios与android系统的移动浏览器上问题可能较严重。
幸运的是所有主流浏览器面对iframe的src属性为空时，会把空地址解析为about:blank地址，而不会向服务器发出额外的请求。

经过一番调查，最终发现该问题链接或者url其实在开发中会出现取变量值得情况，因此就避免不了出现空的情况，可以用about：blank来代替空的情况。
————————————————
版权声明：本文为CSDN博主「jsjhushilei」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jsjhushilei/article/details/51101014