Graphql-playground: GraphQL Playground significant battery drain

[heymartinadams]

This issue pertains to the following package(s):

• [x] GraphQL Playground - Electron App
• [x] GraphQL Playground HTML

Observation

This isn’t an issue, just a helpful observation I wanted to pass onto the community: noticed how running GraphQL Playground in Chrome, even when not using it, quickly depleted my laptop’s battery. But not so with the electron standalone version of the GraphQL Playground.

Energy Impact

GraphQL Playground in Chrome:

Chrome without GraphQL Playground:

GraphQL Playground (standalone):

[heymartinadams]

Oops, spoke too soon! Apparently also in the standalone version...

[timsuchanek]

Thanks for reporting @heymartinadams ! Which version of the Playground are you using? We had similar issues in previous versions.

[heymartinadams]

@timsuchanek v1.5.4

[schickling]

@heymartinadams do you see this related to #627 or does it occur "always"?

[heymartinadams]

@schickling it appears to occur always, once a connection to the server has been established.

[schickling]

@heymartinadams can you record a quick video screencast (I recommend Loom) where you launch the Playground and reproduce the behaviour?

[heymartinadams]

@schickling: https://www.useloom.com/share/1a37334f46494a96b09a74d8d6ba3dd3

[schickling]

Hmm that's weird. For me I don't get this kind of CPU utilization despite running the same query on the same endpoint + using PG version 1.6.3

Can you completely wipe the Playground and re-install?

[heymartinadams]

@schickling where’s access to v1.6.3? Only seeing 1.5.6: https://github.com/graphcool/graphql-playground/releases

Same issue with v1.5.6, despite completely wiping PG.

[schickling]

Oh sorry, the versioning scheme is a bit confusing right now. There are two versions:

1. Electron app: 1.5.6
2. Wrapped react app 1.6.3 (see in settings tab)

@heymartinadams do you have the option to try out the same on a different machine as well?

[heymartinadams]

@schickling not at the moment. Probably in a week from now.

[heymartinadams]

Mmh. Restarted PG again and this time it appears to be ok! Not sure what happened, @schickling, or why. Closing this unless it comes up again.

[schickling]

Hmm still sounds suspicious. @heymartinadams (or anyone else), please let us know if this happens again! The more details on how to reproduce this problem you can provide, the better!

[heymartinadams]

Look at that, @schickling! Saw your notification, so restarted PG and it then did it again. For a minute or so, then it went back to normal CPU usage. During that time of high CPU usage it appears that the schema was in a loading state.

Now when I’m restarting and as endpoint simply enter the server name without https:// the schema appears to be stuck in an indefinite loading cycle (with correspondingly high CPU usage). PG still works, though it doesn’t suggest what code to enter (since the schema doesn’t appear to load).

When I restart and enter the correct endpoint (server url with https://) it loads the schema relatively quickly.

So that might be the bug that causes the high-CPU use.

[heymartinadams]

Sometimes, too, I enter the correct server address with https:// and the schema keeps spinning. Restarting PG appears to then fix the issue.

[lorensr]

I also see high CPU usage when the server cannot be reached. This has been the case a lot because I keep localhost tabs open from projects I'm working, and often their servers are not running.

In the console, every second there are 5 errors:

[lorensr]

I updated to the latest npm version and it no longer happens. Looks like it was fixed by

https://github.com/prismagraphql/graphql-playground/issues/627

[calendee]

I'm using the latest GraphQL Playground (1.8.7) and am still seeing high CPU usage.

This is with the app running normally and connected to the backend just fine. Queries run properly.

[JClackett]

I'm having the same issues, happening on the latest demo version: https://www.graphqlbin.com/v2/6RQ6TM

when i turn polling off in settings it seems to calm down

[Cerberus]

In my case, I got some clues.

Open setting tab. It drains cpu normally.

But, open editor tab. It drains cpu too high.

version 1.8.10

[taylorgoolsby]

Whenever I have graphql playground open, I notice "WindowServer" and "Google Chrome Helper" have unusually high CPU usage. It stays like that as long as I have the tab open. As soon as I close it, or switch to a different tab, it's back to normal.

[blaiprat]

I've been struggling meanwhile working on a high dpi display and the playground. Today I did a bit of research and found out that the pulsating dot animation is what triggers the high cpu usage. Once you remove it form the page the page stops refreshing at 60fps and the Windows Server process stops using so much CPU

So as a temporary fix disabling the schema polling removes the dot and decreases CPU usage
Here's a gif with a quick test on this

[waynerob]

Good catch blaiprat! I had no idea that a CSS-specified animation could be so expensive. Apparently as developers we should scrutinize the use of any such animations in our pages. The notion of CSS animations being far less costly than old JS-based hacks seems to be erroneous.

edit: Hopefully this pulsation can be reconsidered or at least made optional via user settings. It's definitely not worth it... I hadn't even noticed the darned animation on the smaller screen that window was on.
edit 2: This issue doesn't seem to arise on Windows (the host OS in my case) but does occur in a VM running Ubuntu in both Firefox and Chrome. I haven't tried on a *NIX host system.

[bibendi]

Confirm @blaiprat's workaround. After I've disabled schema pooling, my laptop CPU LA gets down from 4 to 1.

[adrianoresende]

@heymartinadams Alerting you to the significant problem.
Check the comment above @blaiprat found the bug.

[heymartinadams]

Good to know, @adrianoresende. Will close this issue. 🙌🏼