You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by DarkStone <da...@163.com> on 2014/11/29 22:04:37 UTC

Re:Re: Scroller optimization

Hi after24,


I've tried doing the scrolling optimization by using BitmapData.copyPixels() as you described, and I have also tried cacheAsBitmap, the result is, the performance between both are the same!
So there is no need to modify Scroller.as anymore, the cacheAsBitmap can easily do the same thing.


Here is the sample code for how to use cacheAsBitmap to improve the scrolling performance:
<s:Scroller width="100%" height="100%">
    <s:Group>
        <s:DataGroup id="realContent" touchInteractionStart="realContent.mouseChildren=false;realContent.cacheAsBitmap=true;" touchInteractionEnd="realContent.mouseChildren=true;realContent.cacheAsBitmap=false;" itemRenderer="com.test.renderers.MyItemRenderer" dataProvider="{someData}" width="100%">
            <s:layout>
                <s:VerticalLayout useVirtualLayout="false"/>
            </s:layout>
        </s:DataGroup>
    </s:Group>
</s:Scroller>
The essential elements are:
1. You have to put a Group inside the Scroller, then put the real content (<s:DataGroup id="realContent">) inside that Group.
2. The layout of the realContent, you have to set its useVirtualLayout to false (the default value is false).
3. Listen for the realContent's touchInteractionStart and touchInteractionEnd event:
When touchInteractionStart, disable any mouse and touch interactions of the realContent's mouseChildren by setting realContent.mouseChildren = false, then turn on the cache for realContent by setting realContent.cacheAsBitmap = true.
When touchInteractionEnd, reverse the changes you made for the realContent.
That's it! It's very easy to improve the scrolling performance by doing so. It's the same scrolling performance result when compared to the BitmapData.copyPixels() approach, yet cacheAsBitmap is much easier to understand and handle, so we don't have to do the modify the Scroller.as any more, the cacheAsBitmap approach is the best way to improve the scrolling performance now!
If you not believe me, test it yourself : )


DarkStone
2014-11-30



At 2014-10-29 18:56:09, "after24" <vi...@after24.net> wrote:
>Hi Jude,
>
>/*have you tried setting include in layout to false when setting visible to
>false?*/
>
>Yes, this property is set to false during scroll operations.
>
>It seems that this performance decrease is caused by scout... when scout is
>off, there is no difference between the two approaches (visible = false or
>removeElement).
>
>So it looks like this optimization is viable :-)
>
>I am a bit busy this week but I will add a ticket on the JIRA with a sample
>application as soon as possible.
>
>Thank you. 
>
>
>
>--
>View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Scroller-optimization-tp41774p41910.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: Scroller optimization

Posted by DarkStone <Da...@163.com>.
Hi,

Well, I think maybe it worth an official blog post, teaching developers how to improve the touch scrolling performance as the example I provided.

But I don't think it worth a patch right now, giving it's a little technique for how to use cacheAsBitmap wisely.

Sent from DarkStone's iPhone
2014-12-02

> 在 2014年12月2日，7:32，OmPrakash Muppirala <bi...@gmail.com> 写道：
> 
> Agreed!
> 
> After24/Darkstone, any chance you submit a patch to the Flex SDK?  I can
> help you out with things if you need.
> 
> Thanks,
> Om
> 
>> On Mon, Dec 1, 2014 at 10:46 AM, Harbs <ha...@gmail.com> wrote:
>> 
>> I was thinking the same thing.
>> 
>> Maybe incorporating this into some mobile skins?
>> 
>>> On Dec 1, 2014, at 3:01 PM, Erik de Bruin <er...@ixsoftware.nl> wrote:
>>> 
>>> Is there a way to bring this solution into the SDK and make it the
>>> default behavior on mobile? Maybe register these event handlers upon
>>> creation, dependant on Capabilities or some such?
>>> 
>>> It would sure be a nice addition to the next release ...
>>> 
>>> EdB
>>> 
>>> 
>>> 
>>>> On Mon, Dec 1, 2014 at 12:26 PM, jude <fl...@gmail.com> wrote:
>>>> This is great!
>>>> 
>>>>> On Sat, Nov 29, 2014 at 1:04 PM, DarkStone <da...@163.com> wrote:
>>>>> 
>>>>> Hi after24,
>>>>> 
>>>>> 
>>>>> I've tried doing the scrolling optimization by using
>>>>> BitmapData.copyPixels() as you described, and I have also tried
>>>>> cacheAsBitmap, the result is, the performance between both are the
>> same!
>>>>> So there is no need to modify Scroller.as anymore, the cacheAsBitmap
>> can
>>>>> easily do the same thing.
>>>>> 
>>>>> 
>>>>> Here is the sample code for how to use cacheAsBitmap to improve the
>>>>> scrolling performance:
>>>>> <s:Scroller width="100%" height="100%">
>>>>>   <s:Group>
>>>>>       <s:DataGroup id="realContent"
>> touchInteractionStart="realContent.mouseChildren=false;realContent.cacheAsBitmap=true;"
>> touchInteractionEnd="realContent.mouseChildren=true;realContent.cacheAsBitmap=false;"
>>>>> itemRenderer="com.test.renderers.MyItemRenderer"
>> dataProvider="{someData}"
>>>>> width="100%">
>>>>>           <s:layout>
>>>>>               <s:VerticalLayout useVirtualLayout="false"/>
>>>>>           </s:layout>
>>>>>       </s:DataGroup>
>>>>>   </s:Group>
>>>>> </s:Scroller>
>>>>> The essential elements are:
>>>>> 1. You have to put a Group inside the Scroller, then put the real
>> content
>>>>> (<s:DataGroup id="realContent">) inside that Group.
>>>>> 2. The layout of the realContent, you have to set its useVirtualLayout
>> to
>>>>> false (the default value is false).
>>>>> 3. Listen for the realContent's touchInteractionStart and
>>>>> touchInteractionEnd event:
>>>>> When touchInteractionStart, disable any mouse and touch interactions of
>>>>> the realContent's mouseChildren by setting realContent.mouseChildren =
>>>>> false, then turn on the cache for realContent by setting
>>>>> realContent.cacheAsBitmap = true.
>>>>> When touchInteractionEnd, reverse the changes you made for the
>> realContent.
>>>>> That's it! It's very easy to improve the scrolling performance by doing
>>>>> so. It's the same scrolling performance result when compared to the
>>>>> BitmapData.copyPixels() approach, yet cacheAsBitmap is much easier to
>>>>> understand and handle, so we don't have to do the modify the
>> Scroller.as
>>>>> any more, the cacheAsBitmap approach is the best way to improve the
>>>>> scrolling performance now!
>>>>> If you not believe me, test it yourself : )
>>>>> 
>>>>> 
>>>>> DarkStone
>>>>> 2014-11-30
>>>>> 
>>>>> 
>>>>> 
>>>>> At 2014-10-29 18:56:09, "after24" <vi...@after24.net> wrote:
>>>>>> Hi Jude,
>>>>>> 
>>>>>> /*have you tried setting include in layout to false when setting
>> visible
>>>>> to
>>>>>> false?*/
>>>>>> 
>>>>>> Yes, this property is set to false during scroll operations.
>>>>>> 
>>>>>> It seems that this performance decrease is caused by scout... when
>> scout
>>>>> is
>>>>>> off, there is no difference between the two approaches (visible =
>> false or
>>>>>> removeElement).
>>>>>> 
>>>>>> So it looks like this optimization is viable :-)
>>>>>> 
>>>>>> I am a bit busy this week but I will add a ticket on the JIRA with a
>>>>> sample
>>>>>> application as soon as possible.
>>>>>> 
>>>>>> Thank you.
>>>>>> 
>>>>>> 
>>>>>> 
>>>>>> --
>>>>>> View this message in context:
>> http://apache-flex-development.2333347.n4.nabble.com/Scroller-optimization-tp41774p41910.html
>>>>>> Sent from the Apache Flex Development mailing list archive at
>> Nabble.com.
>>> 
>>> 
>>> 
>>> --
>>> Ix Multimedia Software
>>> 
>>> Jan Luykenstraat 27
>>> 3521 VB Utrecht
>>> 
>>> T. 06-51952295
>>> I. www.ixsoftware.nl
>

Re: Scroller optimization

Posted by OmPrakash Muppirala <bi...@gmail.com>.
Agreed!

After24/Darkstone, any chance you submit a patch to the Flex SDK?  I can
help you out with things if you need.

Thanks,
Om

On Mon, Dec 1, 2014 at 10:46 AM, Harbs <ha...@gmail.com> wrote:

> I was thinking the same thing.
>
> Maybe incorporating this into some mobile skins?
>
> On Dec 1, 2014, at 3:01 PM, Erik de Bruin <er...@ixsoftware.nl> wrote:
>
> > Is there a way to bring this solution into the SDK and make it the
> > default behavior on mobile? Maybe register these event handlers upon
> > creation, dependant on Capabilities or some such?
> >
> > It would sure be a nice addition to the next release ...
> >
> > EdB
> >
> >
> >
> > On Mon, Dec 1, 2014 at 12:26 PM, jude <fl...@gmail.com> wrote:
> >> This is great!
> >>
> >> On Sat, Nov 29, 2014 at 1:04 PM, DarkStone <da...@163.com> wrote:
> >>
> >>> Hi after24,
> >>>
> >>>
> >>> I've tried doing the scrolling optimization by using
> >>> BitmapData.copyPixels() as you described, and I have also tried
> >>> cacheAsBitmap, the result is, the performance between both are the
> same!
> >>> So there is no need to modify Scroller.as anymore, the cacheAsBitmap
> can
> >>> easily do the same thing.
> >>>
> >>>
> >>> Here is the sample code for how to use cacheAsBitmap to improve the
> >>> scrolling performance:
> >>> <s:Scroller width="100%" height="100%">
> >>>    <s:Group>
> >>>        <s:DataGroup id="realContent"
> >>>
> touchInteractionStart="realContent.mouseChildren=false;realContent.cacheAsBitmap=true;"
> >>>
> touchInteractionEnd="realContent.mouseChildren=true;realContent.cacheAsBitmap=false;"
> >>> itemRenderer="com.test.renderers.MyItemRenderer"
> dataProvider="{someData}"
> >>> width="100%">
> >>>            <s:layout>
> >>>                <s:VerticalLayout useVirtualLayout="false"/>
> >>>            </s:layout>
> >>>        </s:DataGroup>
> >>>    </s:Group>
> >>> </s:Scroller>
> >>> The essential elements are:
> >>> 1. You have to put a Group inside the Scroller, then put the real
> content
> >>> (<s:DataGroup id="realContent">) inside that Group.
> >>> 2. The layout of the realContent, you have to set its useVirtualLayout
> to
> >>> false (the default value is false).
> >>> 3. Listen for the realContent's touchInteractionStart and
> >>> touchInteractionEnd event:
> >>> When touchInteractionStart, disable any mouse and touch interactions of
> >>> the realContent's mouseChildren by setting realContent.mouseChildren =
> >>> false, then turn on the cache for realContent by setting
> >>> realContent.cacheAsBitmap = true.
> >>> When touchInteractionEnd, reverse the changes you made for the
> realContent.
> >>> That's it! It's very easy to improve the scrolling performance by doing
> >>> so. It's the same scrolling performance result when compared to the
> >>> BitmapData.copyPixels() approach, yet cacheAsBitmap is much easier to
> >>> understand and handle, so we don't have to do the modify the
> Scroller.as
> >>> any more, the cacheAsBitmap approach is the best way to improve the
> >>> scrolling performance now!
> >>> If you not believe me, test it yourself : )
> >>>
> >>>
> >>> DarkStone
> >>> 2014-11-30
> >>>
> >>>
> >>>
> >>> At 2014-10-29 18:56:09, "after24" <vi...@after24.net> wrote:
> >>>> Hi Jude,
> >>>>
> >>>> /*have you tried setting include in layout to false when setting
> visible
> >>> to
> >>>> false?*/
> >>>>
> >>>> Yes, this property is set to false during scroll operations.
> >>>>
> >>>> It seems that this performance decrease is caused by scout... when
> scout
> >>> is
> >>>> off, there is no difference between the two approaches (visible =
> false or
> >>>> removeElement).
> >>>>
> >>>> So it looks like this optimization is viable :-)
> >>>>
> >>>> I am a bit busy this week but I will add a ticket on the JIRA with a
> >>> sample
> >>>> application as soon as possible.
> >>>>
> >>>> Thank you.
> >>>>
> >>>>
> >>>>
> >>>> --
> >>>> View this message in context:
> >>>
> http://apache-flex-development.2333347.n4.nabble.com/Scroller-optimization-tp41774p41910.html
> >>>> Sent from the Apache Flex Development mailing list archive at
> Nabble.com.
> >>>
> >
> >
> >
> > --
> > Ix Multimedia Software
> >
> > Jan Luykenstraat 27
> > 3521 VB Utrecht
> >
> > T. 06-51952295
> > I. www.ixsoftware.nl
>
>

Re: Scroller optimization

Posted by Harbs <ha...@gmail.com>.
I was thinking the same thing.

Maybe incorporating this into some mobile skins?

On Dec 1, 2014, at 3:01 PM, Erik de Bruin <er...@ixsoftware.nl> wrote:

> Is there a way to bring this solution into the SDK and make it the
> default behavior on mobile? Maybe register these event handlers upon
> creation, dependant on Capabilities or some such?
> 
> It would sure be a nice addition to the next release ...
> 
> EdB
> 
> 
> 
> On Mon, Dec 1, 2014 at 12:26 PM, jude <fl...@gmail.com> wrote:
>> This is great!
>> 
>> On Sat, Nov 29, 2014 at 1:04 PM, DarkStone <da...@163.com> wrote:
>> 
>>> Hi after24,
>>> 
>>> 
>>> I've tried doing the scrolling optimization by using
>>> BitmapData.copyPixels() as you described, and I have also tried
>>> cacheAsBitmap, the result is, the performance between both are the same!
>>> So there is no need to modify Scroller.as anymore, the cacheAsBitmap can
>>> easily do the same thing.
>>> 
>>> 
>>> Here is the sample code for how to use cacheAsBitmap to improve the
>>> scrolling performance:
>>> <s:Scroller width="100%" height="100%">
>>>    <s:Group>
>>>        <s:DataGroup id="realContent"
>>> touchInteractionStart="realContent.mouseChildren=false;realContent.cacheAsBitmap=true;"
>>> touchInteractionEnd="realContent.mouseChildren=true;realContent.cacheAsBitmap=false;"
>>> itemRenderer="com.test.renderers.MyItemRenderer" dataProvider="{someData}"
>>> width="100%">
>>>            <s:layout>
>>>                <s:VerticalLayout useVirtualLayout="false"/>
>>>            </s:layout>
>>>        </s:DataGroup>
>>>    </s:Group>
>>> </s:Scroller>
>>> The essential elements are:
>>> 1. You have to put a Group inside the Scroller, then put the real content
>>> (<s:DataGroup id="realContent">) inside that Group.
>>> 2. The layout of the realContent, you have to set its useVirtualLayout to
>>> false (the default value is false).
>>> 3. Listen for the realContent's touchInteractionStart and
>>> touchInteractionEnd event:
>>> When touchInteractionStart, disable any mouse and touch interactions of
>>> the realContent's mouseChildren by setting realContent.mouseChildren =
>>> false, then turn on the cache for realContent by setting
>>> realContent.cacheAsBitmap = true.
>>> When touchInteractionEnd, reverse the changes you made for the realContent.
>>> That's it! It's very easy to improve the scrolling performance by doing
>>> so. It's the same scrolling performance result when compared to the
>>> BitmapData.copyPixels() approach, yet cacheAsBitmap is much easier to
>>> understand and handle, so we don't have to do the modify the Scroller.as
>>> any more, the cacheAsBitmap approach is the best way to improve the
>>> scrolling performance now!
>>> If you not believe me, test it yourself : )
>>> 
>>> 
>>> DarkStone
>>> 2014-11-30
>>> 
>>> 
>>> 
>>> At 2014-10-29 18:56:09, "after24" <vi...@after24.net> wrote:
>>>> Hi Jude,
>>>> 
>>>> /*have you tried setting include in layout to false when setting visible
>>> to
>>>> false?*/
>>>> 
>>>> Yes, this property is set to false during scroll operations.
>>>> 
>>>> It seems that this performance decrease is caused by scout... when scout
>>> is
>>>> off, there is no difference between the two approaches (visible = false or
>>>> removeElement).
>>>> 
>>>> So it looks like this optimization is viable :-)
>>>> 
>>>> I am a bit busy this week but I will add a ticket on the JIRA with a
>>> sample
>>>> application as soon as possible.
>>>> 
>>>> Thank you.
>>>> 
>>>> 
>>>> 
>>>> --
>>>> View this message in context:
>>> http://apache-flex-development.2333347.n4.nabble.com/Scroller-optimization-tp41774p41910.html
>>>> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>>> 
> 
> 
> 
> -- 
> Ix Multimedia Software
> 
> Jan Luykenstraat 27
> 3521 VB Utrecht
> 
> T. 06-51952295
> I. www.ixsoftware.nl

Re: Re: Scroller optimization

Posted by Erik de Bruin <er...@ixsoftware.nl>.
Is there a way to bring this solution into the SDK and make it the
default behavior on mobile? Maybe register these event handlers upon
creation, dependant on Capabilities or some such?

It would sure be a nice addition to the next release ...

EdB



On Mon, Dec 1, 2014 at 12:26 PM, jude <fl...@gmail.com> wrote:
> This is great!
>
> On Sat, Nov 29, 2014 at 1:04 PM, DarkStone <da...@163.com> wrote:
>
>> Hi after24,
>>
>>
>> I've tried doing the scrolling optimization by using
>> BitmapData.copyPixels() as you described, and I have also tried
>> cacheAsBitmap, the result is, the performance between both are the same!
>> So there is no need to modify Scroller.as anymore, the cacheAsBitmap can
>> easily do the same thing.
>>
>>
>> Here is the sample code for how to use cacheAsBitmap to improve the
>> scrolling performance:
>> <s:Scroller width="100%" height="100%">
>>     <s:Group>
>>         <s:DataGroup id="realContent"
>> touchInteractionStart="realContent.mouseChildren=false;realContent.cacheAsBitmap=true;"
>> touchInteractionEnd="realContent.mouseChildren=true;realContent.cacheAsBitmap=false;"
>> itemRenderer="com.test.renderers.MyItemRenderer" dataProvider="{someData}"
>> width="100%">
>>             <s:layout>
>>                 <s:VerticalLayout useVirtualLayout="false"/>
>>             </s:layout>
>>         </s:DataGroup>
>>     </s:Group>
>> </s:Scroller>
>> The essential elements are:
>> 1. You have to put a Group inside the Scroller, then put the real content
>> (<s:DataGroup id="realContent">) inside that Group.
>> 2. The layout of the realContent, you have to set its useVirtualLayout to
>> false (the default value is false).
>> 3. Listen for the realContent's touchInteractionStart and
>> touchInteractionEnd event:
>> When touchInteractionStart, disable any mouse and touch interactions of
>> the realContent's mouseChildren by setting realContent.mouseChildren =
>> false, then turn on the cache for realContent by setting
>> realContent.cacheAsBitmap = true.
>> When touchInteractionEnd, reverse the changes you made for the realContent.
>> That's it! It's very easy to improve the scrolling performance by doing
>> so. It's the same scrolling performance result when compared to the
>> BitmapData.copyPixels() approach, yet cacheAsBitmap is much easier to
>> understand and handle, so we don't have to do the modify the Scroller.as
>> any more, the cacheAsBitmap approach is the best way to improve the
>> scrolling performance now!
>> If you not believe me, test it yourself : )
>>
>>
>> DarkStone
>> 2014-11-30
>>
>>
>>
>> At 2014-10-29 18:56:09, "after24" <vi...@after24.net> wrote:
>> >Hi Jude,
>> >
>> >/*have you tried setting include in layout to false when setting visible
>> to
>> >false?*/
>> >
>> >Yes, this property is set to false during scroll operations.
>> >
>> >It seems that this performance decrease is caused by scout... when scout
>> is
>> >off, there is no difference between the two approaches (visible = false or
>> >removeElement).
>> >
>> >So it looks like this optimization is viable :-)
>> >
>> >I am a bit busy this week but I will add a ticket on the JIRA with a
>> sample
>> >application as soon as possible.
>> >
>> >Thank you.
>> >
>> >
>> >
>> >--
>> >View this message in context:
>> http://apache-flex-development.2333347.n4.nabble.com/Scroller-optimization-tp41774p41910.html
>> >Sent from the Apache Flex Development mailing list archive at Nabble.com.
>>



-- 
Ix Multimedia Software

Jan Luykenstraat 27
3521 VB Utrecht

T. 06-51952295
I. www.ixsoftware.nl

Re: Re: Scroller optimization

Posted by jude <fl...@gmail.com>.
This is great!

On Sat, Nov 29, 2014 at 1:04 PM, DarkStone <da...@163.com> wrote:

> Hi after24,
>
>
> I've tried doing the scrolling optimization by using
> BitmapData.copyPixels() as you described, and I have also tried
> cacheAsBitmap, the result is, the performance between both are the same!
> So there is no need to modify Scroller.as anymore, the cacheAsBitmap can
> easily do the same thing.
>
>
> Here is the sample code for how to use cacheAsBitmap to improve the
> scrolling performance:
> <s:Scroller width="100%" height="100%">
>     <s:Group>
>         <s:DataGroup id="realContent"
> touchInteractionStart="realContent.mouseChildren=false;realContent.cacheAsBitmap=true;"
> touchInteractionEnd="realContent.mouseChildren=true;realContent.cacheAsBitmap=false;"
> itemRenderer="com.test.renderers.MyItemRenderer" dataProvider="{someData}"
> width="100%">
>             <s:layout>
>                 <s:VerticalLayout useVirtualLayout="false"/>
>             </s:layout>
>         </s:DataGroup>
>     </s:Group>
> </s:Scroller>
> The essential elements are:
> 1. You have to put a Group inside the Scroller, then put the real content
> (<s:DataGroup id="realContent">) inside that Group.
> 2. The layout of the realContent, you have to set its useVirtualLayout to
> false (the default value is false).
> 3. Listen for the realContent's touchInteractionStart and
> touchInteractionEnd event:
> When touchInteractionStart, disable any mouse and touch interactions of
> the realContent's mouseChildren by setting realContent.mouseChildren =
> false, then turn on the cache for realContent by setting
> realContent.cacheAsBitmap = true.
> When touchInteractionEnd, reverse the changes you made for the realContent.
> That's it! It's very easy to improve the scrolling performance by doing
> so. It's the same scrolling performance result when compared to the
> BitmapData.copyPixels() approach, yet cacheAsBitmap is much easier to
> understand and handle, so we don't have to do the modify the Scroller.as
> any more, the cacheAsBitmap approach is the best way to improve the
> scrolling performance now!
> If you not believe me, test it yourself : )
>
>
> DarkStone
> 2014-11-30
>
>
>
> At 2014-10-29 18:56:09, "after24" <vi...@after24.net> wrote:
> >Hi Jude,
> >
> >/*have you tried setting include in layout to false when setting visible
> to
> >false?*/
> >
> >Yes, this property is set to false during scroll operations.
> >
> >It seems that this performance decrease is caused by scout... when scout
> is
> >off, there is no difference between the two approaches (visible = false or
> >removeElement).
> >
> >So it looks like this optimization is viable :-)
> >
> >I am a bit busy this week but I will add a ticket on the JIRA with a
> sample
> >application as soon as possible.
> >
> >Thank you.
> >
> >
> >
> >--
> >View this message in context:
> http://apache-flex-development.2333347.n4.nabble.com/Scroller-optimization-tp41774p41910.html
> >Sent from the Apache Flex Development mailing list archive at Nabble.com.
>