Add config option to disable build-time css animations and other fancy stuff

[Benjamin Flesch]

As discussed in #159 this is a drain on people working on machine without 3d acceleration for css animations.

Current solution implemented is to click on a hidden button on the top right corner while the animation is running. Obviously this is not the best solution as during that time the computer is extremely laggy so it's hard to move the mouse anyways on top of a css-animated background.

Additionally the button is hidden, so people have to go to github issues to find out.

Either there should be FPS measurement to figure out if animations should be used, or please enable a nuxt.config.js option to disable this for the whole project.

Thank you!

[Daniel Roe]

Exposing a prop, which we can then set via nuxi, is not a bad idea. What do you think @antfu?

[Benjamin Flesch]

@danielroe thanks for your quick response and crazy amount of work on this project

[Anthony Fu]

We already have the mechanism to measure the performance and auto-downgrade to some extent. If that is still not enough, I guess a configuration entry might be an idea, the user can even have them in the global .nuxtrc

[Benjamin Flesch]

@antfu can you point me to the performance measuring mechanism? I can try it on my machine.

[Anthony Fu]

assets/packages/templates/templates/loading/index.html

Lines 103 to 109 in aa803dc

 function checkIsLowPerformance() { 
   return window.matchMedia('(prefers-reduced-motion: reduce)').matches 
    || navigator.hardwareConcurrency < 2 
    || navigator.deviceMemory < 1 
    // Safari has some performance issue on the blur filter. Remove this when it's fixed. 
    || isSafari 
 } 

[Benjamin Flesch]

Thanks @antfu I had a look at this section some months ago. I'm running i7 with navigator.hardwareConcurrency = 8 and deviceMemory = 8 so this check would fail. Also on chrome desktop I can't see where the prefers-reduced-motion could be set: https://webkit.org/blog-files/prefers-reduced-motion/prm.htm

I suspect reason for this laggyness is the intel graphics chip included with the processor.

Would you accept a PR for this?

[Anthony Fu]

If you see a better way to detect the performance mode, for sure PR would be appreciated :)

[Benjamin Flesch]

@antfu maybe I'm misunderstanding. I'd like to add a nuxt config flag that disables the CSS animation. If you instead prefer to improve the performance measurement I can do that as well (e.g. look at how chrome dev console measures CSS3 animation FPS rate and copy that code to nuxt).

What is direction this should go? Thanks!

[Benjamin Flesch]

OK so my brain couldn't shut up about this. I built mechanism for measuring FPS within loading/index.htm with

      let numFrames = 0
      function measureFPS (timestamp) {       
        const elapsedSeconds = (performance.now() / 1000)
        numFrames++
        const fpsCount = numFrames / elapsedSeconds
        console.log("fpsCount", fpsCount)

        if (elapsedSeconds > 3 && fpsCount < 10) {
          console.log("fps drop detected, stopping animation")
          return
        }

        window.requestAnimationFrame(measureFPS)
      }

      window.requestAnimationFrame(measureFPS)

This measures the FPS problem on my machine. FPS drop to 10 or lower on window.innerWidth = 1920 and innerHeight = 904. If the nuxt browser window is smaller or hidden the FPS measurement also works.

Here's a screenshot of me moving the mouse without any intensive background tasks running. So you can imagine that FPS drop much lower if nuxt is actually compiling ;)

@antfu if you agree I will create PR with active FPS measurement in the nuxt loading screen and dynamic disabling of the animation.

[Anthony Fu]

That sounds not bad to me. I guess we could have it, or if you have any other opinions @danielroe?

[Daniel Roe]

I was actually wondering the other day about including a FPS monitor in dev mode for Nuxt to help users monitor their own apps' performance...

[Benjamin Flesch]

I was actually wondering the other day about including a FPS monitor in dev mode for Nuxt to help users monitor their own apps' performance...

That's a feature I was also missing. And the FPS monitor from chrome dev tools is quite cumbersome to reach. The code is simple enough to re-use in nuxt dev tools and for the loading page.