Geek Answers Handbook

The browser sends a request for the same content (PNG image) several times

I have a PNG file called icons.png hosted on an Apache server. Basically this file is a combination of other small image elements ( CSS Sprite ). This file loads with a normal response of 200 OK when the page loads for the first time.

After loading the page; There are some freezing links on which the user prompt is launched. This tooltip displays part of the image from the icons.png file as the background image of some HTML elements.

For example, the HTML code is as follows:

jQuery(".profile").tipTip({delay: 200, defaultPosition: "top", content: "<a href='#' style='width: 32px; height: 32px; display: block; background: url ( images / icons.png) no-repeat -200px -64px'></a>"});

[There are several more places in the HTML file where icons.png was specified)

Now every time I put a link to a link, a tooltip appears, but at the same time the browser sends an HTTP request to the server for the icons.png file. And the response code from the server as 304 is not changed .

Although the contents of the file do not load, the overhead of sending headers ( about 166 bytes ) still exists every time, which in turn causes a delay of 1.5 s (I am on a black slow connection). During this 1.5 s period, the tooltip has no background image, and suddenly the image appears out of nowhere.

Here are some screenshots.

  • Chrome Network Bar:

Chrome

  • Firebug Panel Panel:

Firefox

  • HTTP headers:

Headings

As far as I know, when the resource was selected, the browser should store it in the cache and extract from it where necessary, instead of asking the server several times .

As I found out, the server doesn't send the Expires header or Cache-Control along with the content. I'm not sure if this could be the reason for this exceptional Chrome behavior. Any suggestion is much appreciated.

PS: The application is hosted in the Heroku hosting environment. I am using Firefox 15.0 and Chrome version 21.0.1180.89 on Ubuntu 12.04 x86_64.

+4
source share
2 answers

Every time you show an element for the first time, this is the moment when it loads any related background images ... at least in modern browsers.

Your numerous requests are likely to be related to the fact that they are the time when you hovered over a new tooltip, making it visible and thus offering to call up the image.

Your instincts are correct, the problem is that if the cache caching configuration is not performed directly on your server or through .htaccess files, it will continue to request the server with the http request to find out if a newer version needs to be downloaded or not. Once you sort the "expires" headers that can be set via mod_expires, it will return a locally requested version of the file each time.

Source : http://httpd.apache.org/docs/2.2/mod/mod_expires.html

+1
source

I recently encountered this behavior, developing locally. The element with the sprite background had the state :hover in the CSS file, which pointed to the same background image of the sprite with a different background, and this caused a very small, but nonetheless noticeable delay when switching the background of the element.

 .class { background: transparent url('sprite.png') 0 0 scroll; } .class:hover { background: transparent url('sprite.png') -50px 0 scroll; }

One way to ensure that this does not happen is to simply use the CSS background-position property.

 .class { background: transparent url('sprite.png') 0 0 scroll; } .class:hover { background-position: -50px 0; }

Of course, cache management is still necessary, this coding approach can save you some headache.

+1
source

More articles:


All Articles