img标签为空的陷阱

把页面中的img标签的src设置为“”存在巨大的风险,无论是在html中写入

<img src=”" />

还是在js中写入

var img = new Image(); img.src = “”;

出现一次这样的标签会导致向你的服务器多做一次请求。img标签的src=""时,会引起浏览器再次访问"./"即当前目录,如果该目录下有default.aspx,index.aspx等IIS的默认文档,则默认文档会执行2次

    • 在IE中,这样做会请求一次当前页面所在的目录。如在http://playgoogle.com/demo/a.html 中出现这种空src的标签,会导致重新请求一次://playgoogle.com/demo/
    • 在Safari 和 Chrome中,将请求当前页面本身。
    • 在Firefox 3.5以前的版本中,有和Safari同样的问题,但是在3.5中修正了这个BUG。
    • 在Opera 中,不会做额外的请求。

在一个访问量不高的网站中,多一个这样的请求也无所谓(甚至可以让你的网站浏览看上去翻番),但在一个千万级访问量甚至更高的WEB站点里,这样会导致你的服务器和带宽的成本显著增加。 另外一个隐患是,重新请求某个页面可能会导致用户的一些信息被无意中修改,例如cookies,或者ajax操作。

你永远不会写出这样的代码?

我并不这么认为,很多时候这种情况在无意中出现,比如下面这段php代码:

<img src="$imageUrl" >

你原计划是从服务器端读取这个src地址,但是由于某个原因,这个地址还未设置,或者代码的BUG导致读取失败,就会出现空的src标签。

其他的标签中的空src会不会导致这样的问题?

好消息是,在IE中只有image标签有这个问题。坏消息是,在Chrome, Safari, 和 Firefox中<script src=""> 和<link href="">都会导致出现一个新的请求。

如何解决这个问题?

可以从两方面着手,一是尽量避免这种坏的编程方式,不要出现空的src标签。另外,可以从服务器端着手,在发现时这种无意义的请求时不要返回任何东西给客户端。

<?php
    //Works for IE only when using path URLs and not file URLs 

    //get the referrer
    $referrer = isset($_SERVER[‘HTTP_REFERER‘]) ? $_SERVER[‘HTTP_REFERER‘] : ‘‘; 

    //current URL (assuming HTTP and default port)
    $url = "http://" . $_SERVER[‘HTTP_HOST‘]  . $_SERVER[‘REQUEST_URI‘]; 

    //make sure they‘re not the same
    if ($referrer == $url){
        exit;
    }
?> 

原文网址:

Empty image src can destroy your site

时间: 2024-08-06 23:42:58

img标签为空的陷阱的相关文章

jQuery判断 form表单提交时如果表单里有input标签为空那么不提交form表单

<head> <script type="text/javascript"> $("#sub1").click(function(){ var text1=$("#text1").val(); if(text1==""){ alert("不能为空!"); $("#text1").select(); $("#text1").focus(); }e

JavaFX - UI控件 - 标签

  2标签(Label) 本章主要介绍如何使用标签(Label),该类位于JavaFX API的javafx.scene.control包中,用于显示一个文本元素. 接下来会介绍如何让文本元素自动换行来适应受限空间,添加一个图标,或使用视觉特效. 图2 - 1显示了标签的三种常见用法. 左边的标签是一个带图标的文本,中间的展示了旋转效果,右边的使用了自动换行设置. 图2 - 1 标签示例 这幅图显示了三个标签,他们被放在了同一行. 左边的标签有一个看起来像个放大镜的图标和一个"Searc

HTML标签类型及特点

关键词:块级元素  行级元素 行内块元素 一. 概述 HTML(Hyper Text Markup Language )作为一种标记语言,网页所有的内容均书写在标签内部,标签是组成Html页面的基本元素,因此对标签特性的理解在HTML的学习过程中比较重要. 二.基本分类 HTML中的标签从闭合的角度可以分为闭合标签和空标签.而HTML中大部分标签都是闭合标签,其他少数为空标签,常见的空标签有<input />. <img />.  <area />. <base

iOS 去掉html标签 留下原本的字符串

做开发有的时候会遇到服务器返回的数据是html的,我们可以选择直接用webview来加载的方式去处理,当然这个方法不适用所有场景,通常我们会选择把没有必要的html标签去掉留下需要的文字信息,现在一起来看看吧. 首先提供一个html标签的字符串 NSString *html = @"<p><span style=\"font-family:宋体\">劳动是人类创造物质或精神财富的活动,有体力的,也有脑力的.我们自己是劳动者,也是别人劳动的见证者.劳动存

HTML超文本标记语言(二)-HTML中几个常用标签及属性

HTML中几个常用标签及其属性 一.HTML链接标签:<a></a> 1.herf属性:创建指向另一个文档的标签(超链接) 语法结构:<a href=url">Link Text</a> 注意: "链接文本"不必一定是文字,图片或其他HTM元素也可以成为链接. 2.name属性:规定锚的名称,用于创建文档内的书签(锚) 语法结构如下. 命名锚:<a name="tip">基本的注意事项-有用的提示

过滤Html标签

//regex_str = "( )+";//替换 为空格regex_str = "(?i) ";//替换 为空格tmpContent = Regex.Replace(tmpContent, regex_str, " "); //regex_str="<script type=\\s*[^>]*>[^<]*?</script>";//替换<script>内容</script

第二章 认识标签(第一部分)

2.1语义化,让你的网页更好的被搜索引擎理解 在这一章节我们要开始把网页中常用到的标签一 一向大家介绍,学习这一章节的时候要记住学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签.文章中内容的段落就得放在段落标签中,在文章中有想强调

HTML 基本标签02

02-html基本标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- HTLM标签,分为"块级标签"和"行级标签" [块级标签和行级标签的区别] ① 块级标签自动换行,前后隔一行: 行级标签不会自动换行,从左往右依次

使用&lt;br&gt;标签分行显示文本

对于上一小节的例子,我们想让那首诗显示得更美观些,如显示下面效果: 怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车. 上节的代码改为: 语法: xhtml1.0写法: <br /> html4.01写法: <br> 大家注意,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范. 与以前我们学过的标签不一样,&