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

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

问题：昨天是在进行页面小功能开发的时候，一个简单的个人信息更新功能，更新的时候总是不成功，反而再更新之后，将原来有的信息都变成空了。但是在debug的时候发现，在执行update操作之后，数据库里是有信息的。完整执行后发现，数据库里数据又变成空的了。

经过一番调查，发现在第一次执行完完成，又有一次同样的请求。第一次是post过去数据，更新到数据库里，紧接着第二次同样请求出发，不过是get方式，没有携带任何值，所有又将数据库中的值更新为空了。原来是二次请求导致的，但是又是什么原因导致这第二次请求呢？调查中发现只有两个页面有类似问题，经过仔细调查（宝宝苦，但是宝宝不说，，，N久。。），定位到一段代码上，如下：

 <ul class="ui-list ui-border-tb">
    <li>
        <div class="ui-list-info ui-border-t">
            <h4>头像</h4>
        </div>
        <a href="#" class="ui-avatar ui-avatar-spring">
            <span style="background-image:url(${member.headimgurl})"> </span>
        </a>
    </li>
</ul>

发现background-image:url值为空，如果去掉这段代码就不会出现二次提交情况。于是问题定位到该属性为空导致。遂网上查一下资料，于是发现新大陆，关于空链接，空路径对页面的性能影响很大，但是恰恰又是很容易忽略地方。以下是相关的说明：
链接：https://developer.yahoo.com/performance/rules.html#emptysrc=

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来代替空的情况。