Sub-resource HTML Import dictates synchronicity for subsequent requests
Reported by
b...@simpla.io,
Nov 29 2016
|
|||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36 Steps to reproduce the problem: 1. Import two resources, 'a' and 'b' both synchronously 2. In resource 'a', import a resource 'c' asynchronously 3. In resource 'a' after the import 'c' tag, log that 'a' has been imported 4. In resource 'b', import a resource 'c' synchronously 5. In resource 'b', after the import 'c' tag, log that 'b' has been imported 6. In resource 'c', log that 'c' has been imported What is the expected behavior? The console should log 'a', 'c' and 'b' because 'b' synchronously requires 'c'. What went wrong? The order of imports is 'a', 'b', 'c'. So if 'b' tried to execute anything that was created in 'c', it would fail. Did this work before? N/A Does this work in other browsers? N/A Chrome version: 54.0.2840.98 Channel: stable OS Version: OS X 10.12.1 Flash Version: Shockwave Flash 23.0 r0 If I don't import 'c' in 'a', the order is correct, making me think that the import is flagged as 'async' and 'b' cannot wait for 'c' to load for some reason.
,
Nov 29 2016
,
Nov 30 2016
bede@simpla.io : Could you please help providing more description to reproduce the issue from Test Engg team to triage further.
,
Nov 30 2016
Sure - I'll try be a bit more descriptive, though the original attachment should show the issue.
In my index.html, I import two HTML files, both of which import c.html.
index.html:
<head>
<link rel="import" href="a.html" />
<link rel="import" href="b.html" />
</head>
a.html imports c.html, but doesn't need it to be blocking, so imports it with the async flag.
a.html:
<link rel="import" href="c.html" async>
<script>
console.log('a imported');
</script>
b.html also imports c.html but depends on it loading, so loads it synchronously i.e. no async flag
b.html:
<link rel="import" href="c.html">
<script>
window.sayHi();
console.log('b imported');
</script>
c.html just declared the doSomething function and logs
c.html:
<script>
window.sayHi = function() {
console.log('hi');
};
console.log('c imported');
</script>
The above is a contrived example, my real world scenario is where I'm defining Custom Elements - in imports I'll be defining those Custom Elements. Sometimes I'll just take advantage of lazy upgrade of those custom elements and therefore only import them lazily, but other times I want to immediately have access to those CE registrations, therefore the same resource will be imported async / sync, but this bug can cause issues if I've tried to import it async earlier, and in a later resource import it synchronously.
,
Nov 30 2016
Sorry - the above needs an edit, doesn't actually say what happens: sayHi will be undefined as the order of HTML imports is a, b, c. Whereas it should be a, c, b as b requires c synchronously. But as a required it asynchronously, it for some reason parses b and it's script tag before c is loaded.
,
Nov 30 2016
The issue flagged in comment 1 above is actually a more common issue for me - but still not sure if this is the same bug or a separate one. In that scenario, a good example of the problem is: In index.html, I import two HTML files that declare Custom Elements - they'll register to the document once they're loaded, and I don't care when, so they're loaded 'async'. <link rel="import" href="user-data.html" async> <link rel="import" href="project-data.html" async> They both rely on a `constants.html` file, which may declare the an API key or some such to use, but they need it straight away before running any code, so they import constants synchronously at the top of their file: <link rel="import" href="constants.html"> As mentioned in that above comment, and demonstrated in that attached file, the first async import in index.html works as behaved, but the second async import, gets parsed before it's synchronous dependencies are loaded.
,
Dec 1 2016
,
Dec 9 2016
Thank you for providing more feedback. Adding requester "durga.behera@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Dec 12 2016
I can reproduce the behavior in Comment 1 and 2. It would be interesting to know if this is a regression.
,
Mar 13 2017
Cleaning up "Needs-Review" label as we are not using this label for triage anymore. Ref bug for this cleanup 684919
,
Jun 22 2017
Tested the issue on windows 7, Mac 10.12.5 using chrome version 59.0.3071.109 and canary 61.0.3137.0 with the below steps 1.Opened a.html from comment #1.Observed console output as a imported 2.Opened b.html on chrome.Observed console output as b imported. 3.Opened c.html on chrome.Observed console output as c imported 4.Opened index.html on chrome.Not observed any output. Please find the attached screen cast and confirm if anything missed here. Request you please provide us actual and expected screen shots to triage the issue from test team end. Request you once try the issue by upgrading chrome to latest stable and update the thread if the issue still persists. Thanks,
,
Jun 23 2017
So I believe to fully replicate this you'll need to serve the files over HTTP, otherwise Imports seem to run into CORS errors. You should be able to reproduce if you serve the files via a web server before performing the initial steps I outlined. See attached video for replicating. You'll see in the console it outputs: a imported b imported c imported But it really should be: a imported c imported b imported
,
Jul 4 2017
,
Sep 5 2017
As per comment#12 issue replicate with serve the files over HTTP and in-house TE team not having the permission to create HTTP url. hence adding the respective label for it to triage further. Thank You!
,
Sep 5 2017
Well, the problem is already analyzed and is being worked on. No further verification of the problem is necessary. Thanks for checking! Removing irrelevant labels, but I'm not sure about TE-NeedsTriageHelp. rbasuvula@, please remove the label if it is no longer relevant.
,
Sep 5 2017
@kochi: Thanks for the update! Removing the TE-NeedsTriageHelp label also. Thank you!
,
Mar 15 2018
,
Mar 16 2018
,
Aug 1
,
Sep 25
,
Sep 25
,
Sep 25
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by b...@simpla.io
, Nov 29 2016Also - and I'm not sure if this is the same bug or should be filed separately - if you import both 'a' and 'b' asynchronously, and import 'c' synchronously in both e.g: index.html: <link rel="import" href="a.html" async /> <link rel="import" href="b.html" async /> a.html: <link rel="import" href="c.html"> <script> console.log('a'); </script> b.html: <link rel="import" href="c.html"> <script> console.log('b'); </script> c.html: <script> console.log('c'); </script> The order should be either 'c', 'b', 'a' or 'c', 'a', 'b'. But I keep getting 'b', 'c', 'a' - having the same problem that if 'b' requires something in 'c', it will fail.1.1 KB
1.1 KB Download