Jump to content
Search Community

Draggable utility performance on iOS

summon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone,

 

its been a few days since I found out and started using gsap js and must admit its an awesome framework.

 

I make native games for iOS and now I evaluate gsap for html 5 cross platform 2d game development.

 

I have a strange performance issue regarding the Draggable utility on iOS devices (maybe on other platforms too but I have not tested any other device).

 

When the user moves the draggable element around with his finger I observe high CPU usage (55-65% on an iPhone 3GS) while when the user is not interracting with the element the CPU usage is 25-35%. I downloaded an updated version of Draggable from here but there was no difference.

 

I am at your disposal for further info and testing!

Link to comment
Share on other sites

Hi

 

There are two possibilities.

 

First you could use force3D: true in the tween vars n order to get the GPU in the mix, thus limiting the CPU cycles involved.

 

Another would be to create a very simple test in order to see if this could be a browser issue, the main idea with this reduced sample is to narrow down the possible causes as much as possible.

 

Also try tje engine's latest 1.11 preview because it has some major improvements on the Draggable tool.

 

Best

Rodrigo

Link to comment
Share on other sites

Hi

 

There are two possibilities.

 

First you could use force3D: true in the tween vars n order to get the GPU in the mix, thus limiting the CPU cycles involved.

 

Another would be to create a very simple test in order to see if this could be a browser issue, the main idea with this reduced sample is to narrow down the possible causes as much as possible.

 

Also try tje engine's latest 1.11 preview because it has some major improvements on the Draggable tool.

 

Best

Rodrigo

 

Hi Rodrigo,

 

thx for your reply. I made a test that has a single draggable element and there is indeed the same issue. Also, I already did the z : 0.1 trick, on the draggable element, so I suppose that force3D will not improve the performance.

 

Do you have any other suggestions and moreover where can I find the latest version of GSAP or the version you mentioned??

 

Thanks in advance

Link to comment
Share on other sites

Hi Summon

 

Are you having any problems with the 3GS using our demos on the Draggable page?

 

http://www.greensock.com/draggable/

 

Is the performance the same or worse than your demos?

 

As Rodrigo mentioned it would really help to see the page you are testing. There might be something in your code, perhaps in ours or maybe the 4yr-old 3GS is just too underpowered to expect much from (most likely scenario)

 

Here is a more recent version of 1.11.0: http://forums.greensock.com/topic/8454-from-and-clearprops-clarification/#entry33054 but it probably only has a few minor tweaks on top of the version you were testing. Expect 1.11.0 to be officially released very soon.

Link to comment
Share on other sites

Are you saying that you don't expect dragging to impact performance? Maybe I misunderstood your question, but it certainly seems reasonable to expect CPU usage to jump while "touchmove" events are being dispatched and Draggable is doing all its work. That stuff requires processing, and to make it smooth, it's having to refresh frequently (update values, apply them to the element, let the browser render the element in the new position, etc.) :)

 

Am I missing something?

Link to comment
Share on other sites

Thank you very much for your replies! I made some testing before answering.

 

Here are my findings.

 

Tests setup:

  1. iPhone 3GS - iOS 6.1.3
  2. iPad 2 - iOS 7.0.3
  3. Instrument tools from Apple using Time Profiler
  4. Latest version of gsap js library from here
  5. In every test I moved one finger and/or tapped many times on the screen of the device. In general I abused the screen with my finger.

Test 1:

  1. Create an app that shows a blank html page.
  2. Code for the test: 
    <HTML>
        <HEAD>
            <TITLE>Your Title Here</TITLE>
        </HEAD>
        <BODY BGCOLOR="000000">
        </BODY>
    </HTML>
    
  3. CPU Usage:
    1. 10-14% on iPhone 3GS
    2. 2-3% on iPad 2

Test 2:

  1. Create an app that shows a blank html page that has jQuery added.
  2. Code for the test: 
    <HTML>
        <HEAD>
            <TITLE>Your Title Here</TITLE>
    	    <script type="text/javascript" src="js/jquery/jquery-2.0.0.min.js"></script>
        </HEAD>
        <BODY BGCOLOR="000000">
        </BODY>
    </HTML>
    
  3. CPU Usage:
    1. 11-14% on iPhone 3GS
    2. 2-4% on iPad 2

Test 3: 

  1. Create an app that shows a blank html page that has jQuery and TweenMax added
  2. Code: 
    <HTML>
        <HEAD>
            <TITLE>Your Title Here</TITLE>
    		<script type="text/javascript" src="js/jquery/jquery-2.0.0.min.js"></script>
    		<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
        </HEAD>
        <BODY BGCOLOR="000000">
        </BODY>
    </HTML>
    
  3. CPU Usage:
    1. 11-14% on iPhone 3GS
    2. 2-4% on iPad 2

Test 4: 

  1. Create an app that shows a blank html page that has jQuery, TweenMax and Draggable added
  2. Code: 
    <HTML>
        <HEAD>
            <TITLE>Your Title Here</TITLE>
    		<script type="text/javascript" src="js/jquery/jquery-2.0.0.min.js"></script>
    		<script type="text/javascript" src="js/greensock/utils/Draggable.min.js"></script>
    		<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
        </HEAD>
        <BODY BGCOLOR="000000">
        </BODY>
    </HTML>
    
  3. CPU Usage:
    1. 28-35% on iPhone 3GS
    2. 6-9% on iPad 2

The html page does not even contain a draggable element. Only a reference to the library. The overhead is directly related to touch handling.

 

Can you take a look on this?

 

Thanks for your time!

Link to comment
Share on other sites

I can't see anything in the code that could possibly cause a big CPU load on touch devices just by loading the Draggable file - do you? 

 

You could try removing the line toward the very bottom of Draggable that adds a "touchcancel" listener, just to see if for some strange reason simply listening for touchcancel on an iPhone 3GS is CPU-intensive (I can't imagine why it would be). 

 

Lastly, you could try removing the "tick" listener right above that line too, just to see if that's the culprit, but again, that really shouldn't be a big drain. 

Link to comment
Share on other sites

I can't see anything in the code that could possibly cause a big CPU load on touch devices just by loading the Draggable file - do you? 

 

You could try removing the line toward the very bottom of Draggable that adds a "touchcancel" listener, just to see if for some strange reason simply listening for touchcancel on an iPhone 3GS is CPU-intensive (I can't imagine why it would be). 

 

Lastly, you could try removing the "tick" listener right above that line too, just to see if that's the culprit, but again, that really shouldn't be a big drain. 

 

Believe it or not the minified version is causing the CPU load!!!

 

When I replaced the minified version of Draggable with the non minified in order to do the tests you proposed the load went back to normal.

 

:shock:  :shock:  :shock:  :shock:  :-o  :-o  :shock:  8-)

Link to comment
Share on other sites

Wow. Never heard of anything like that before. Ha. We use the industry standard UglifyJS which seemed to work around some issues with Google's own Closure Compiler. Would you mind testing the latest 1.11.0 files that we just posted? http://www.greensock.com/?download=GSAP-JS. I'm curious if you see the same issue with that finalized minified file. 

Link to comment
Share on other sites

Wow. Never heard of anything like that before. Ha. We use the industry standard UglifyJS which seemed to work around some issues with Google's own Closure Compiler. Would you mind testing the latest 1.11.0 files that we just posted? http://www.greensock.com/?download=GSAP-JS. I'm curious if you see the same issue with that finalized minified file. 

 

I recall my previous statement, there is no diferrence between the minified and non minified versions of draggable.  :oops: Sorry about the frustration.

 

Well I used the latest version you proposed and indeed the two methods you mentioned are the overhead and more specific:

  1. When both tick listener and touchcancel are commented CPU is back to normal 11-14%
  2. When only tick listener is on then CPU is at 22-25%
  3. When only touchcancel listener is on then CPU is at 17-20%
  4. When both are on CPU is at 30-32%

These are the clues, double checked everything

Link to comment
Share on other sites

I don't think there's much we can do about the "touchcancel" thing (sounds like an odd iOS quirk) but would you mind trying the attached update of Draggable to see if it performs better for you? Basically, it avoids adding the "tick" listener until the first drag, and then 15 seconds after inactivity, it'll remove it as well. Usually the "tick" handler really isn't much of a CPU hog at all, but maybe on such old devices (and in older operating systems) it's more noticeable. 

Draggable.js.zip

Link to comment
Share on other sites

I don't think there's much we can do about the "touchcancel" thing (sounds like an odd iOS quirk) but would you mind trying the attached update of Draggable to see if it performs better for you? Basically, it avoids adding the "tick" listener until the first drag, and then 15 seconds after inactivity, it'll remove it as well. Usually the "tick" handler really isn't much of a CPU hog at all, but maybe on such old devices (and in older operating systems) it's more noticeable. 

 

Hi GreenSock,

 

thanks a lot for the support! I used that and performance is somewhat better now.

 

Thanks again. Keep up the good work!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...