Performance Issues in Microsoft Edge

[KatieWoe]

Test device: Hanson and Dell Operating System: Windows 10 Browser: Edge Problem description: Skater lags while on track. This is mostly the case when sliders are adjusted while the skater is moving, particularly the friction slider. This problem so far seems to only appear in Edge. This is for phetsims/QA/issues/134 Steps to reproduce:

1. Choose the Playground Screen (The other screens will display this behavior, but it is easiest to notice here).
2. Create a track with a simple bowl shape opening up. Making the track long will make this issue easier to see.
3. Start the skater on one end of the track with the thumb of the friction slider on the "none" position.
4. As the skater moves, adjust the thumb of the friction slider back and forth. You should see the skater start to lag. This will also occur to a slightly lesser degree if you adjust the thumb of the mass slider while the skater moves.

Troubleshooting information (do not edit):

Name: ‪Energy Skate Park: Basics‬ URL: https://phet-dev.colorado.edu/html/energy-skate-park-basics/1.4.0-dev.1/phet/energy-skate-park-basics_en_phet.html Version: 1.4.0-dev.1 2018-06-20 00:09:06 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134 Language: en-US Window: 1920x946 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 Vendor: Microsoft (Microsoft Edge) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"928741cf","branch":"master"},"axon":{"sha":"f0522e7c","branch":"master"},"brand":{"sha":"89d28f63","branch":"master"},"chipper":{"sha":"e8946524","branch":"master"},"dot":{"sha":"6482f8c9","branch":"master"},"energy-skate-park-basics":{"sha":"288fcefd","branch":"master"},"joist":{"sha":"22e437d5","branch":"master"},"kite":{"sha":"a1086efc","branch":"master"},"phet-core":{"sha":"17326041","branch":"master"},"phet-io":{"sha":"3ea0727a","branch":"master"},"phet-io-wrapper-classroom-activity":{"sha":"53708616","branch":"master"},"phet-io-wrapper-hookes-law-energy":{"sha":"8a546a32","branch":"master"},"phet-io-wrapper-lab-book":{"sha":"1527afd6","branch":"master"},"phet-io-wrappers":{"sha":"8d814eab","branch":"master"},"phetcommon":{"sha":"6ec8cd89","branch":"master"},"query-string-machine":{"sha":"4182612f","branch":"master"},"scenery":{"sha":"88cb642e","branch":"master"},"scenery-phet":{"sha":"7bcde0b2","branch":"master"},"sherpa":{"sha":"88c3b828","branch":"master"},"sun":{"sha":"7579e8fa","branch":"master"},"tandem":{"sha":"8461b6f3","branch":"master"}}

[jessegreenberg]

Thanks @KatieWoe, can you please comment on how the performance on Edge you observed in 1.4.0-dev.1 compares to the performance you observe of the published version on the same platform?

[KatieWoe]

Sure. I just did a quick test and the skater didn't seem to lag as much on the published version. However, there did seem to be significant lag in the thumbs on the slider and when dragging the points on the track. I'm about to head out for the day but I will do some more thorough testing tomorrow morning to make sure it is an issue with Edge and not my computer etc.

[KatieWoe]

I just checked the published simulation in edge on two windows 10 computers. They didn't show the same jumping lag that I saw in the dev version. However, there was very significant lag when click and dragging objects such as the thumbs on sliders, the skater, or track pieces. The simulation also ran significantly slower. It took about 5 seconds longer for the skater to go back and forth on the first track on the intro screen in Edge compared to Chrome. This difference is not present, or at least not noticeable, in the dev version. The dev version also does not have the lag when click and dragging.

[jessegreenberg]

Thanks @KatieWoe. I confirmed that framerate drops when using the sliders with a moving skater on Edge. From https://github.com/phetsims/energy-skate-park-basics/issues/423#issuecomment-404853868, it is good to hear that there are other places where performance has improved since the previous release.

@ariel-phet are you able to test this on Edge? If so, can you help decide if we should spend time trying to opitimize this?

[ariel-phet]

@jessegreenberg looking at this on Edge Win 10, the skater stalls pretty brutally in the situation @KatieWoe described (wide parabolic track). It seems worthy of at least some initial investigation of why performance is so choppy in this situation on Edge (it is perfectly smooth on Chrome).

I would say spend an hour or two investigating, or maybe schedule an hour or two with JO in the coming weeks to take a look. It would be good to understand what is causing the big performance hit.

[jessegreenberg]

Interesting it happens more with the friction slider, which indicates that it is not related to rendering since there is no graphical representation for friction on the track.

[jessegreenberg]

On the other hand, I don't see any hits for frictionProperty.link and it isn't used in a DerivedProperty. Ill continue by trying out the Edge profiling tools, which actually look pretty nice, can clearly see the drop in framerate

[jessegreenberg]

[jessegreenberg]

It looks like most of the time is being spent in renderDrawable of CanvasBlock.

EDIT for more info: More explicitly, the time is mostly being spent in DOM calls like drawImage, clearRect, fillText, fillStyle.

[jessegreenberg]

The sim slows down about as much when I move the track or change its shape.

I figured out that if I remove the track layer, performance while dragging the slider is much improved. This includes on the Playground screen while the skater is moving, was able to test with query params debugTrack&testTrackIndex=6 (since without the track layer I couldn't create a new track).

Strangely, this is the opposite of what I would expect from https://github.com/phetsims/energy-skate-park-basics/issues/423#issuecomment-407592492 because the track is using svg and it looked like most of the time was being taken up by CanvasBlock.

[jessegreenberg]

Ah, I forgot that we have rootRenderer set to canvas for Edge still, so the track is being drawn with canvas in Edge.

[jessegreenberg]

Rendering the EnergySkateParkBasicsControlPanel with svg seems to dramatically improve performance. I have a tenuous grasp of the Scenery implementation here, but my thinking is that modifying anything in the same canvas Block in Edge (or maybe all browsers?) will force a redraw of everything in the Block. So putting the control panel in an SVGBlock will let us move the slider thumbs without redrawing the entire track. Or maybe I am completely wrong. Either way, the interaction feels much more fluid.

[jessegreenberg]

@KatieWoe can you please see if performance has improved on latest phettest? canvas is used in in Edge primarily for text issues like https://github.com/phetsims/molarity/issues/24. Please be on the lookout for any weird text rendering in the control panel.

[KatieWoe]

Performance seems much better on master. The sliders seem to lag behind the mouse when dragging a bit, but the performance is drastically improved. Have not yet noticed any unusual text rendering.

[jessegreenberg]

Thanks @KatieWoe! I see what you mean with the slight delay while dragging the sliders. I am seeing a similar delay in Edge in a few other sims (like Pendulum Lab). @ariel-phet can you please review and let us know if the dragging delay for sliders is worth investigating? I personally don't think the delay is great enough to inhibit interaction, but I don't feel that I can make the decision.

[ariel-phet]

@jessegreenberg performance is MUCH better. I am not experiencing any lag that seems problematic. Nice work! closing