I'll do some homework a= nd come up again with more questions.

On Thursday, September 27,= 2012 5:55:30 PM UTC+5:30, PhistucK wrote:

External scripts and s= tyle sheets are blocking the HTML rendering until they are downloaded, pars= ed and executed.

<= font color=3D"#000000">So, adding the async=3D"async" (or maybe def= er=3D"defer" can also help, I forget) attribute to external scripts = should make them not block the rendering.

<script src= =3D"..." async=3D"async"></script>
External style sheets must be added dynamically (using JavaScript= ) in order not to block rendering, or must be declared below the content (t= he 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 u= ntil 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&= gt; (and such), which is a blank sheet when it does not have any other cont= ent.

=E2=98=86PhistucK

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&= nbsp;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 downloade= d (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, arti= cle etc regarding how can we trick the browser to start displaying page eve= n if full content (the html itself, css, scripts etc.) are not downloaded c= ompletely?

Thanks in advance.

On= Wednesday, September 26, 2012 11:57:37 PM UTC+5:= 30, PhistucK wrote:

The browser starts building the DOM tree before it fi= nishes 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 loade= d, 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)

=E2=98=86PhistucK

On Wed, Sep 26, 20= 12 at 8:15 PM, Samar <sama...@gmail.com>= wrote:
My understanding is that after DOM tree is constructed, page starts renderi= ng and painting, but in timeline panel I can see paint events before DOM re= ady events. How is that possible?