空路径对页面性能的影响
- ajian - 岁月如歌今天同事小凡反馈,淘宝有个商品详情页,旺铺皮肤的 CSS 文件在 Firefox 下很奇怪的被加载了两次. 最近对 detail 的渲染速度进行了优化,因此遇到 bug 第一反应是往优化方面找原因. 然而调试了许久才发现,该 bug 居然是一个在淘宝深藏了很久的 bug, 在 IE 下会导致一些糟糕的情况产生.
今天同事小凡反馈,淘宝有个商品详情页,旺铺皮肤的 CSS 文件在 Firefox 下很奇怪的被加载了两次。最近对 detail 的渲染速度进行了优化,因此遇到 bug 第一反应是往优化方面找原因。然而调试了许久才发现,该 bug 居然是一个在淘宝深藏了很久的 bug, 在 IE 下会导致一些糟糕的情况产生。一身冷汗,立刻分析解决之。
这个 bug 并不新鲜。早在 2009 年,Nicholas C. Zakas 就发现了空 src 的危害性:Empty image src can destroy your site.
Nicholas 的发现可以概括为一句话:img, script, link 的 src/href 为空时,有可能会导致冗余请求。
今天这个 bug 的起因,可以补充 Nicholas 的发现:CSS 里,background url 为空时,也有可能会导致冗余请求。
除了空值,还有一个值也会出问题:#值。 比如 <img src=”#”>
具体测试结果请看:test.html
从测试结果中可以看出,#值比空值更糟糕。比如 background: url(#), 直接会触发一个新请求。这次旺铺皮肤的样式文件在 Firefox 下被加载两次,就是因为第三方设计师在 css 里写入了 url(#). css 外链时,考虑静态资源的缓存,重复请求引发的问题并不大。但当 css 内嵌时,在 IE 下会引发一个相对于当前页面的 index 请求,这就比较糟糕了。
解决方案:
点滴经验,与君共勉。