为什么要提供1x1像素GIF(网络错误)数据呢？

Question

许多分析和跟踪工具正在请求1x1 GIF图像(Web错误,对用户不可见)以进行跨域事件存储/处理.

为什么要提供这个GIF图像呢？简单地返回一些错误代码(如503 Service Temporary Unavailable或空文件)会不会更有效率？

更新:为了更清楚,我问为什么在请求标题中已经发送了所需的所有信息时提供GIF图像数据.GIF图像本身不会返回任何有用的信息.

Answer 1

道格的答案非常全面; 我以为我会添加一个额外的注释(根据OP的要求,我的评论)

Doug的答案解释了为什么1x1像素信标用于它们的目的; 我想我会概述一种潜在的替代方法,即使用HTTP状态代码204,无内容来获取响应,而不是发送图像主体.

204没有内容

服务器已完成请求但不需要返回实体主体,并且可能希望返回更新的元信息.响应可以包括实体标题形式的新的或更新的元信息,如果存在,应该与所请求的变体相关联.

基本上,服务器接收请求,并决定不发送正文(在这种情况下,不发送图像).但它回复了一个代码,通知代理人这是一个有意识的决定; 基本上,它只是一个较短的回答肯定的方式.

来自Google的Page Speed文档:

以异步方式记录页面视图的一种流行方式是在目标页面的底部(或作为onload事件处理程序)包含一个JavaScript代码段,该代码段在用户加载页面时通知日志记录服务器.执行此操作的最常见方式是向服务器构造对"信标"的请求,并将所有感兴趣的数据编码为信标资源的URL中的参数.为了保持HTTP响应非常小,透明的1x1像素图像是信标请求的良好候选者.稍微更优化的信标将使用HTTP 204响应("无内容"),其略小于1x1 GIF.

我从来没有尝试过,但理论上它应该用于相同的目的而不需要传输gif本身,在Google Analytics的情况下可以节省35个字节.(在计划中,除非你的Google Analytics每天提供数万亿次点击,否则35个字节真的没什么.)

您可以使用以下代码进行测试:

var i = new Image(); 
i.src = "http://httpstat.us/204";

Answer 2

首先,我不同意之前的两个答案 - 既没有提出问题.

在使用HTTP协议时,单像素图像解决了基于Web的分析应用程序(如Google Analytics)的固有问题 - 如何将数据从客户端传输到服务器(Web指标).

协议描述的最简单的方法,最简单的(至少包括请求体的最简单的方法)是GET请求.根据此协议方法,客户端向服务器发起对资源的请求; 服务器处理这些请求并返回适当的响应.

对于像GA这样的基于Web的分析应用程序,这种单向方案是个坏消息,因为它似乎不允许服务器按需从客户端检索数据 - 同样,所有服务器都可以做的不是供应资源请求他们.

那么从客户端获取数据到服务器的问题的解决方案是什么？在HTTP上下文中,除了GET之外还有其他协议方法(例如,POST),但由于其不常见和专门用途(例如提交表单数据)证明这是有限的选择.

如果您从浏览器查看GET请求,您将看到它包含请求URL和请求标头(例如,Referer和User-Agent Headers),后者包含有关客户端的信息 - 例如,浏览器类型和版本,浏览器语言,操作系统等

同样,这是客户端发送到服务器的请求的一部分.因此,激发单像素gif的想法是客户端将Web度量数据发送到服务器,包含在请求标头内.

但是,然后如何让客户端请求资源,以便可以"欺骗"发送指标数据？以及如何让客户端发送服务器想要的实际数据？

谷歌分析就是一个很好的例子:ga.js文件(下载到客户端的大文件由网页中的小脚本触发)包含几行代码,指示客户端从特定资源请求特定资源服务器(GA服务器)并发送包含在请求标头中的某些数据.

但是,由于此请求的目的不是实际获取资源而是将数据发送到服务器,因此该资源应该尽可能小,并且在网页中呈现时不应该是可见的 - 因此,1 x 1像素透明gif.大小是可能的最小尺寸,格式(gif)是图像格式中最小的.

更确切地说,所有GA数据 - 每个项目 - 都被组装并打包到请求URL的查询字符串中("？"之后的所有内容).但是为了使数据从客户端(创建它)到GA服务器(记录和聚合),必须有HTTP请求,所以ga.js(已下载的谷歌分析脚本,除非它是由客户端缓存作为页面加载时调用的函数的结果)指示客户端汇集所有分析数据 - 例如,cookie,位置栏,请求标题等 - 将其连接成单个字符串并将其作为查询字符串附加到URL(*http://www.google-analytics.com/__utm.gif*？),并成为请求URL.

使用任何允许您查看浏览器中显示的网页的HTTP请求的Web浏览器(例如,Safari的Web Inspector,Firefox/Chrome Firebug等)很容易证明这一点.

例如,我输入了公司主页的有效网址到我的浏览器的位置栏,该位置栏返回该主页并在我的浏览器中显示(我可以选择任何使用主要分析应用程序之一的网站/页面,GA ,Omniture,Coremetrics等)

我使用的浏览器是Safari,所以我在菜单栏中单击了" 开发",然后单击" 显示Web检查器".在Web Inspector的顶行,单击" 资源",找到并单击左侧列中显示的资源列表中的utm.gif资源,然后单击" 标题"选项卡.这会告诉你这样的事情:

Request URL:http://www.google-analytics.com/__utm.gif?
           utmwv=1&utmn=1520570865&
           utmcs=UTF-8&
           utmsr=1280x800&
           utmsc=24-bit&
           utmul=enus&
           utmje=1&
           utmfl=10.3%20r181&

Request Method:GET
Status Code:200 OK

Request Headers
    User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/533.21.1 
                 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

Response Headers
    Cache-Control:private, no-cache, no-cache=Set-Cookie, proxy-revalidate
    Content-Length:35
    Content-Type:image/gif
    Date:Wed, 06 Jul 2011 21:31:28 GMT

需要注意的要点是:

1. 请求实际上是对utm.gif的请求,如上面第一行所示:*请求URL:http://www.google-analytics.com/__utm.gif*.

2. Google Analytics参数在追加到请求网址的查询字符串中清晰可见:例如, utmsr是GA的变量名称,用于指代客户端屏幕分辨率,对我来说,显示的值为1280x800; utmfl是flash版本的变量名,其值为10.3等.

3. 名为 Content-Type的响应标头(由服务器发送回客户端)也确认请求和返回的资源是1x1像素gif: Content-Type:image/gif

这种在客户端和服务器之间传输数据的一般方案已经存在; 这可能是更好的方法,但这是我所知道的唯一方式(满足托管分析服务强加的限制).

Answer 3

如果资源无法加载,某些浏览器可能会显示错误图标.它使调试/监视服务也变得更复杂,您必须确保您的监视工具将错误视为一个好结果.

OTOH你没有获得任何东西.服务器/框架返回的错误消息通常比1x1映像大.这意味着您基本上没有增加网络流量.

Answer 4

因为这样的GIF在浏览器中具有已知的呈现 - 它是单个像素的周期.任何其他东西都存在视觉上干扰页面实际内容的风险.

HTTP错误可能显示为错误文本的超大帧,甚至可能显示为弹出窗口.如果某些浏览器收到空回复,也可能会抱怨.

此外,页内图像是所有broswers中默认允许的极少数数据类型之一.其他任何内容都可能需要下载明确的用户操作.