>
> "*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.

Reply via email to