【性能优化】之避免空的背景图片backgroundImage:url('')

一、问题所在：

最近在研究网站性能，在分析过程中发现当前的网页信息被请求多次，而且耗时很长，如下图：

 而正常的网页加载，只会请求一次页面信息，如下图：

二、问题原因及不良影响： 

经分析发现，上图多出来的那两次请求来源：

backgrundImage:url('')

首先我们要找，网页中怎么会有空的背景地址呢，原来我们允许用户上传网站背景图片（不必填），用vue写法如下：

<div :style="backgroundImage:'url('+bg+')'"></div>

结果用户如果没有上传背景图片，就导致了url('')空的情况出现，出现了空的url，不同的浏览器有不同的处理方式，在此我们以chrome（ 85.0.4183.102（正式版本） （64 位））浏览器为例：

 测试发现，当chrome中有这种情况时，Chrome会向实际页面发出请求，因此，在处运行的页面会，http://localhost:8888/导致第二次请求，http://localhost:8888/用以填充图像。此行为的根本原因是在浏览器中执行URI解析的方式。RFC 3986-统一资源标识符中定义了此行为。当遇到空字符串作为URI时，它被视为相对URI，并根据5.2节中定义的算法进行解析。

<div :style="backgroundImage:'url('+bg+')'"></div>

不良影响：

1、通过发送大量意外流量来破坏服务器，特别是对于每天获得数百万次页面查看的页面。
2、浪费的服务器计算周期生成了永远不会被查看的页面。
3、可能损坏用户数据。如果您正在通过Cookie或其他方式跟踪请求中的状态，则有可能破坏数据。即使图像请求未返回图像，浏览器也会读取并接受所有标头，包括所有cookie。当其余响应被丢弃时，损坏可能已经造成。

三、前端解决方案

　　可以给整个背景图片backgroundImage:''，这样chrome浏览器就不会再次发出请求【chrome（ 85.0.4183.102（正式版本） （64 位））】

<div :style="backgroundImage:bg?'url('+bg+')':''"></div>

注意：在chrome（ 85.0.4183.102（正式版本） （64 位））上测试 <img src=''/>、<script src=''></script>和<link href="">都不会再次发请求。

 参考地址：

https://humanwhocodes.com/blog/2009/11/30/empty-image-src-can-destroy-your-site/

https://developer.yahoo.com/performance/rules.html#emptysrc=