YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Avoid empty src or href

前端性能优化:Avoid empty src or href

今天我们继续讲解YSlow的前端优化的性能指标——Avoid empty src or href(避免使用空的(IMG 标签的)src地址或者(A标签)的href地址)。

这条优化的规则起初并不在Steve Souders的前端性能优化规则中,它是最近研究前端性能时新增加的。当然,我们首先还是来看看YSlow的规则说明:

Empty Image src 的两种情况和浏览器的不同处理方式

Avoid Empty Image src

Image with empty string src attribute occurs more than one will expect. It appears in two form:

  1. straight HTML
    <img src="">
  2. JavaScript
    var img = new Image();
    img.src = "";

Both forms cause the same effect: browser makes another request to your server.

  • Internet Explorer makes a request to the directory in which the page is located.
  • Safari and Chrome make a request to the actual page itself.
  • Firefox 3 and earlier versions behave the same as Safari and Chrome, but version 3.5 addressed this issue[bug 444931] and no longer sends a request.
  • Opera does not do anything when an empty image src is encountered.

规则说明中介绍得很详细,有两种情况的空src值:

  1. HTML代码中的空src值:<img src="">
  2. JavaScript代码中创建的空src值的IMG标签:var img = new Image();img.src = "";

这两种给IMG标签设置控制的做法都会造成浏览器向你的服务器不同发出请求:

  • Internet Explorer 会发出一个指向当前页面的所在目录的请求地址。
  • Safari and Chrome 会再次请求当前页面。
  • Firefox 3或者更早的版本会跟Safari and Chrome行为一样(再次(最危险的是有可能循环)请求当前页面),而 3.5则会出现这个[bug 444931]问题,之后就不再发出请求。
  • Opera 不会做任何处理,不会发出HTTP请求。

怎么样?如果之前没有仔细看YSlow的介绍,你还不知道空的src值也有浏览器标签不不一致的“兼容”问题吧?还没有完,看看YSlow文档介绍的设置空的src值的“严重”后果吧:

Empty Image src 的“严重”后果

Why is this behavior bad?

  1. Cripple your servers by sending a large amount of unexpected traffic, especially for pages that get millions of page views per day.
  2. Waste server computing cycles generating a page that will never be viewed.
  3. Possibly corrupt user data. If you are tracking state in the request, either by cookies or in another way, you have the possibility of destroying data. Even though the image request does not return an image, all of the headers are read and accepted by the browser, including all cookies. While the rest of the response is thrown away, the damage may already be done.

我前面说过了,后果是很“严重”的:

  1. 给你的服务器带来大量没有必要的HTTP清求,消耗大量的服务器的网络带宽流量,特别是流量很大页面(例如网站首页),每天有几百万流量的页面,算算白白消耗的网络流量,很可怕。
  2. 消耗服务器的资源去处理用户根本看不到的页面(因为页面所在目录的请求和当前页面的请求是不会显示出来的)。
  3. 很可能损坏用户数据。这里损坏用户数据是指,如果你追踪(分析)用户数据,利用cookie或则其他的技术手段。你追踪的是一些(很能是大量)无用的数据,原本是图片的请求数据,但是返回的确实其它不可预测的。这个对用户数据分析是破坏性的。

测试地址:Empty srcEmpty href

Empty Image src 出现解析问题的根本原因

不看不知道,一看吓一跳!有没有这种感觉?YSlow也解释了出现这个问题的原因:

The root cause of this behavior is the way that URI resolution is performed in browsers. This behavior is defined in RFC 3986 – Uniform Resource Identifiers. When an empty string is encountered as a URI, it is considered a relative URI and is resolved according to the algorithm defined in section 5.2. This specific example, an empty string, is listed in section 5.4. Firefox, Safari, and Chrome are all resolving an empty string correctly per the specification, while Internet Explorer is resolving it incorrectly, apparently in line with an earlier version of the specification, RFC 2396 – Uniform Resource Identifiers (this was obsoleted by RFC 3986). So technically, the browsers are doing what they are supposed to do to resolve relative URIs. The problem is that in this context, the empty string is clearly unintentional.

这种现象的根本原因是在浏览器中执行的URI解析的方式。当遇到一个空字符串的URI时,它被认为是一个相对的URI。所以才会出现不同浏览器解析空地址时的不同处理。Safari 和 Chrome是按照(RFC 3986)规范处理的,而IE则不是。所以在技术上,浏览器都做了它们应该做的事情,以解决相对URI。问题是,在这种情况下,空字符串是无意的。

HTML5的规范草案中对IMG标签的src属性的使用做了明确的规范:

The src attribute must be present, and must contain a valid URL referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. If the base URI of the element is the same as the document’s address, then the src attribute’s value must not be the empty string.

但是,目前为止对于<img src="" /><link href="" />这样的情况,还没有明确条款规定要怎么处理。所以我们才看到了上面不同浏览器的不同处理方式。我们只能希望将来这个问题能够给出明确的解决方案来。或者浏览器厂商们能够统一规范。

另外要介绍的是空src值的问题是 Nicolas C. Zakas发现的,并且在它的博文《Empty image src can destroy your site》中有详细的介绍。而这条规则Avoid empty src or href的设计灵感也是来自于Zakas(注:YSlow介绍Zakas是 JavaScript guruJavaScript大师哦!)的研究。

Avoid empty src or href 优化的要点

好了,通读了YSlow的说明文档是为了指导我们实际的操作。那我们要做Avoid empty src or href优化,实际处理时要做的就是一件事情了:细心!

没有什么技巧,Avoid empty src or href就需要我们细心。编写HTML代码和JavaScript程序的时候不要使用空的src地址。当然,记得link标签的href属性也是一样,一定不要为空值!细心,应该是前端工程师需要具备的品质之一!

好了,今天就到这里。以后我们还会介绍导跟IMG标签有关的前端性能优化技巧的。今天的介绍我没有做任何截图,因为主要的原理YSlow的文档都说明得很详细了。剩下的就是需要我们细心的处理好每一个IMG标签的src属性值了!

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Avoid empty src or href

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)