[whatwg] defer on style, depends
dhtmlkitchen at gmail.com
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.
>> 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
<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:
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
>> 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
> 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.
More information about the whatwg