Yahoo网页开发35条规则

本文探讨了空图像来源(src属性为空的<img>标签)如何导致不必要的服务器请求,影响性能,并可能损害用户数据。针对不同浏览器的行为进行了详细说明,并引用了HTML5对此问题的规范修订。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文地址:http://developer.yahoo.com/performance/rules.html

翻译的部分:http://www.cnblogs.com/evasnowind/archive/2010/02/28/1675151.html

第35条:

35、避免空的图像来源

一个src属性为空串的图像有两种情况:

1. 直接的HTML

<img src="">

2. JavaScript

var img = new Image();
img.src = "";

 

这两种情况都会引起同样的效果:浏览器会再次向你的服务器发出请求。

  • Internet Explorer 将向这个页面所在的目录发出一个请求
  • Safari and Chrome 将发出对这个页面的一个请求。
  • Firefox 3 和更早的版本所采取的动作和Safari and Chrome一样,但是 3.5版本 addressed this issue[bug 444931] and no longer sends a request.
  • Opera 不进行任何操作。

这个行为为何是不好的?

1、 发送大量突然的请求将使你的服务器宕机(Cripple your servers),尤其是每天有数百万访问量的页面。

2、 产生一个从未浏览过的页面将浪费服务器的计算周期(computing cycles)

3、 损坏用户数据。如果你在请求中追踪状态(以cookie或是其他的方式),你可能会损坏数据。即使这个图像请求并没有返回一个图像,所有的头被浏览器读取并接受,包括所有cookie。While the rest of the response is thrown away, the damage may already be done.

引起这种行为的根源在于浏览器中URI的解析方式。这种行为定义在RFC 3986 - Uniform Resource Identifiers.当一个空串作为一个URI时,它被认为一个相对URI(relative URI)并通过定义在section 5.2中的算法被解析。这个特例,一个空串,列在section 5.4当中。Firefox, Safari, and Chrome都是依据这一规格来解析空串,而Internet Explorer则不正确的解析这个串,符合更早的一个规范,RFC 2396 - Uniform Resource Identifiers (this was obsoleted by RFC 3986).所以技术上,浏览器都在做它们被期望所做的事情来解析relative URIs,问题是在这个范围,空串不是故意造成的。

 

HTML5 adds to the description of the tag's src attribute to instruct browsers not to make an additional request in section 4.8.2:

    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.

非常希望浏览器在将来不会有这样的问题。不幸的是,没有为<script src=""> and <link href="">的条款。或许仍需要时间来做出调整以保证浏览器不会意外的实现这一行为。

这一规则是受雅虎JavaScript导师Nicolas C. Zakas启发。更新信息请参见Empty image src can destroy your site..

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值