Re: [Chrome DevTools] Paint event before DOM Ready

PhistucK

unread,

Sep 26, 2012, 2:26:56 PM9/26/12

to Samar, google-chrome-...@googlegroups.com

The browser starts building the DOM tree before it finishes loading the whole page (I am talking about the HTML code alone, not the images/resources) and also starts showing.

I mean, you sometimes see "half pages" before they are completely loaded, this means the DOM tree is being constructed as it loads, not only when it is completely loaded.

(Which explains the pre ready paint events)

☆PhistucK

On Wed, Sep 26, 2012 at 8:15 PM, Samar <sama...@gmail.com> wrote:

My understanding is that after DOM tree is constructed, page starts rendering and painting, but in timeline panel I can see paint events before DOM ready events. How is that possible?

PhistucK

unread,

Sep 27, 2012, 8:24:49 AM9/27/12

to Samar, google-chrome-...@googlegroups.com

External scripts and style sheets are blocking the HTML rendering until they are downloaded, parsed and executed.

So, adding the async="async" (or maybe defer="defer" can also help, I forget) attribute to external scripts should make them not block the rendering.

External style sheets must be added dynamically (using JavaScript) in order not to block rendering, or must be declared below the content (the content that you want to show before everything is loaded).

Note that you better have some (basic) inline CSS in the page, or else everything will show up completely not formatted until the CSS shows us, which may be really not nice for the user experience.

I would guess the first paint is there because the browser parses <html> (and such), which is a blank sheet when it does not have any other content.

☆PhistucK

On Wed, Sep 26, 2012 at 9:15 PM, Samar <sama...@gmail.com> wrote:

I also see a paint event in timeline panel which highlights (on hover) all the visible area of webpage. This event is triggered at 1ms, the very beginning. Why a paint event is required if no data has been downloaded (Browser has not received any data in just 1ms)

On Wed, Sep 26, 2012 at 9:01 PM, Samar <sama...@gmail.com> wrote:

Thanks for the explanation. I got it.

I want the browser to start displaying my page (may be just the first screen of the full page) as early as possible. Can you point me to some guidelines, article etc regarding how can we trick the browser to start displaying page even if full content (the html itself, css, scripts etc.) are not downloaded completely?

Thanks in advance.

Samar

unread,

Sep 28, 2012, 3:06:18 PM9/28/12

to google-chrome-...@googlegroups.com, Samar

Thanks,

That was helpful.

I'll do some homework and come up again with more questions.

Reply all

Reply to author

Forward