Skip to content
This repository has been archived by the owner on Oct 21, 2022. It is now read-only.

Double request in Chrome #42

Closed
zachleat opened this issue Feb 25, 2015 · 10 comments
Closed

Double request in Chrome #42

zachleat opened this issue Feb 25, 2015 · 10 comments
Assignees
@zachleat

Comments

@zachleat
Copy link
Member

Reproduced with 250KB locally hosted stylesheet, network connection throttled in Chrome to EDGE.

image

Some discussion for this took place in #41, but we this needed to be its own ticket.
@zachleat zachleat self-assigned this Feb 25, 2015
@scottjehl
Copy link
Member

devtools say that the toggleMedia function triggers the request, yet all that function does is switch the stylesheet's media attribute value, which seems like it really should not affect network activity.

Is this issue reproducible in any other browsers? Think it's maybe a Chrome bug? Seems this just started happening too... at least per my recollection.

@zachleat
Copy link
Member Author

Well, the good news is that this is solely from the onload addition. Specifically, even when a callback is not specified, it was adding an empty function() {}. So, this issue is easily fixed on our end.

But #41 still stands as something that is kinda broken upstream in the browser.

@zachleat
Copy link
Member Author

Specifically, these are the offending commits: e36535a e36535a

Walks away in shame.

@zachleat zachleat mentioned this issue Feb 25, 2015
Closed
zachleat added a commit that referenced this issue Feb 25, 2015
@zachleat
Merge changes for #42 to test pages.
1f6997b
zachleat added a commit that referenced this issue Feb 25, 2015
@zachleat
Reduced test case for chrome dupe requests #42
90f5564
@zachleat
Copy link
Member Author

So, after a little more research, onload wasn’t the only variable here.

Here is a reduced test case showing duplicate requests in Chrome 40: http://filamentgroup.github.io/loadCSS/test-chromebug.html

@zachleat zachleat reopened this Feb 25, 2015
@scottjehl
Copy link
Member

For what it's worth, with a fresh cache and cookie bin, this issue is not reproducible on our site: http://www.filamentgroup.com/

I wonder if it has to do with gh-pages and/or cross domain css

@zachleat
Copy link
Member Author

The only variable between the php sleep delayed source and the static file was whether or not the resource had a valid Last-Modified header.

If the file had a Last-Modified header value that was in the past (or a valid Expires header), there were no duplicate requests.
If the file did not have a Last-Modified or Expires header or its Last-Modified header value was in the future, Chrome 40 exhibited duplicate requests.

So, yes it looks like a Chrome bug, but it does not look like a very common/problematic one.

Also of note, Safari 8 did not exhibit these issues.

@zachleat
Copy link
Member Author

Duplicate requests (no caching headers): http://jsbin.com/zeqopa
No duplicate requests (includes caching headers): http://jsbin.com/dasiri

@zachleat
Copy link
Member Author

Any complaints if I close this one @scottjehl? I feel like it’s just a little too esoteric to be worth going upstream with it?

@zachleat
Copy link
Member Author

Closing.

@marcobiedermann
Copy link
Contributor

Same issue on my end. I've tried your test.htmlas well as my own setup

test.html
load-css-test

my setup:

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <title>Website</title>

  <style>critical css…</style>

  <script>

    function loadCSS( href, before, media, callback ){…};
    loadCSS('css/style.css');

  </script>

  <noscript>
    <link href="css/style.css" rel="stylesheet">
  </noscript>

</head>

load-css

DevTools points to: index.html:142

ref.parentNode.insertBefore( ss, ref );

and index.html:161

ss.onloadcssdefined(function() {
  ss.media = media || "all";
});

I've also tested it in Firefox and Safari. Firefox works fine, Safari same results like in Chrome

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@zachleat zachleat

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@zachleat @scottjehl @marcobiedermann