search

whitesmith / flooper

Use flex order to create an infinite animated loop of items.
http://whitesmith.github.io/flooper
MIT License
10 stars 2 forks source link

Performance adapt #21

Closed tomasmcm closed 6 years ago

tomasmcm commented 6 years ago

Fixes: https://github.com/whitesmith/flooper/issues/20

Instead of targeting mobile devices per se (Mozilla says we shouldn't do it... https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent) I though it would better to detect performance capability, and limit the animations when the device has a less powerful cpu.

Now, for the JavaScript Magic, apparently there is a property called navigator.hardwareConcurrency that returns the number of logical processor cores (https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency), it is not supported everywhere though.. (https://caniuse.com/#search=hardwareConcurrency).

So, I found this polyfill that creates WebWorkers to check for performance when navigator.hardwareConcurrency is not available https://github.com/phenomnomnominal/workerbench.coffee

The nice thing is because the animations were well implemented by @renatodeleao :kudos:, even if the checking process takes too long (usually no more than 1sec) the website still loads with no animations!

tomasmcm commented 6 years ago

Also, this fixes https://github.com/whitesmith/flooper/issues/17 (it was just a matter of switching the order of the sequence)