New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 674758 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Last visit > 30 days ago
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment

Stylesheet in custom element shadow root is fetched every time an instance is created

Project Member Reported by ericbidelman@chromium.org, Dec 15 2016

Issue description

Chrome Version: 57.0.2952.0
OS: All

What steps will reproduce the problem?
(1) Visit http://jsbin.com/siveyegeju/edit?html,output
(2) Open the network panel in the devtools.
(3) Press the "create instance" button.

What is the expected result?

The stylesheet used in the element's shadow root is fetched once.

What happens instead?

In Chrome, bootstrap.min.css is fetched every time the button is pressed (e.g. an instance of the custom element is stamped).

In Safari TP 19, the stylesheet is only fetched once, not every time an instance of the custom element is created.


 

Comment 1 by hayato@chromium.org, Dec 16 2016

Labels: -Pri-2 Pri-1
That sounds a pretty bad. I could not think of any idea why Blink does not use a cached resource in this case.

I am now in vacation.

Adding Blink>Loader. They might know something about it.

Comment 2 by hayato@chromium.org, Dec 16 2016

Components: Blink>Loader

Comment 3 by tzik@chromium.org, Dec 18 2016

Owner: hirosh...@chromium.org
Status: Assigned (was: Untriaged)
hiroshige-san: Could you look into this?

Comment 4 by tzik@chromium.org, Dec 18 2016

Cc: tzik@chromium.org
The bootstrap.min.css is not served by MemoryCache but is still served by disk cache.

This is primarily because the bootstrap.min.css has Vary response header.
Currently Blink's MemoryCache do not reuse responses with Vary response header, as a conservative handling of Vary response header.
https://codesearch.chromium.org/chromium/src/third_party/WebKit/Source/core/fetch/ResourceFetcher.cpp?sq=package:chromium&l=934
This is not custom element-specific issue, and if we want to fix this we should make MemoryCache to support Vary response header.

Also, the Resource for bootstrap.min.css was frequently evicted from MemoryCache and causing new Resource loading (that hits disk cache).
There might be another issue (not yet investigated though).
Components: -Blink>DOM>ShadowDOM
Cc: hayato@chromium.org
Labels: Needs-Feedback
As I commented in Comment #5, this looks not related to ShadowDOM and the resource is served by Disk Cache, not fetched from the network.

ericbidelman@ and hayato@, can we close this as WontFix, or do we still need MemoryCache to handle responses with Vary response header?
Perhaps this is  devtools bug then showing the extra requests? Regardless, it would be nice to fix this somewhere. It's confusing to developers.
Components: Platform>DevTools
Labels: -Pri-1 Pri-2
Can I check my understanding about the test code?
Everytime createInstance() is called,
- MyEl's constructor() is called,
- therefore shadowRoot.innerHTML is set,
- therefore a new <link> tag is created,
- therefore a new request _can_ happen (when e.g. max-age expires we must send a new request).

+DevTools team,

I think showing the requests that were served by disk cache in DevTools is expected behavior. Is this right?

It's worth noting that I have "Disable cache" checked in the network panel. When I uncheck that, DevTools shows a request for each click, but served from the disk cache. 

So this may be working as intended? 

That said, I think the Safari behavior is more obvious to me. After the first request, the tools NEVER show another duplicate request in the network panel. If users aren't showing the Size column, they'd never know the request is from disk.
Owner: allada@chromium.org
Perhaps, we should make it more obvious that request was served from cache?
Status: WontFix (was: Assigned)

Sign in to add a comment