The way I handle performance in my app is with requestAnimationFrame.
Stash an array of your data providers and add them i.e. 20 at a time:
private function handleScrollEnd():void{
for(var i:int=0;i<20;i++){
if(pendingTags.length){
// shift the first item and add it to
tags
tags.addItem(pendingTags.shift());
} else {
break;
}
}
tagsList.dataProvider = tags;
if(pendingTags.length){
requestAnimationFrame(handleScrollEnd);
}
}
This makes things very snappy.
Another thing to look out for in terms of performance: Don’t create any
unnecessary SVG elements (especially) in your itemRenderers. They are huge
performance killers.
Somewhat related:
I recently learned about IntersectionObservers and it’s greatly improved my
infinite scrolling code:
private var gridObserver:Object;
private var observedItem:DataItemRenderer;
private function observeGridItem(lastIndex:int):void{
if(!gridObserver){
gridObserver = new
window["IntersectionObserver"](handleGridItemIntersection, {
root: view.images.element,
rootMargin: "0px",
threshold: 0.1
});
}
unobserveGridItem();
var dataContainerView:DataContainerView =
prefUtils.treeLayout ? view.imageTree.view as DataContainerView :
view.imageGrid.view as DataContainerView;
observedItem =
(dataContainerView).getItemRendererAt(lastIndex) as DataItemRenderer;
if(observedItem && observedItem.element){
gridObserver.observe(observedItem.element);
}
}
private function unobserveGridItem():void{
if(!observedItem){
return;
}
if(!gridObserver){
return;
}
gridObserver.unobserve(observedItem.element);
observedItem = null;
}
private function handleGridItemIntersection(entries:Array):void{
if(!entries.length){
return;
}
var entry:Object = entries[0];
if(entry.isIntersecting){
unobserveGridItem();
handleScrollEnd();
}
}
In this class, handleScrollEnd makes a request for more data.
When I have time, I should really create beads for both of these patterns...
> On Apr 26, 2023, at 11:19 AM, Hugo Ferreira <[email protected]> wrote:
>
> Hi,
>
> File sent.
>
> Thanks for trying to improve virtualdatagrid.
> It is far from perfect but for those who want to use it for an application
> with a lot of data, for now it is the solution (or use pagination).
>
> Regards,
> Hugo.
>
> <[email protected] <mailto:[email protected]>> escreveu no dia
> quarta, 26/04/2023 à(s) 07:37:
> Hi Hugo,
>
> Thank a lot for your reply and sharing.
> I don't know if it's an issue with my webmail, I don't have an attachment.
> Could you send it directly on my email ? (contact at cristallium.com
> <http://cristallium.com/> )
> I will try with latest build from source to have some of your fix and study
> your DataGrid.as
> I will keep you in touch if I can do more improvements
> Regards
> Fred
>
> Le 2023-04-25 23:51, Hugo Ferreira a écrit :
>
>> Hi,
>>
>> DataGrid does not work good with a lot of data (as you saw).
>> You can use pagination (the users hate this approach and it's not very
>> mobile friendly but it's technically a simple way to solve this problem) or
>> you can render on the screen only what is visible (the users love this
>> approach, it's mobile friendly but technically it's hard).
>> Think about a game with 1000 players on the screen that you hide what is not
>> visible at a specific moment.
>>
>> VirtualDataGrid have this goal however there are many chalenges to be usable.
>> I saw in action several issues, I was able to find what I fix the majority
>> of them and push to Royale github (I recomend compile from the lastest
>> source), I was able to fix 2 other problems in a ugly way and for that
>> reason I have an extension of the VirtualDataGrid on my libraries (as soon I
>> find better approach, I will exchange this local patches to Royale).
>> You can find in attachment my DataGrid.as that extends from Royale
>> VirtualDataGrid.as
>> The 2 issues are commented in English (sorry for my bad English), so it's
>> easy to understand the issues and what the pach does.
>>
>> I also recomend to create ItemRenderes to all your needs where you can have
>> 2 states: reading and editing, exchaning from a Label to a TextInput for
>> example.
>>
>> About your issue, I kwnow it and for now it's the only major issue with
>> VirtualDataGrid that I'm aware and I was not able to find iet a stable fix,
>> however I found a more or less workaround (you can find it on my
>> DataGrid.as).
>> I have created a bead DataGridScrollSpeed that I'm using on my DataGrid.as
>> This slow a bit the scroll and the issue reduces for almost of the time
>> unless you force several times.
>> You can decrease even more the speed and reduce 99% the issue.
>> It's not the correct fix but I was not able to find out a better approach.
>> If someone can fix this for good, great !
>>
>> Regards,
>> Hugo.
>>
>> <[email protected] <mailto:[email protected]>> escreveu no dia
>> terça, 25/04/2023 à(s) 18:46:
>> Hi All,
>>
>> I'm on a dev using Apache Royale with Jewel DataGrid tryng to show about
>> 500 rows.
>>
>> But I have an issue when I set dataprovider : the application is hanging
>> about 20 seconds... Then I saw that there is a VirtualDataGrid.
>>
>> Using it is very fast. But there is an issue with vertical scrollbar :
>> when using it from bottom to upper, it's working right, but from upper
>> to bottom the thumb goes away (on Chrome). The issue is visible on Tour
>> de Jewel :
>>
>> https://royale.apache.org/tourdejewel/#!virtual_lists_panel
>> <https://royale.apache.org/tourdejewel/#!virtual_lists_panel>
>>
>> (it's working is scrolling slow, but if I move down a little fast, then
>> the thumb go away from mouse and go immediatly to the end at bottom of
>> list)
>>
>> On Firefox : there is one scrollbar but when can't reach the end of list
>> and on chrome there are 2 scrollbars, we can reach end of list but there
>> is an issue on using scrollbar from top to bottom
>>
>> I saw a fix by Hugo, so I wanted to download last build on :
>>
>> http://apacheroyaleci2.westus2.cloudapp.azure.com:8080/job/royale-asjs_jsonly/lastSuccessfulBuild/artifact/out/
>>
>> <http://apacheroyaleci2.westus2.cloudapp.azure.com:8080/job/royale-asjs_jsonly/lastSuccessfulBuild/artifact/out/>
>>
>> Unfortunaly it's dead. Is there a way to download last build on other
>> link ?
>>
>> Regards
>>
>> nb : I'm using sdk 0.9.10
>
> --
> Frédéric Gilli
> mob.0668542622
> http://www.cristallium.com <http://www.cristallium.com/>
> <http://www.cristallium.com/>
>
