Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GraphQL Playground significant battery drain #653

Closed
2 tasks done
heymartinadams opened this issue Apr 19, 2018 · 26 comments
Closed
2 tasks done

GraphQL Playground significant battery drain #653

heymartinadams opened this issue Apr 19, 2018 · 26 comments

Comments

@heymartinadams
Copy link
Contributor

heymartinadams commented Apr 19, 2018

This issue pertains to the following package(s):

  • GraphQL Playground - Electron App
  • 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:
withgqlp
Chrome without GraphQL Playground:
withoutgqlp
GraphQL Playground (standalone):
withgqlp-standalone

@heymartinadams heymartinadams changed the title GraphQL Playground in Chrome huge battery drain — but not standalone GraphQL Playground significant battery drain Apr 19, 2018
@heymartinadams
Copy link
Contributor Author

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

@timsuchanek
Copy link
Member

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

@heymartinadams
Copy link
Contributor Author

@timsuchanek v1.5.4

@schickling
Copy link
Collaborator

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

@heymartinadams
Copy link
Contributor Author

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

@schickling
Copy link
Collaborator

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

@heymartinadams
Copy link
Contributor Author

@schickling
Copy link
Collaborator

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

image

Can you completely wipe the Playground and re-install?

@heymartinadams
Copy link
Contributor Author

@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.
playground

@schickling
Copy link
Collaborator

schickling commented May 2, 2018

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)

image

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

@heymartinadams
Copy link
Contributor Author

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

@heymartinadams
Copy link
Contributor Author

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
Copy link
Collaborator

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
Copy link
Contributor Author

heymartinadams commented May 2, 2018

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.
image

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 heymartinadams reopened this May 2, 2018
@heymartinadams
Copy link
Contributor Author

heymartinadams commented May 3, 2018

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

@lorensr
Copy link

lorensr commented Aug 7, 2018

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.

image

image

In the console, every second there are 5 errors:

image

@lorensr
Copy link

lorensr commented Aug 10, 2018

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

#627

@calendee
Copy link

calendee commented Jan 28, 2019

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

graphql-playground-high-usage

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

@JClackett
Copy link

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
Copy link

In my case, I got some clues.

Open setting tab. It drains cpu normally.
too low

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

version 1.8.10

@taylorgoolsby
Copy link

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.

image

@blaiprat
Copy link

blaiprat commented Aug 2, 2019

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
ezgif-2-f69a739c86ac

@waynerob
Copy link

waynerob commented Jan 6, 2020

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
Copy link

bibendi commented Feb 17, 2020

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

@adrianoresende adrianoresende mentioned this issue Mar 29, 2020
3 tasks
@adrianoresende
Copy link

adrianoresende commented Mar 29, 2020

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

@heymartinadams
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests