[whatwg] defer on style, depends

Sat Feb 14 21:12:22 PST 2009

On Thu, Feb 12, 2009 at 8:41 AM, Boris Zbarsky <bzbarsky at mit.edu> wrote:
> Garrett Smith wrote:
>>>

>
>> In Shiretoko, a script, even a deferred script, will not run until the
>> stylesheet is loaded.
>
> Correct.
>
>> Can we make an improvement on that, or to make that improvement
>> configurable to the page author?
>
> I think we can, sure.  In fact I'm proposing flagging scripts that don't
> depend on stylesheets, no?
>

I agree, and am optimistic that improvements can be made.

Defer is not widely implemented. Opera and Webkit today will run a
script before a stylesheet loads. Allowing the author to provide
information about what a script depends on (or doesn't) would not
break functionality in those cases (where such functionality is
already "broken").

<script depends="" ...

when depends is empty string, the script depends on nothing else.

>>> Ah, that is one thing that Gecko does do: we don't start _layout_ (as
>>> opposed to parsing) until all the stylesheets in <head> have loaded.
>>
>> For Firefox 3.0, IMG and SCRIPT that are part of the body are fetched
>> around this time. They are not fetched prior. Why not?
>
> Because you have <script>s after your stylesheets, not just stylesheets.
>  Really, controlled experiments are hard.  You have to hold all but one
> variable constant.
>

OK, I modified the example:

http://localhost/jstest/block/link-img-noscript.html

The bottom script will not load ('load' as opposed to 'run') in
Firefox/3.0.6 until after 5 seconds.

+-------------------------+-------------------------------+
| req                     | HTTP date                     |
+-------------------------+-------------------------------+
| link-img-noscript.html  | Sun, 15 Feb 2009 05:08:52 GMT |
| rgmetal.jpg             | Sun, 15 Feb 2009 05:08:52 GMT |
| delay.jsp?ct=text...    | Sun, 15 Feb 2009 05:08:52 GMT
 |
| example.js              | Sun, 15 Feb 2009 05:08:57 GMT |
+-------------------------+-------------------------------+
(table to be viewed in a monospace font)

The result shows that example.js loads 5 seconds after the initial
page load. example.js waits for the stylesheet to load.
Not the case in 3.1; what you are arguing is true there.

>> In that case, the link would not block layout.
>
> Yes, which is why you get a performance hit when it loads.  But I thought we
> were talking about stylesheets that don't "really" affect layout
> (late-loading stylesheets, which you wanted).
>

Late-loading stylesheets would improve load time.

My concern is with the recomputation you mentioned. Can you elaborate
on that, or point me to a webpage that explains it?

>> In "Shiretoko" 1.9.1b3pre, a deferred script waits for all stylesheets
>> to load before running. However, this is not guaranteed behavior in
>> any standard.
>
> True.  At least not yet.  I suspect it's pretty much required for web
> compat, though, which is why it's implemented that way.  Or at the very
> least the scripts need to wait for the stylesheets that came before them.
>

I would disagree with that on the basis that defer is not widely supported.

Question: What does IE do?

>>>> Question: When the stylesheet is eventually applied, could the reflow
>>>> be optimized for performance?
>>>
>>> Not easily, no.  Or rather, the reflow already is; the style data
>>> recomputation is the hard part.
>>
>> What would make it easier? I'd really like to know how to design my
>> pages so that they are faster and more responsive.
>
> Well, one option is to stop worrying about micromanaging the load order and
> assume that speculative parsing will solve your problems.... will it?
>

Possibly. If the author could declare what a script depends on and let
the implementation determine what to load and when, would that be too
complicated?

>> A deferred stylesheet being requested by the browser would not be a
>> problem. Mozilla already makes predictive fetches for links. However,
>> if a deferred stylesheet is fetched during loading, should that
>> stylesheet (and rules.length, etc) be accessible via script in that
>> time? Should the deferred link fire a load event after the request
>> completes?
>
> In my opinion, prefetching should have no effect on what the DOM sees. It
> should just make it look like the network load took a lot less time than it
> would otherwise.
>
> In other words, you load the stylesheet, parse it, whatever, but don't hook
> it up to the document until you "really" parse the <link> tag.
>

That makes sense.

> -Boris
>

Garrett