Yes, but in this case the element has to be attached to get the correct
size, right? So he can't detach-loop-reattach if sizes are important while
looping. Or two loops are necessary?
btw , here is a list of reflow
triggers: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
2016. július 5., kedd 19:20:36 UTC+2 időpontban Paul Stockley a következőt
írta:
>
> If you make any calls that retrieve the size of an element then this will
> cause a re-flow even within a javascript block.
>
> On Tuesday, July 5, 2016 at 12:36:38 PM UTC-4, fenyoapa wrote:
>>
>> "*This causes the browser to recalculate and repaint the page each time
>>> you append a single search item to the DOM*"
>>
>>
>>
>> I think this is true only if he uses some async method that allow the
>> browser to repaint. If not, then the repaint occures only once, when the
>> search results loop finished
>>
>> 2016. július 5., kedd 17:53:26 UTC+2 időpontban Jens a következőt írta:
>>>
>>> I wouldn't call them heavy but I would not use a widget in cases I don't
>>> need events, e.g. taking a UiBinder example:
>>>
>>> <g:FlowPanel>
>>> <g:FlowPanel addStyleName="{style.container}">
>>> <g:FlowPanel addStyleName="{style.left}">
>>> <g:Label ui:field="....">click me 1</g:Label>
>>> <g:Label ui:field="....">click me 2</g:Label>
>>> </g:FlowPanel>
>>> <g:FlowPanel addStyleName="{style.right}">
>>> <g:Label ui:field="....">click me 1</g:Label>
>>> <g:Label ui:field="....">click me 2</g:Label>
>>> </g:FlowPanel>
>>> </g:FlowPanel>
>>> </g:FlowPanel>
>>>
>>> In the above you are only interested in events for your labels and all
>>> the FlowPanels do not provide real value. IF you are familiar with HTML and
>>> CSS then you could use
>>>
>>> <g:HTMLPanel>
>>> <div class="{style.container}">
>>> <div class="{style.left}">
>>> <g:Label ui:field="....">click me 1</g:Label>
>>> <g:Label ui:field="....">click me 2</g:Label>
>>> </div>
>>> <div class="{style.right}">
>>> <g:Label ui:field="....">click me 1</g:Label>
>>> <g:Label ui:field="....">click me 2</g:Label>
>>> </div>
>>> </div>
>>> </g:HTMLPanel>
>>>
>>> The above uses less DOM operations to build the UI and needs less memory
>>> because there are fewer JavaScript objects pointing to DOM elements (= less
>>> GWT widgets).
>>>
>>> Some side notes:
>>>
>>> - When you build a large list of widgets as in your search result,
>>> then do not append all the search result entries to a container in a
>>> for-loop if that container is already attached to the DOM. This causes
>>> the
>>> browser to recalculate and repaint the page each time you append a
>>> single
>>> search item to the DOM. Instead detach the container, fill it with the
>>> search results and then attach it again (or create a new container and
>>> replace the old one).
>>> - Use pagination
>>> - If you can't use pagination for any reason, consider only render
>>> the items that are visible. If you have 1000 search results but only 20
>>> are
>>> visible in the scroll panel, then only render 40 or so and render
>>> additional entries when the user scrolls to them.
>>> - Only show the top 20 search results and add a "show more" button
>>> or let users redefine their search until their desired result is in the
>>> top
>>> 20.
>>>
>>>
>>> Basically if your list is so long that it starts to get slow then you
>>> most likely have a general usability/UI problem because nobody will scroll
>>> through such long lists anyways.
>>>
>>> -- J.
>>>
>>
--
You received this message because you are subscribed to the Google Groups "GWT
Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.
