627742 - Double download of .otf font file when referenced more than once in @font-face declarations

Status: NEW

(Core :: Layout: Text and Fonts, defect)

Description

[wheresrhys]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13

When two @font-face declarations reference the same font file, the file is downloaded twice

(Not sure if this counts as a bug, but it seems mighty inefficient to me)

Reproducible: Always

Steps to Reproduce:
1. use following css (but edit to link to fonts on your server)

@font-face {
    font-family: Header Font;
    src: url('/assets/font/Museo_Slab_500-webfont.eot');
    src: local('?'), url('/assets/font/Museo_Slab_500-webfont.woff') format('woff'), url('/assets/font/Museo_Slab_500-webfont.ttf') format('truetype'), url('/assets/font/Museo_Slab_500-webfont.svg#webfontCg7ZQgsV') format('svg');
}

@font-face {
    font-family: Button Font;
    src: url('/assets/font/Museo_Slab_500-webfont.eot');
    src: local('?'), url('/assets/font/Museo_Slab_500-webfont.woff') format('woff'), url('/assets/font/Museo_Slab_500-webfont.ttf') format('truetype'), url('/assets/font/Museo_Slab_500-webfont.svg#webfontCg7ZQgsV') format('svg');
}

html

<p style="font-family: Button Font">text</p>
<p style="font-family: Header Font">text</p>

2. refresh the page and watch downloads in firebug. The font file is always downloaded twice.
Actual Results:  
museo_slab_700.otf was downloaded twice, the second download taking a lot longer than the first

Expected Results:  
font should download once

Comment 1

[Boris Zbarsky [:bzbarsky]]

What's the full url to that file?  Or a complete testcase page showing the problem?

Comment 2

[wheresrhys]

Attachment: Test case

As requested, here's a test case

Comment 3

[Boris Zbarsky [:bzbarsky]]

The behavior of that testcase depends on the HTTP server it's running on; if the server sends "Cache-control: no-cache" for the font files, they'll be downloaded twice, for example.

So how are you refreshing the page?  (There are at least 3 different ways of doing that, with different cache-related behavior.)  And what exact headers is your server sending for those files?

Comment 4

[wheresrhys]

You've lost me now - I'm a front-end developer so don't really know too much about server side set-up.

Like I said initially, I'm not 100% sure it should even count as a bug, though it just seems to be highly inefficient EVER to attempt to download the same url twice when the page is only refreshed once. Surely the browser should check to see if the file exists in the browser cache, or is in the process of being fetched, before firing off another request. By comparison, if an image is included in a html file twice, whether as an <img> tag or background image, the browser only fetches the image once.

Comment 5

[Boris Zbarsky [:bzbarsky]]

We do check.  But if the server said to not cache it, HTTP says we should ask the server for the resource again.

For images there is a non-HTTP object cache on top of the HTTP cache (which caches HTTP responses).

I'd sort of appreciate an answer to my questions in comment 3, but at the very least, I'd like to know the answer to this question: Do you see the two loads if the page is "refreshed" by focusing the url bar or hitting enter?

Comment 6

[wheresrhys]

The double download occurs when hitting f5 or enter (with enter all the reponse codes are 200, with f5 they are always a 304 followed by a 200). I'm not sure how to get the headers sent information. I uploaded a complete test page so hopefully if you run that you'll be able to replicate what I'm seeing and get the extra information you need.

Comment 7

[Boris Zbarsky [:bzbarsky]]

Hmm.  304 indicates that we did cache it and the cache entry is valid; why would there be a 200 after a 304?  That's weird.

> I'm not sure how to get the headers sent information.

https://developer.mozilla.org/en/HTTP_Logging has instructions for that.  If you would be willing to create a log for the "load the page, then focus url bar and hit enter" case, that would be very much appreciated!

Comment 8

[wheresrhys]

Attachment: Logs to accompany the test case

Comment 9

[Boris Zbarsky [:bzbarsky]]

That log shows the browser asking the network module for http://localhost/xampp/Museo_Slab_500.otf 4 times.  Each of the 4 times, the resource is loaded from cache.  No HTTP requests are made for that URI.  In fact, the log shows only 5 GET requests to the server: 2 for favicon.ico, one for /en-GB/firefox/api/1.2/list/featured/all/10/WINNT/3.6.13, one for /firefox?client=firefox-a&rls=org.mozilla:en-GB:official and one for a long extern_js url...

Comment 10

[Jeff Muizelaar [:jrmuizel]]

I sent up an example server running this example at http://8.19.33.144/

We seem to always make two requests. IE, Safari, Chrome and Opera all send a single request.

Comment 11

[Boris Zbarsky [:bzbarsky]]

The testcase from comment 10 sends no useful cache-related headers, so we think the font file is brand-new and needs to be revalidated on every load.  Any sort of sane setup would probably send useful cache headers with files.

That said, it sounds like other browsers have some sort of non-HTTP font-face cache sitting in front of their HTTP cache?

Comment 12

[Joe Drew (not getting mail)]

Bug 665707 would help for implementing such a cache :)

Comment 13

[Jeff Muizelaar [:jrmuizel]]

(In reply to Boris Zbarsky (:bz) from comment #11)
> The testcase from comment 10 sends no useful cache-related headers, so we
> think the font file is brand-new and needs to be revalidated on every load. 
> Any sort of sane setup would probably send useful cache headers with files.
> 
> That said, it sounds like other browsers have some sort of non-HTTP
> font-face cache sitting in front of their HTTP cache?

I assume that other browsers treat all resources with the same name referenced from the same document as the same, thus don't download it twice. (e.g. WebKit's CachedImage, CachedFont etc.)

Comment 14

[Jeff Muizelaar [:jrmuizel]]

Here's another test page:

http://js.infidigm.net/script-cache.html

This shows Firefox making 4 requests, Chrome and Opera making 3 requests and Safari making 1 request.

Thus it seems like Chrome and Opera will, at least for script, reuse the same result
during load, after onload they refetch. Safari, will reuse the same result for the lifetime of the page? and we refetch each time.