空路径对页面性能的影响

标签: Programming | 发表时间:2011-09-22 23:13 | 作者:lifesinger ajian
出处:http://lifesinger.wordpress.com

今天同事小凡反馈,淘宝有个商品详情页,旺铺皮肤的 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 请求,这就比较糟糕了。

解决方案:

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

点滴经验,与君共勉。


相关 [路径 页面 性能] 推荐:

空路径对页面性能的影响

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

空路径对页面性能影响的解决方案

- Lynn - 幸福收藏夹
前几天在 Google Reader 中看到玉伯博客的分享——空路径对页面性能的影响. 确实,在写 CSS 的时候,用 background:url(#) 还是会对页面进行多一次请求的. 不过,因为写多 CSS,一般需要用空背景来解决 bug 的时候,测试结果用 background:url(about:blank) 才是我们想要的:解 bug,不影响性能.

用核心-路径法设计页面

- - 博客 - 伯乐在线
英文原文: Boxesandarrows,翻译: 开腾讯CDC. 文章的原名为Designing Screens Using Cores and Paths. 本文作者受到城市规划中“交通需求线”的启发,提出了 网站设计的“核心-路径法”. 区别于通常采用的从框架到主页以及导航的方式,“核心-路径法”让设计者从核心内容入手,由内而外来设计.

使用performance api监测页面性能

- - jackyrong
对于前端开发来说,知道整个页面从开始加载到有内容展示出来的时间是很重要的事情. 通常我们要知道页面加载的时间的话.是采用计算几个关键的时间点的方法来得出页面加载的时间.但是这个方式存在一些问题,比如:我们不知道浏览器在开始解析页面之前卸载前一个文档,解析dns的时间. 那么performance API是啥,能做啥和不能做啥呢.

[转]浏览器的加载与页面性能优化

- Allen - linux大棚-roclinux.cn
本原创文章属于《Linux大棚》博客,博客地址为http://roclinux.cn. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. 文章部分转自“百度泛用户体验平台”,本文地址为:http://www.baiduux.com/blog/2011/02/15/browser-loading/.

浏览器的加载与页面性能优化

- 彦强 - 百度泛用户体验
本文将探讨浏览器渲染的loading过程,主要有2个目的:. 了解浏览器在loading过程中的实现细节,具体都做了什么. 研究如何根据浏览器的实现原理进行优化,提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的,这里面有大量的知识点,为了避免过于发散本文将不会对每个细节都深入研究,而是将重点放在开发中容易控制的部分(Web前端和Web Server),同时由于浏览器种类繁多且不同版本间差距很大,本文将侧重一些较新的浏览器特性.

页面性能中的几个宏观指标

- - Jinpu's blog
最近在做提升淘宝页面性能相关的事情. 从宏观层面,传统web页面,我比较关注的几个指标:. 用户的动作效果(比如点击),超过0.1s,用户就觉得不流畅;. 出现loading的最佳时间为0.4s后,这会让用户忽略前面0.4s的等待;. 对于用户的输入,0.1s-1s用户感觉计算机在为他处理事情,是可以接受的等待,必须在1s内给出对应输出,这也意味着网页的首屏显示时间最理想的为1s内;.

浏览器的加载与页面性能优化

- - 可咔酷 | 网络杂货铺
本文将探讨浏览器渲染的loading过程,主要有2个目的:. 了解浏览器在loading过程中的实现细节,具体都做了什么. 研究如何根据浏览器的实现原理进行优化,提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的,这里面有大量的知识点,为了避免过于发散本文将不会对每个细节都深入研究,而是将重点放在开发中容易控制的部分(Web前端和Web Server),同时由于浏览器种类繁多且不同版本间差距很大,本文将侧重一些较新的浏览器特性.

使用Chrome DevTools的Timeline分析页面性能

- - SegmentFault 最新的文章
随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择. 这种方式拥有非常明显的优势:跨平台、开发便捷、便于部署和维护等等,但随着功能的不断积累,web应用程序也会变得越来越复杂. 但是,我们仍然想要在webpage支持丰富的呈现形式的同时,让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿,就需要我们使用一些比较直观的方式来分析衡量页面的性能问题,为性能优化方案提供依据.

Javascript高性能动画与页面渲染

- - 极客521 | 极客521
如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精确的控制动画. 但我认为至少在现在这个时间点,高级浏览器、甚至手机浏览器的普及程度足够让你有理由有条件在实现动画时使用更高效的方式. 页面是每一帧变化都是系统绘制出来的(GPU或者CPU). 但这种绘制又和PC游戏的绘制不同,它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second,以下用fps简称),对应于显示器的60Hz.