Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-51161

Blue Ocean spinner animation uses 100% CPU

    XMLWordPrintable

    Details

    • Sprint:
      Blue Ocean 1.6 - beta 2, Blue Ocean - 1.6 - beta 4
    • Similar Issues:

      Description

      The new blue ocean spinner animation for running builds creates 100% CPU usage in Chrome on my laptop, making it last ~2 hours on battery instead of 10.

      The speed of the machine almost doesn't matter, it'll try to make the animation as smooth as possible.

      Note this is a common problem with lots of software; Chromium had this issue with their tab notification highligts, Firefox had this problem with their spinner.

      The solution is always to cap the speed of the spinner animation (e.g. to 25 FPS), or to use an animation that is designed to looks good at low FPS (e.g. using a "segmented" spinner like this one.

        Attachments

          Issue Links

            Activity

            Hide
            nicu Nicolae Pascu added a comment -

            Hi Niklas Hambuechen, I cannot reproduce this issue, can you please provide some detailed steps on how to reproduce it? The spinner animation is done using "requestAnimationFrame" so the animation is already capped.

            For reference, here is the implementation https://github.com/jenkinsci/blueocean-plugin/blob/master/jenkins-design-language/src/js/components/status/SvgSpinner.jsx#L29

            Show
            nicu Nicolae Pascu added a comment - Hi Niklas Hambuechen , I cannot reproduce this issue, can you please provide some detailed steps on how to reproduce it? The spinner animation is done using "requestAnimationFrame" so the animation is already capped. For reference, here is the implementation https://github.com/jenkinsci/blueocean-plugin/blob/master/jenkins-design-language/src/js/components/status/SvgSpinner.jsx#L29
            Hide
            nh2 Niklas Hambuechen added a comment -

            Hey Nicolae, to reproduce I simply start a build or re-build, an then htop shows the CPU usage in my Chromium 65, see attached screenshot.

            Show
            nh2 Niklas Hambuechen added a comment - Hey Nicolae, to reproduce I simply start a build or re-build, an then htop shows the CPU usage in my Chromium 65, see attached screenshot.
            Hide
            nicu Nicolae Pascu added a comment -

            I tracked down the issue to the fact that we apply the transform on the "g" tag inside the SVG which causes full page re-paints. I am working on a fix, thanks for reporting the issue Niklas Hambuechen.

            Show
            nicu Nicolae Pascu added a comment - I tracked down the issue to the fact that we apply the transform on the "g" tag inside the SVG which causes full page re-paints. I am working on a fix, thanks for reporting the issue Niklas Hambuechen .

              People

              • Assignee:
                nicu Nicolae Pascu
                Reporter:
                nh2 Niklas Hambuechen
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: