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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页