Re: Layout optimizations

[Harbs]

RoyaleStore seems to be a decent example for this. The combined rendering time 
is about a half-second. Of that, about 225 ms is being run in a CallLaterBead 
which has some forced reflows.

I ran the demo once compiled without the optimizations and a second time with 
the optimizations and here’s the results:

https://www.dropbox.com/s/ylovszfavur5rrd/profile_before?dl=0

https://www.dropbox.com/s/cb4gm8dhno3dlrf/profile_after?dl=0

In short, there are two parts to the layout. First a simple layout happens and 
then another layout occurs in a CallLaterBead.

In the unoptimized version:

The first rendering takes 236 ms
The CallLaterBead takes 225 ms

In the optimized version:
The first rendering takes 213.5 ms and the layout takes 17.5 ms. (Total 241 ms 
as opposed to 236 ms in the unoptimized version)
The second rendering takes 118 ms and the layout takes 14.6 ms. (Total 132.6 ms 
as opposed to 225 ms in the unoptimized version)

It would require multiple runs to determine if the difference in the first 
rendering is due to variances or there’s extra overhead, but the second 
rendering clearly benefits from the optimization. The deeper the nesting of 
this kind of layout, the more layout thrashing there will be and the greater 
the benefit.

My case which has an every greater benefit (I think) is a List with an 
ItemRenderer with a structure like this:

<js:DataItemRenderer>
        <js:Container initComplete="container1_initCompleteHandler(event)">
                <js:beads>
                        <js:VerticalLayoutWithPaddingAndGap paddingTop="3" 
paddingBottom="3" paddingLeft="3" paddingRight="3"/>
                </js:beads>     
                <js:HContainer id="imageContainer">
                        <html:Div id="iconContainer" width="50" height="50"> 
                                <js:BinaryImage id="icon" 
style="max-width:100%;max-height:100%;"
                                                                
className="iconImage"/>
                        </html:Div>
                        <html:Div>
                                <mdl:Button icon="true" 
id="pui_page_palette_editButton" click="textbutton1_clickHandler(event)">
                                        <mdl:materialIcon>
                                                <mdl:MaterialIcon 
text="more_vert"/>
                                        </mdl:materialIcon>
                                </mdl:Button>
                        </html:Div>
                </js:HContainer>
                <js:Label id="spreadLabel" height="20" width="50"
                                  className="spreadIconLabelNormal"/>
        </js:Container>
</js:DataItemRenderer>

> On Mar 25, 2018, at 11:59 AM, Harbs <harbs.li...@gmail.com> wrote:
> 
> I’m going to take one of the Royale examples and use that to address these 
> points. That will give us a concrete point of reference for discussion.
>