[whatwg] defer on style, depends

[Garrett Smith]

On Sun, Feb 8, 2009 at 9:20 PM, Ian Hickson <ian at hixie.ch> wrote:
> On Sun, 8 Feb 2009, Garrett Smith wrote:
>>
>> Sometimes a document's resources are not needed all at first. For
>> example, a script that is not needed until after the document is parsed
>> can be given the defer attribute (for browsers that support defer).
>>
>> External css can also be a blocking download. Scripts have defer
>> attribute, but style and link do not.
>>
>> The proposal is to add to defer to style, and link.
>>
>> This will allow browsers to not block on those elements.
>
> Browsers are already allowed to not block on those elements.
>

But they do.

If a script occurs after a link, the script expects updated style
information. That is why browsers do block on scripts.

http://dhtmlkitchen.com/jstest/block/link.html

Includes a linked stylesheet that is delayed by 5 seconds.

Results:
contentLoaded: ~5101
onloadFired: ~5101

That result shows that I am correct on this matter.

>
>> It would be more complete to have a depends attribute on script and style.
>>
>> <script depends="a b c"></script>
>>
>> Where the depends is id-list [CS], space separated values of element IDs.
>
> Why can't you just put the <script> element below the elements whose IDs
> you would have listed?
>

An associated script might need that stylesheet to be loaded before it
runs. The depends attribute would guarantee that the stylesheet had
loaded. The order should not change because the script is an inline
scripts vs an external resource.

A deferred stylesheet could be used to load a stylesheet after content
was parsed. The developer would use defer when FOUC would be known not
to occur as a result. For example, defer would be useful for an
infoPanel widget that did not get shown until a certain event. The
widget's HTML exists in the source code, towards the bottom, the
script appears below that, just before the closing </body> tag.

There is a second problem: The problem of scripts being blocked by a stylesheet.

The "depends=" attribute allows the script to declare that it needs
style information first. This would be a much better design, and could
probably be implemented by the browser with some nice event-driven
code. Unfortunately, implementations that encounter <link defer
type="text/css"...>, followed by a script with no "depends" would
still have to block on that stylesheet because that is what they do
today.

The script could declare itself as "independent".

That would result in links not blocking.

To allow the stylesheet to load after all content loads, the
stylesheet could declare defer:

<link defer src="deferred-all-min.css" type="text/css"
rel="stylesheet" id="lateBoundCSS">

To fulfill a requirement of having loaded of the stylesheet before the
script runs, that script could declare depends to declare that it
needs style information before loading.

<script defer depends="lateBoundCSS" src="app-all-min.js"></script>

>
>> It would also be useful to have a way to dynamically load scripts, other
>> than createElement("script").
>
> This seems like a request for the ECMAScript group.
>

Maybe. I would probably not be able to use it before I retire.

It could also be a DOM document method.

var script = document.createScript(src);
script.load();
script.run();
script.unload();

A script belongs to a document. ECMAScript has no notion of document.
Scripts loaded through this mechanism would ignore document.write.

Applications could see a performance boost if developers could
leverage such features.

Garrett

> Cheers,
> --
> Ian Hickson               U+1047E                )\._.,--....,'``.    fL
> http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
> Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'
>