空路径对页面性能的影响

今天同事小凡反馈，淘宝有个商品详情页，旺铺皮肤的 CSS 文件在 Firefox 下很奇怪的被加载了两次。最近对 detail 的渲染速度进行了优化，因此遇到 bug 第一反应是往优化方面找原因。然而调试了许久才发现，该 bug 居然是一个在淘宝深藏了很久的 bug, 在 IE 下会导致一些糟糕的情况产生。一身冷汗，立刻分析解决之。

这个 bug 并不新鲜。早在 2009 年，Nicholas C. Zakas 就发现了空 src 的危害性：Empty image src can destroy your site( nczonline 网络网/blog/2009/11/30/empty-image-src-can-destroy-your-site/).

Nicholas 的发现可以概括为一句话：img, script, link 的 src/href 为空时，有可能会导致冗余请求。

今天这个 bug 的起因，可以补充 Nicholas 的发现：CSS 里，background url 为空时，也有可能会导致冗余请求。

除了空值，还有一个值也会出问题： # 值。 比如 <img src=”#”>

从测试结果中可以看出， # 值比空值更糟糕。比如 background: url(#) ，直接会触发一个新请求。这次旺铺皮肤的样式文件在 Firefox 下被加载两次，就是因为第三方设计师在 css 里写入了 url(#). css 外链时，考虑静态资源的缓存，重复请求引发的问题并不大。但当 css 内嵌时，在 IE 下会引发一个相对于当前页面的 index 请求，这就比较糟糕了。

解决方案：

1. 等待浏览器自身的改进。Nicholas 在 2009 年就开始推动各浏览器厂商，现在看起来就 IE 修复得还可以，Firefox 依旧会从本地缓存中读取一次（重复读取有可能会导致 js/css 的再次 parse + execute，浪费呀）。对于#值，则目前所有浏览器都未考虑周全。
2. 改变代码习惯。严禁代码中，url/href/src 值为空或 #，这应该是目前最好的一种方式。
3. 经验教训：对于开放 CSS 的系统，源码检查时，要加入对 background/background-image: url()/url(#) 的检查。