978688 - Fetching the same CSS multiple times

Status: RESOLVED FIXED

(DevTools :: Style Editor, defect, P1)

Description

[Leo Unglaub]

Attachment: fetching-the-same-css-multiple-times.jpg

Hey,
on some websites i have the problem that the css file is fetched multiple times and causing a lot of traffic. The largest site with that problem is Bitbucket.

I checked this in other browsers as well, but only my Firefox 29.0a2 (2014-02-14) has this problem.

I added you an image of the debugger tools that show the problem. I also reported the issue on Bitbucket: https://bitbucket.org/site/master/issue/9032/bitbucketorg-is-fetching-the-same-css-file#comment-8835978

Greetings
Leo

Comment 1

[Cork]

Do you have an example url where this is happening?

Comment 2

[Leo Unglaub]

Yes, it's happening on every page of the bitbucket website: https://bitbucket.org/dashboard/overview for example. I attach you the head of that page as HTML. For me it looks fine.

Comment 3

[Leo Unglaub]

Attachment: head.html

Comment 4

[YF (Yang)]

WFM on Mozilla/5.0 (Windows NT 6.3; rv:29.0) Gecko/20100101 Firefox/29.0 ID:20140302004001 CSet: 0f0ec964befb.

Comment 5

[Cork]

Could you try in firefox safe mode[1]. Can't reproduce here in neither release, aurora or nightly.

[1] https://support.mozilla.org/en-US/kb/Safe%20Mode

Comment 6

[Leo Unglaub]

I tryed it in the safe mode. It still does try to load the same CSS multiple times. Maybe there is a difference between your Firefox and my Debian Firefox (Iceweasel)

Comment 7

[Leo Unglaub]

I just installed Firebug to check in that tool and guess what. It shows that the file is only requested once. So the problem must be in the Firefox Developer Tools!

I have no idea how the firefox dev tools made up all those fake stats about the fetch.

Greetings
leo

Comment 8

[Leo Unglaub]

Attachment: firebug.jpg

Comment 9

[Rob Campbell [:rc] (:robcee)]

I can't reproduce this locally in Firefox 32, nightly.

Comment 10

[Panos Astithas (he/him) [:past] (please ni?)]

Leo, can you reproduce this using a Mozilla-provided build of Firefox? If it is only present in Iceweasel, then it must be a Debian bug.

Comment 11

[Sami Jaktholm]

Attachment: styleeditor-fetch-from-cache.patch

The requests seem to be caused by style editor that bypasses the cache when it fetches style sheet contents.

Here's a patch that changes the behavior to prefer the cache instead. However, I'm not really sure how to test this so suggestions are welcome.

Try run: https://tbpl.mozilla.org/?tree=Try&rev=c7bc71f450b1

Comment 12

[me]

I'm seeing this, or something similar, in Windows 8.1 w/ Firefox 31. It does seem to do with the development tools. Found it from seeing many requests in the server logs for the same resource, one right after another.

It's not quite easy to reproduce exactly, though from the server side I can see it often request the CSS file again after page load, and in many cases a series of 4 additional downloads of the same CSS asset. Trying out BitBucket, as Leo suggested, seems to inconsistently request a +600k CSS up to six times after the first request.

Turn off the development tools, and according to the server the extra requests go away, 100% of the time. From what I can tell, if the tool says it's making a request, it has actually made that request.

The "Show original sources" does generally seem to tack on an extra request, too, though it's not a sure thing.

Comment 13

[Heather Arthur [:harth]]

STR:

1) Open Network Monitor
2) visit http://bitbucket.org
3) Filter network requests for CSS
4) Observe 3 files
5) Visit the Style Editor and let editors load
6) Go back to Network Monitor

Expected:
Still only 3 CSS requests

Actual:
See 2 more (5 total) CSS requests.

Regression range from mozregression:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=df82be9d89a5&tochange=12ea03a70243

Has to be caused by bug 926014, adding source map support to the style editor.

Comment 14

[Heather Arthur [:harth]]

Comment on attachment 8459137 [details] [diff] [review]
styleeditor-fetch-from-cache.patch

Review of attachment 8459137 [details] [diff] [review]:
-----------------------------------------------------------------

This patch works great, thanks Sami. This was all my careless mistake.

::: toolkit/devtools/server/actors/stylesheets.js
@@ +1066,5 @@
>      if (content) {
>        this.text = content;
>        return promise.resolve(content);
>      }
> +    return fetch(this.url, { loadFromCache: true, window: this.window }).then(({content}) => {

We explicitly don't load the source map from the cache for scripts the debugger, and I bet there's a reason for that. Maybe Nick can comment on why?

Comment 15

[Heather Arthur [:harth]]

Nick, why don't we try to load the source map from the cache?

Comment 16

[Heather Arthur [:harth]]

(In reply to Heather Arthur [:harth] from comment #15)
> Nick, why don't we try to load the source map from the cache?

Nm, that line was trying to fetch original sources from the cache, not the source map. The debugger doesn't do that either. The explanation is a comment in the script.js file:

// XXX bug 865252: Don't load from the cache if this is a source mapped
// source because we can't guarantee that the cache has the most up to date
// content for this source like we can if it isn't source mapped.

Sami, get rid of the line that uses loadFromCache for original (source mapped) sources.

At this point it's obvious that we should really have a test for this. Let me know if you need help.

Comment 17

[Heather Arthur [:harth]]

The test could do one of a few things. It could either:

1) Just use the STR I gave, opening the Network Monitor first and test how many entries are there after fully loading the style editor. The question is what to wait for as you're waiting for something to not happen.

2) Just open the style editor and listen for network requests (maybe listening for "http-on-examine-response" on the nsIObserverService) when loading the style editor. Same problem here, you're waiting for something to not happen.

3) Load the page, then change the stylesheet file and make sure the style editor loads the old version.

Open to suggestions too.

Comment 18

[Heather Arthur [:harth]]

Comment on attachment 8459137 [details] [diff] [review]
styleeditor-fetch-from-cache.patch

Review of attachment 8459137 [details] [diff] [review]:
-----------------------------------------------------------------

Works great, just needs a test.

Comment 19

[Sami Jaktholm]

Attachment: styleeditor-fetch-from-cache.patch

Here's a patch with a test case.

The test case works by opening a new tab, loading netmonitor, navigating to simple.html, opening style editor, waiting for it to load and calculating the number of entries for simple.css in the Network Monitor. It detects this bug as long as other tests don't load simple.html from example.org before this test is executed (other tests use example.com domain) as it requires example.org/.../simple.css not to be served from the cache.

Try run: https://tbpl.mozilla.org/?tree=Try&rev=720a679c7e60

Comment 20

[Heather Arthur [:harth]]

(In reply to Sami Jaktholm from comment #19)
> It detects this bug as long as other tests don't load simple.html from example.org before
> this test is executed (other tests use example.com domain) as it requires
> example.org/.../simple.css not to be served from the cache.

Can we make two new test files then? 'cached.html' and 'cached.css'. r=me with that.

Comment 21

[Sami Jaktholm]

Attachment: styleeditor-fetch-from-cache.patch

That's probably a better idea. Just tried not to add new files as there's already plenty of them laying around. r+ as requested.

Try run: https://tbpl.mozilla.org/?tree=Try&rev=ba6c28322da6

Comment 22

[Heather Arthur [:harth]]

We'll probably want to add a test at some point that tests that we're getting the cached version, especially if bug 764958 is fixed. But this works for now, and fails without the fix.

Comment 23

[Heather Arthur [:harth]]

Thanks so much Sami.

Comment 24

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/integration/fx-team/rev/c855ae0e43a9

Comment 25

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/c855ae0e43a9

Comment 26

[me]

This is still happening in v31.0 - happening on Windows 8.1 and OSX Mavericks with every site I've tested so far.

Comment 27

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

(In reply to me from comment #26)
> This is still happening in v31.0 - happening on Windows 8.1 and OSX
> Mavericks with every site I've tested so far.

The fix landed in Firefox 34, which is currently the Nightly channel.

Comment 28

[Felix Buenemann]

I think this bug should be re-opened. It seems still broken when using a CDN.

I'm still seeing multiple GETs of the same CSS file in 34.0a2 (2014-09-19) while the developer tools are open. Sometimes there are like 14 GET requests for the same infinetly cacheable CSS file and I can see that they are all requested from different CDN servers with unique request ids.

If I switch off the CDN and serve the CDN through the origin server I only see a single requests for the CSS. I'm using a CloudFront CDN and the response headers from the CDN contain CORS na dome unique AWS headers which are missing when requesting throug the origin server.

I noticed that all the addional requests happen after the page is fully loaded. So there's the normal request in position 2 and 14 additional requests at the end.

Unfortunately the site is not yet public, so I can't post a link. I can however post request headers.

The problem does not occur when using Firebug instead of the built-in developer tools.

Comment 29

[Felix Buenemann]

After doing a shift-reload with developer tools open, the extra GETs no longer happen with either the CDN or the origin server.

The problem described above only happens if the stylesheet was cached by an older Firefox version affected by this bug.

This can be easily reproduced by opening the page in Firefox stable and then re-opening in Aurora.

Comment 30

[René Schümann]

I can only agree to what Felix Buenemann said.
I also found this bug because it was happening to one site I was developing. Though I'm on 35.x and it should have been fixed.

Actually the site I were developing was newly made after I started using 35.x, but the CSS existed even before (though it changed a few times since then)
So seems like a cache reset is required for this fix to work at all... otherwise nothing will fix it for now.

I've got 2 requests to my CSS after page load (3 total), and only 1 additional if I had "Show original sources" disabled in options

Comment 31

[david]

I'm seeing the same issue in Firefox 36.0.1, Ubuntu 14.04.

I've tried clearing Firefox's cache and restarting, and the issue persists. Without Firefox's dev tools open, my webserver only gets one request for the CSS file; with the dev tools open it gets five - one after the page and then four at the end after the other assets have been requested. Firebug doesn't result in extra requests.