[whatwg] DOMContentLoaded and stylesheets

[Mathias Schäfer]

Am 11.02.2010 01:16, schrieb Boris Zbarsky:

> Gecko currently does not wait on stylesheet loads to complete before 
> firing DOMContentLoaded.  They might complete before the parser is
> done, or they might not.

Okay, my first testcase confirmed this.
http://molily.de/domcontentloaded/t1-link-no-script.html

But if there’s a script after the stylesheet, DOMContentLoaded always
fires after the stylesheet has been loaded. The explanation I’ve found
is that the parser waits for the stylesheet to load before subsequent
scripts are executed. Therefore, the whole parsing is halted and
DOMContentLoaded is deferred. That’s what my second testcase demonstrates:
http://molily.de/domcontentloaded/t2-link-external-script.html

>> 2. Does the HTML5 parser specify that external stylesheets defer 
>> external script execution? As far as I understand the specs, it
>> doesn't.
> 
> http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#running-a-script
>
> step 8 the cases that talk about "a style sheet blocking scripts"
> specify this.

Thanks for the hint. AFAICS only the third case talks about “a style
sheet blocking scripts”. But this case only deals with “parser-inserted”
inline scripts.

The question is: Is a normal external script “parser-inserted” or not?
I assume the flag to be false, since that’s the default value and I
found “parser-inserted” to be true for XML parsing only
(#parsing-xhtml-documents). Correct?

Just to translate from HTML5 speak into my own words. I’ve got ...

<link rel="stylesheet" href="...">
<script src="..."></script>

... and I would like to step through the parsing algorithm. This is my
understanding so far:

1. Run the script (#parsing-main-incdata, case “An end tag whose tag
name is "script"”)
2. Jump to #running-a-script
3. Fetch the external script (step 7)
4. We’ve reached step 8 which you’ve mentioned above. I assume the
fourth case is true (“If the element has a src attribute”), since the
script is not “parser-inserted”.
6. Once the script fetching is complete, execute the script block
(“The task that the networking task source places on the task queue once
the fetching algorithm has completed must execute the script block.”)
7. Jump to #executing-a-script-block
8. If the load was successful, initialize it (step 1)
9. “Pause until either any applicable style sheets have been fetched and
applied, or the user agent has timed out and decided to not wait for
those style sheets.” (step 2)

--> I guess *this* is where the waiting happens, right?

10. Execute the script (“Create a script from the script element node”)
11. Jump back to #parsing-main-incdata
12. „if there is a pending parsing-blocking script“ -- I guess there is
none. So we’re done here.


The handling of inline scripts is somewhat easier:

1. Run the script (#parsing-main-incdata, case “An end tag whose tag
name is "script"”)
2. Jump to #running-a-script
3. Step 8, Case 5 “Otherwise” (“The user agent must immediately execute
the script block”
4. Jump to #executing-a-script-block
5. “If the load was successful”
6. Step 1, Initialize, “If the script is inline and the script block’s
type is a text-based language”: Set text attribute
7. Step 2: “Pause until either any applicable style sheets have been
fetched and applied, or the user agent has timed out and decided to not
wait for those style sheets.”
8. Step 3, execute the script

That means, inline script execution should also wait for stylesheets to
load. Am I right in this reading?


Thanks,
Mathias