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.
